Qu’est-ce que la HSL ?
Le HSL est un modèle de couleur. Comme les modèles de couleurs CMJN (Cyan, Magenta, Jaune Noir)) et RVB (Rouge, Vert, Bleu , ou Red, Green, Blue), le nom du modèle HSL vient aussi d’un acronyme, celui formé par les mots ‘Hue” “Saturation” “Lightness”, car le HSL joue avec les composants constitutifs de la couleur.
Une couleur en HSL est exprimée sous la forme d’une séquence de trois valeurs, par exemple :
La première valeur est un nombre entier. Ce nombre, cette teinte est spécifiée sous forme d’un angle dans la roue chromatique.
Les deux autres sont des pourcentages : la saturation et la luminosité.
- 100% correspond à une saturation totale et 0 % à une nuance de gris
- 100% de luminosité est blanc, 0 % de luminosité est noir et 50 % de luminosité correspond à la valeur normale.
Quels sont les avantages de HSL ?
Les codes couleur hexadécimaux, par exemple #000000 pour le noir ou #FFFFFF pour le blanc pur, ont un avantage. Ces codes sont courts et donc faciles à retenir. Cependant, si vous travaillez avec des moteurs de rendu CSS comme SASS et que vous stockez les couleurs dans des variables, cet avantage n’est plus si décisif.
En revanche, le modèle de couleur hexadécimal présente plusieurs problèmes. Si, par exemple, nous vous demandons de quel type de couleur est #FFD32F, sauriez-vous me le dire ? Bon c’est la couleur préférée, le jaune Opsone.
Dans l’absolu ce n’est pas très grave de ne pas connaître toutes les teintes du premier coup d’œil, le nuancier Pantone, je ne le connais pas non plus. Le problème selon moi est la gestion hexadécimale peu intuitive pour générer une échelle de couleur ou pour ajouter de l’opacité.
Heureusement, les couleurs au format HSL peuvent nous aider à résoudre tous ces problèmes.
Les valeurs HSL sont plus intuitives
Si vous avez une culture graphique, vous avez une vision assez précise d’une roue colorimétrique. Vous pourrez donc en consultant la première valeur, savoir si vous avez affaire à un rouge, un jaune ou un vert. Avec la seconde valeur, vous déterminerez quel niveau de saturation est appliqué. Et enfin avec la dernière donnée, vous pourrez déduire si la couleur est claire ou sombre. Vous comprenez ainsi mieux la construction de la couleur avec laquelle vous travaillez.
HSL facilite la création de palettes cohérentes
Lors de la création du nuancier pour votre projet digital, il est primordial que les couleurs fonctionnent parfaitement ensemble et forment un ensemble cohérent. Pour trouver cette harmonie et créer la charte, l’avantage du HSL est qu’en travaillant sur la saturation et la luminosité, vous arriverez plus rapidement à un résultat cohérent en générant des couleurs secondaires en modifiant par exemple la teinte de la couleur primaire.
Voici un exemple d’un nuancier en modifiant uniquement la valeur 1 de notre couleur.
Lors de la génération de palettes de couleurs pour un site Web, il est très important que toutes les couleurs conservent une certaine harmonie entre elles. Disons qu’ils doivent être différents, mais en même temps, ils doivent avoir quelque chose en commun qui les unit, qui les fait ressembler à une famille. Et nous y parvenons avec saturation et luminosité.
Les couleurs similaires en saturation et en luminosité vont bien les unes avec les autres. Ainsi, vous pouvez créer un ensemble cohérent de couleurs secondaires en modifiant uniquement la teinte de la couleur primaire. Dans l’exemple ci-dessous, il y a harmonie, car ces couleurs ont pratiquement la même luminosité et la saturation est très semblable.
HSL facilite la création de variantes de couleur
Lors de la conception de votre design system, vous avez besoin de décliner vos couleurs, par exemple pour signifier qu’un bouton est désactivé. L’effet qui est généralement appliqué est de remplacer la couleur par un gris. Mais avec le HSL, vous n’avez qu’à déplacer le curseur S pour griser votre couleur et d’éclaircir la valeur L. De ce fait, vous obtenez une nuance parfaitement cohérente.
HSL et la gestion des transparences
L’autre avantage du HSL est la gestion de la couche Alpha (gestion de la transparence), d’où l’ajout de la donnée A dans votre code.
Reprenons notre couleur favorite, notre jaune Opsone que nous avons vu en introduction de cet article, mais désormais avec une opacité de 50 %.
Conclusion
Si vous utilisez un outil de conception comme Figma, le plugin Color Time, est très pratique pour générer vos nuanciers.
Vous pouvez également le combiner à un autre outil comme Tailwind CSS generator, pour décliner la gamme de couleur et obtenir un nommage cohérent pour votre design system.
Color Sticker, est un widget qui peut afficher directement les valeurs de couleur, comme HSL / RGB / HSB / HEX. Pratique pour compléter votre design system.
