Teinte, saturation et luminosité

En TSL, le jaune et le bleu ont tous deux une luminosité de 50 %, pourtant le jaune réfléchit près de 13 fois plus de lumière que le bleu selon la formule de luminance WCAG.

Transformer le cube en cylindre

Les nombres RVB sont faciles pour un écran et difficiles pour une personne. Si tu veux « le même bleu, un peu plus clair », tu dois changer les trois canaux à la fois de quantités différentes. Le TSL réorganise les mêmes couleurs sRVB pour que les réglages correspondent à la façon dont on parle de couleur. CSS Color 4 le décrit comme un modèle cylindrique : un angle de teinte sur le pourtour, un axe central pour la luminosité du noir au blanc, et un rayon pour la saturation, c'est-à-dire l'éloignement d'une couleur par rapport à un gris neutre.

Imagine le cube RVB posé sur son coin noir avec le blanc juste au-dessus. L'axe des gris est maintenant vertical. Regarde d'en haut et les six coins vifs, rouge, jaune, vert, cyan, bleu et magenta, forment un anneau autour de l'axe. Le TSL prend cet anneau, l'arrondit et étire tout le solide en cylindre. Le modèle ci-dessus montre le résultat : un disque horizontal à la luminosité choisie et une tranche verticale à la teinte choisie et à son opposée. Clique n'importe où sur l'une ou l'autre surface pour choisir cette couleur.

Teinte

La teinte est un angle en degrés. CSS Color 4 fixe le point de départ : 0deg est le rouge sRVB, 120deg le vert et 240deg le bleu, et 360deg revient au rouge. À mi-chemin entre les primaires se trouvent les secondaires : 60deg jaune, 180deg cyan et 300deg magenta. Comme la teinte est un angle, elle boucle. Une teinte de 390deg est la même que 30deg, et ajouter 180deg à n'importe quelle teinte donne la couleur directement en face sur le cercle.

Saturation et luminosité

La saturation est un pourcentage. À 100 %, la couleur se trouve à l'extérieur du cylindre et est aussi vive que sRVB le permet à cette luminosité. À 0 %, elle se trouve sur l'axe central et c'est un gris ; CSS Color 4 dit que la teinte n'a alors aucun effet, donc hsl(0deg 0% 50%) et hsl(180deg 0% 50%) sont le même gris. La luminosité est aussi un pourcentage. 0 % est le noir pour toutes les teintes, 100 % est le blanc pour toutes les teintes, et 50 % donne la version la plus vive d'une teinte. Ainsi hsl(0deg 100% 50%) est le même rouge que #ff0000, tandis que hsl(120deg 100% 25%) est un vert sombre, rgb(0 128 0).

Là où le TSL trompe

Le TSL est pratique, et la spécification CSS est franche sur ses limites. Sa luminosité n'est pas la clarté que voit ton œil. Le jaune, hsl(60deg 100% 50%), et le bleu, hsl(240deg 100% 50%), ont le même L de 50 %, mais le jaune paraît bien plus clair. La formule de luminance WCAG donne 0.9278 pour ce jaune et 0.0722 pour ce bleu, un rapport de presque 13. L'angle de teinte n'est pas non plus régulier : la spécification note qu'un pas de 30 degrés parmi les bleus semble petit, alors que le même pas entre le jaune et le vert semble grand. Des espaces CSS plus récents comme oklch() ont été conçus pour corriger cela. Pour vérifier si un texte est lisible, ne te fie jamais à la luminosité TSL. Utilise le rapport de contraste, que tu calculeras à l'unité 6.