Qu’est-ce qu’OKLCH ? Une explication pour les designers

OKLCH est une façon de décrire la couleur avec trois valeurs qui correspondent à la manière dont les humains la perçoivent réellement : la luminosité (à quel point elle paraît claire), le chroma (à quel point elle est colorée) et la teinte (quelle couleur c’est, exprimée comme un angle). Sa propriété déterminante est l’uniformité perceptuelle : deux couleurs ayant la même valeur L paraissent véritablement aussi claires l’une que l’autre — ce que des modèles plus anciens comme HSL font faux. C’est cette propriété qui explique pourquoi CSS a ajouté une prise en charge native, et pourquoi des outils comme Tailwind v4 ont migré leurs palettes vers lui.

Cet article est la version en langage simple ; la série complète sur le modèle de couleur se trouve dans notre guide OKLCH.

Que signifient les trois lettres ?

L — Luminosité (0–100 %). À quel point la couleur paraît claire, calibrée par rapport à la vision humaine plutôt qu’à des calculs sur les valeurs RGB.
C — Chroma (0 à ~0,37). À quel point elle est colorée, du gris (0) vers le haut. Contrairement au pourcentage de saturation de HSL, le chroma est une quantité absolue — un chroma de 0,15 signifie la même quantité de coloration quelle que soit la teinte. Cette distinction a des conséquences pratiques pour le travail sur les palettes.
H — Teinte (0–360°). L’angle sur la roue chromatique : ~30 est rouge-orangé, ~145 vert, ~260 bleu.

Le « OK » n’est pas une formule rassurante — il nomme l’espace colorimétrique OKLab, introduit par Björn Ottosson dans A perceptual color space for image processing (2020), qui a corrigé des distorsions connues dans les modèles perceptuels plus anciens, en particulier autour des bleus.

Pourquoi HSL ment-il sur la luminosité ?

Essayez ceci dans n’importe quel sélecteur de couleur : hsl(60, 100%, 50%) est un jaune éclatant, presque blanc. hsl(240, 100%, 50%) est un bleu profond et sombre. Même « 50 % de luminosité » — une clarté réelle radicalement différente. La luminosité de HSL est une fraction géométrique des valeurs RGB, et non une affirmation sur la perception, et le jaune transporte tout simplement bien plus de lumière perçue que le bleu à intensité RGB égale.

Ce n’est pas un bug cosmétique. Il casse les deux tâches pour lesquelles les designers ont le plus besoin d’un modèle de couleur :

Les rampes. Générez une palette de 10 étapes en faisant descendre la luminosité HSL de 95 % à 20 % et les étapes se tassent, dérivent en teinte apparente et deviennent boueuses au milieu — les palettes construites ainsi nécessitaient généralement une passe de correction manuelle.
Le contraste. Le contraste du texte est fonction de la différence de luminosité perçue. Si le L de votre modèle ne suit pas la perception, vous ne pouvez pas prédire quelles étapes de votre palette passeront les critères d’accessibilité — vous ne pouvez que tester et rapiécer.

Dans OKLCH, L est la luminosité perçue, et c’est ce qui rend ces deux tâches prévisibles.

Qu’est-ce que l’uniformité perceptuelle vous apporte concrètement ?

Une fois que la luminosité signifie ce qu’elle dit, des choses qui exigeaient auparavant un réglage manuel deviennent calculables :

Des rampes de couleur régulières. Placez vos étapes sur une courbe de luminosité et elles paraissent régulièrement espacées — pour chaque teinte, sans passe de correction par teinte.
Un contraste prévisible. Gardez le texte et l’arrière-plan à une distance L connue et les exigences de contraste deviennent une propriété de l’échelle, et non un test par paire.
Des neutres honnêtes. Les gris peuvent porter un murmure intentionnel de chroma vers la teinte de la marque au lieu d’une teinte RGB accidentelle.
Un mode sombre par dérivation. Une palette sombre peut être calculée à partir de la claire — nouvelle courbe de luminosité, chroma rehaussé — plutôt que re-choisie à la main.

Voyez le premier point en direct : ouvrez une rampe OKLCH de 10 étapes dans Scale Composer — une seule couleur de départ bleue, des étapes placées sur une courbe de luminosité. Chaque saut visuel entre voisins a la même taille, ce que la génération basée sur HSL peine à offrir.

Une rampe de couleur bleue de 10 étapes générée en OKLCH, montrant des étapes de luminosité perceptuellement régulières du presque-blanc au presque-noir

Comment écrit-on OKLCH en CSS ?

C’est du CSS natif depuis 2023 — pris en charge dans tous les principaux navigateurs, sans plugin ni étape de build :

.button {
  background: oklch(0.55 0.15 260);        /* L C H */
  color: oklch(0.98 0.01 260);
  border-color: oklch(0.55 0.15 260 / 40%); /* alpha optionnel */
}

Il existe aussi une forme de couleur relative — oklch(from …) — qui dérive une couleur d’une autre, utile pour les états de survol et les teintes.

Où est le piège ? Le chroma et le gamut

Parce que le chroma est absolu, toutes les combinaisons L/C/H ne correspondent pas à une couleur que votre écran peut produire. Les couleurs très claires et très sombres ne peuvent contenir qu’un peu de chroma ; dépassez la limite et la couleur est écrêtée (« gamut clipping »), ce qui aplatit les rampes précisément là où elles devraient rayonner. La solution habituelle est de plafonner le chroma légèrement en dessous du plafond physique à chaque niveau de luminosité — une marge de sécurité plutôt qu’un écrêtage.

Les écrans à gamut étendu relèvent ce plafond : les écrans Display-P3 (la plupart des téléphones et Mac actuels) peuvent afficher nettement plus de chroma dans les tons moyens que ne le permet sRGB.

Dois-je un jour écrire des valeurs OKLCH à la main ?

Rarement — et c’est tout l’intérêt. Le vrai rôle d’OKLCH est d’être le moteur sous votre palette : vous choisissez une seule couleur de départ, et les courbes de luminosité ainsi que les profils de chroma génèrent l’échelle. Vous rencontrerez des valeurs oklch() brutes surtout dans des design tokens générés, dans la palette par défaut de Tailwind v4, et lorsque vous cherchez à comprendre pourquoi une couleur semble bizarre.

Une façon rapide de développer une intuition du modèle : basculez la même rampe bleue entre sRGB et P3 et observez les étapes intermédiaires gagner du chroma à mesure que le plafond du gamut se relève — L et H restent immobiles tandis que seul « à quel point c’est coloré » bouge. Une fois que vous avez vu les trois axes bouger indépendamment, le hex commence à ressembler à ce qu’il est : un format de sortie, et non une façon de penser la couleur.