Améliore ta gestion des couleurs avec hsl()

Dans cet article je te propose de découvrir une façon de déclarer des couleurs en CSS bien plus flexible et lisible que les méthodes que l'on rencontre habituellement !

Déclarer des couleurs en CSS fait partie des choses que l'on apprend en premier.

Les méthodes les plus fréquemment rencontrées sont :

• le nom HTML de la couleur (red, blue, lightblue..).
• la référence hexadécimale (#1abc9c, #e74c3c..).
• ou encore avec la fonction rgb() ou rgba() (rgb(26, 188, 156), rgba(231, 76, 60, .5)..).

Le plus souvent, c'est le code héxadécimal de la couleur que l'on rencontre, le code HTML des couleurs n'offre pas de flexibilité.

La fonction rgba() quant à elle, est en général préférée pour la gestion de la transparence, car il suffit juste de lui ajouter un quatrième paramètre pour modifier l'opacité de la couleur.

D'ailleurs, tu savais que l'on pouvait aussi mettre de la transparence sur de l'héxadécimal ? 😉

Il suffit pour cela d'ajouter un code de transparence au début du code héxadécimal.

Personnellement je ne trouve pas cette approche très lisible et facile à mémoriser mais c'est toujours bon à savoir : par exemple 80 correspondra à une transparence de 50%, et 66 correspondra à 40% (pas évident hein ? 😅).

Tu trouveras sur ce gist la liste des codes de transparence.

Des codes couleur peu lisibles

Avant de te parler de la fonction hsl(), prenons la couleur en hexadécimale suivante : #3498db.

Admettons que tu souhaites modifier cette couleur pour la rendre plus claire, ou plus saturée, sans quitter ton éditeur de code, comment ferais-tu ?

Pas simple, non ? 😉

Ce que je veux te montrer c'est qu'un code hexadécimal n'est pas très lisible et éditable facilement pour un humain.

Dans cet article je vais t'expliquer comment fonctionne hsl(), une fonction qui va t'aider à mieux gérer les changements de couleurs, mais aussi améliorer la gestion des couleurs d'un projet entier.

Le fonctionnement de hsl()

hsl() prend 3 paramètres qui sont :

• la hue (teinte) de 0 à 360 : c'est la couleur tout simplement.
• la saturation : en pourcentage, qui correspond à la quantité de couleur.
• la lightness (luminosité) : en pourcentage aussi, qui correspond à la quantité de noir ou de blanc.

Voyons un exemple simple d'utilisation :

body {
  background-color: hsl(360 100% 50%);
}

Tu peux voir dans l'exemple que je n'utilise pas de virgule pour séparer les paramètres, c'est une nouvelle syntaxe, tu peux faire de même avec rgb().

Donc reprenons :

• 360 correspond à la couleur rouge, 0 aussi, on commence au rouge, on passe par toutes les couleurs et on revient au rouge.
• 100% correspond à la saturation, plus on met de saturation, plus on met de couleur, si on met du 0% on obtient du gris, pour simplifier on peut dire que c'est la quantité de couleur que l'on veut.
• 50% correspond à la luminosité, si tu mets 100% tu obtiendras du blanc, si tu mets 0% tu obtiendras du noir, il s'agit de la quantité de blanc (ou de noir) que l'on veut mettre.

Maintenant si on reprend la question que je t'ai posé plus haut : si je te demande de changer la couleur que l'on vient de déclarer avec la fonction hsl() pour la rendre plus claire ou plus saturée ? C'est beaucoup plus simple n'est-ce pas ? 🙂

Il te suffira d'augmenter ou baisser les valeurs en pourcentage correspondant à la saturation ou à la luminosité.

Pour la teinte, tu peux imaginer un cercle de couleurs où la teinte est un angle de ce cercle :

D'ailleurs il est possible d'aller au delà de 360 ou de mettre des valeurs négatives : -360 ou 720 correspondront toujours à du rouge (360 ou 0).

Utiliser les variables CSS avec hsl()

Ne nous arrêtons pas en si bon chemin et voyons comment améliorer la gestion des couleurs avec les variables CSS et cette fonction hsl() !

Un des problèmes que l'on rencontre quand on fait de l'intégration, c'est la difficulté à gérer un thème de couleurs, ce dernier doit pouvoir évoluer facilement, et surtout s'adapter sans avoir besoin de trop intervenir.

Comme exemple, on va imaginer un composant card avec une couleur de fond orange clair, et un texte orange.

On commence par le HTML :

<div class="card">
  <h3 class="card-title">Default card</h3>
  <p class="card-text">...</p>
</div>

Puis on déclare les couleurs en CSS avec la fonction hsl() :

.card {
  background-color: hsl(25 90% 97%);
}
.card-title, .card-text {
  color: hsl(25 90% 65%);
}

Comme on l'a vu précédement, la gestion des couleurs est ici simplifiée par la fonction hsl().

Si je veux obtenir une couleur autre que du orange, il me suffira de changer la teinte sur la couleur de fond et sur le texte de la card.

C'est déjà une bonne chose, mais allons plus loin : on peut observer ici que c'est seulement la luminosité qui change entre la couleur de fond et la couleur du texte.

Voyons si on ne peut pas optimiser notre code en utilisant des variables CSS pour éviter de faire des répétitions.

On pourrait stocker dans une variable les 3 composantes de la fonction hsl() comme ceci :

:root {
  --card: 25 90% 97%;
  --card-content: 25 90% 65%;
}

Mais on ne vient que déplacer la répétition de la teinte et de la saturation.

Pour avoir un meilleur contrôle, on va plutôt stocker chaque valeur dans une variable.

Cela permettra de réassigner une variable dans une règle CSS pour changer la luminosité (ou la teinte ou la saturation si besoin ) du texte de la card :

:root {
  --hue: 25;
  --saturation: 90%;
  --lightness: 97%;
}
.card {
  background-color: hsl(var(--hue) var(--saturation) var(--lightness));
}
.card-title {
  --lightness: 65%;
  color: hsl(var(--hue) var(--saturation) var(--lightness));
}

Avec les variables, je garde le contrôle sur les 3 composantes de la fonction hsl(), et je ne répète pas les valeurs de la teinte et de la saturation.

Pour le titre, comme j'ai besoin de lui donner une luminosité plus faible, je réassigne la variable --lightness juste avant de lui donner une couleur et d'appeler la fonction hsl() et mes variables.

Mieux gérer les déclinaisons de couleurs

Maintenant si on a besoin de décliner la card dans une autre couleur, cela implique de lui changer la couleur de fond et la couleur du texte, donc seulement la teinte, c'est là que ce système s'avère puissant.

Imaginons une deuxième card qui serait cette fois ci de couleur bleue, pour pouvoir la cibler en CSS, je lui ajoute la classe .card-secondary :

<div class="card">
  <h3 class="card-title">Default card</h3>
  <p class="card-text">...</p>
</div>

<div class="card card-secondary">
  <h3 class="card-title">Secondary card</h3>
  <p class="card-text">...</p>
</div>

Dans mon CSS je garde la même approche avec la fonction hsl() et mes variables, je réassigne juste la variable --hue sur la classe .card-secondary :

:root {
  --hue: 25;
  --saturation: 90%;
  --lightness: 97%;
}
.card {
  background-color: hsl(var(--hue) var(--saturation) var(--lightness));
}
.card-title {
  --lightness: 65%;
  color: hsl(var(--hue) var(--saturation) var(--lightness));
}

.card-secondary {
  --hue: 180;
}

En une ligne de CSS on peut décliner notre card, le titre et le texte vont hériter de la teinte, et s'adapter.

On peut donc très facilement faire plusieurs déclinaisons, et imaginer reproduire ce système sur d'autres composants.

Il ne faudra pas hésiter à certains moment à réassigner les variables --lightness et --saturation si besoin.

.card-secondary {
  --hue: 215;
}
.card-success {
  --hue: 140;
  --saturation: 65%;
}
.card-danger {
  --hue: 5;
}
.card-info {
  --hue: 265;
}

Comment gèrer la transparence avec hsl() ?

C'est très simple, tu peux ajouter un quatrième paramètre à la fonction hsl(), et tu n'as pas besoin de séparer là aussi les paramètres par des virgules, mais il faudra séparer la transparence des autres paramètres avec un / :

.card {
  color: hsl(200 50% 50% / 0.5);
}

Tu peux aussi te servir de la fonction hsla(), qui fonctionne exactement comme la fonction hsl(), tu auras juste besoin de séparer les valeurs par des espaces :

.card-title {
  color: hsla(200 50% 50% 0.5);
}

C'est la fin de cet article, en espérant t'avoir donné envie de changer ta façon de déclarer des couleurs en CSS !

Si ce n'est pas déjà fait, tu peux t'abonner à ma newsletter pour recevoir du contenu exclusif et être prévenu en avance de la sortie des nouveaux articles.

Tu peux aussi partager cet article pour soutenir mon travail et lui donner plus de visibilité ! 😊

À bientot, Seb.