À propos de la couleur HSL

La couleur HSL est un modèle colorimétrique qui représente les couleurs avec la teinte, la saturation et la luminosité. Contrairement à RGB, qui indique directement l’intensité des lumières rouge, verte et bleue, HSL sépare la teinte, la vivacité et la luminosité, ce qui est utile pour ajuster les couleurs et travailler en CSS.

Par exemple, les couleurs principales comme le rouge peuvent être représentées ainsi.

Pour inclure la transparence, ajoutez une valeur alpha. Par exemple, un rouge semi-transparent peut être représenté par hsl(0deg 100% 50% / 0.5).

En entrée, vous pouvez utiliser la notation séparée par des espaces hsl(0deg 100% 50%), ainsi que l’ancienne notation séparée par des virgules hsl(0deg, 100%, 50%).

Traitement de la teinte, de la saturation et de la luminosité

La teinte est traitée comme un angle; les valeurs supérieures à 360deg ou négatives sont normalisées dans la plage de 0deg à 360deg. Par exemple, hsl(360deg 100% 50%) est traité comme la même couleur que hsl(0deg 100% 50%), et hsl(-120deg 100% 50%) comme la même couleur que hsl(240deg 100% 50%).

La saturation et la luminosité sont traitées dans la plage de 0% à 100%. Si la saturation vaut 0%, la couleur devient un gris achromatique quelle que soit la teinte. Si la luminosité vaut 0%, la couleur est noire; si elle vaut 100%, elle est blanche.

Différence entre HSL et RGB

RGB indique directement les composantes rouge, verte et bleue, ce qui le rapproche de l’affichage à l’écran et des données d’image. HSL sépare la teinte, la saturation et la luminosité, ce qui facilite des opérations comme « éclaircir en gardant la même teinte » ou « réduire seulement la saturation ».

Cependant, HSL n’est pas un espace colorimétrique perceptuellement uniforme. Pour mieux gérer la luminosité visuelle ou les différences de couleur, on peut utiliser des espaces colorimétriques comme Lab, LCH, Oklab ou Oklch.