OKLCH pour les designers : pourquoi il a remplacé HSL

Si vous avez déjà construit une gamme de nuances en faisant varier régulièrement la luminosité HSL et trouvé que le milieu sonnait faux, vous avez rencontré la raison d’être d’OKLCH.

Ce qui ne va pas avec HSL

HSL est pratique. La teinte sous forme d’angle, la saturation et la luminosité en pourcentages : facile à raisonner, facile à ajuster à la main.

Le problème, c’est que son axe de luminosité ne correspond pas à la luminosité perçue. hsl(60 100% 50%) est un jaune vif. hsl(240 100% 50%) est un bleu profond. Les deux revendiquent 50 % de luminosité. Mettez-les côte à côte et le jaune est spectaculairement plus lumineux : la luminance relative mesurée est de 0.928 contre 0.072, soit un écart d’environ treize fois.

Ce n’est pas une erreur d’arrondi. C’est la conséquence du fait que HSL est une simple transformation mathématique du RVB, sans le moindre modèle de la vision humaine. Nos yeux sont bien plus sensibles aux longueurs d’onde vertes qu’aux bleues, et HSL l’ignore.

Les dégâts concrets :

• Une gamme construite sur des pas HSL réguliers paraît irrégulière, avec des nuances tassées par endroits et des sauts ailleurs
• Deux couleurs de même luminosité HSL ont des contrastes très différents sur le même fond
• Modifier la saturation déplace la luminosité apparente, comme effet secondaire

Ce qu’OKLCH fait différemment

OKLCH repose sur l’espace colorimétrique Oklab, conçu précisément pour que la distance numérique corresponde à la distance perçue.

Trois composantes :

• L : la luminosité, de 0 % à 100 %, perceptuellement uniforme
• C : la chroma, à peu près la saturation, qui part de 0 sans limite supérieure fixe
• H : la teinte, de 0 à 360 degrés

La propriété essentielle : des pas égaux en L paraissent égaux. oklch(50% 0.2 60) et oklch(50% 0.2 250) se lisent réellement comme une même luminosité, l’un jaune orangé, l’autre bleu.

Les trois composantes deviennent ainsi indépendantes, comme les designers le supposent déjà. Vous pouvez modifier la luminosité sans que la couleur semble changer de teinte, et modifier la teinte sans que la couleur semble s’éclaircir.

Pourquoi c’est important pour le contraste

Le contraste dépend presque entièrement de la luminosité. La teinte l’influence à peine, et la saturation quasiment pas.

En OKLCH, il n’y a donc qu’un seul bouton à tourner. Gardez H et C, faites varier L, et vous modifiez le contraste tout en gardant une couleur reconnaissable. En HSL, le même geste déplacerait la couleur apparente, car la luminosité HSL est mêlée à tout le reste.

C’est ce qui fait de « garder la couleur de la marque, corriger le contraste » un problème soluble plutôt qu’une négociation. Votre marque vit dans la teinte ; la mesure vit dans la luminosité ; OKLCH les garde séparées.

Construire une gamme de nuances

L’approche classique consiste à garder la teinte, à faire varier la luminosité par pas réguliers et à réduire la chroma aux deux extrémités, car les couleurs très claires et très foncées ne peuvent pas soutenir une forte saturation sans sortir de la plage affichable.

--blue-100: oklch(95% 0.03 255);
--blue-300: oklch(82% 0.09 255);
--blue-500: oklch(62% 0.16 255);
--blue-700: oklch(48% 0.14 255);
--blue-900: oklch(30% 0.08 255);

Une seule teinte, des pas de luminosité réguliers, une chroma qui culmine au milieu. Le résultat ressemble à une famille cohérente, exactement ce qu’une gamme HSL à pas réguliers ne parvient pas à produire.

Le piège du gamut

OKLCH peut décrire des couleurs que votre écran ne peut pas afficher. oklch(70% 0.4 150) est une coordonnée parfaitement valide, et très loin hors de sRGB.

Dans ce cas, le navigateur écrête, et l’écrêtage n’a rien d’élégant : il peut décaler sensiblement la teinte, si bien que la couleur obtenue n’est pas celle que vous avez indiquée. Tout outil qui fait des calculs en OKLCH doit réduire la chroma jusqu’à ce que la couleur rentre, plutôt que de la laisser écrêter. Si vous écrivez les valeurs à la main, gardez la chroma sous environ 0.24 pour rester sûr en sRGB, ou vérifiez dans un outil qui tient compte du gamut.

Prise en charge par les navigateurs

OKLCH est pris en charge par tous les grands navigateurs depuis 2023 et a le statut Baseline Widely available. Vous pouvez l’écrire directement en CSS, sans solution de repli, pour la plupart des publics :

color: oklch(62% 0.16 255);

Tailwind CSS v4 utilise OKLCH pour sa palette par défaut, ce qui en dit assez long sur la direction prise par l’écosystème.

Quand HSL suffit encore

Pour un petit ajustement ponctuel sur une seule couleur, HSL fait parfaitement l’affaire, et son modèle mental est familier.

Dès que vous générez un système (une gamme de nuances, un ensemble de tokens sémantiques, des variantes claire et sombre de la même couleur de marque), l’uniformité compte, et HSL vous mettra des bâtons dans les roues à chaque étape.

Notre contrast checker effectue sa recherche en OKLCH précisément pour cette raison : il peut garder votre teinte et votre chroma fixes et ne faire varier que la luminosité, et c’est ainsi qu’il trouve la couleur conforme la plus proche qui ressemble encore à la vôtre.