OKLCH expliqué : la couleur perceptuelle pour les designers

OKLCH est une façon d’écrire une couleur en luminosité, chroma et teinte, où la luminosité est mesurée comme l’œil humain la perçoit. En CSS, oklch(60% 0.2 293) est un violet qui paraît à 60 % du chemin entre le noir et le blanc, avec une couleur forte, à un angle de teinte de 293 degrés. L’avantage concret pour les designers est simple : changez la teinte en gardant le même L, et la nouvelle couleur paraît tout aussi claire. HSL ne peut pas le garantir, et c’est pourquoi OKLCH est devenu la référence dans les design systems récents, y compris la palette de couleurs de Tailwind.

Luminosité, chroma et teinte

La luminosité est la vedette. Elle vient d’OKLab, un espace colorimétrique publié en 2020 et conçu pour prédire la clarté, l’intensité colorée et la teinte perçues de façon plus régulière que les modèles plus anciens. La chroma remplace la saturation : plutôt qu’un pourcentage d’un maximum, c’est une quantité absolue de couleur, si bien qu’une chroma de 0,1 signifie la même intensité visuelle quelle que soit la teinte. La teinte reste un angle, mais les angles sont répartis pour qu’un pas de 30 degrés paraisse un changement similaire tout autour du cercle.

OKLCH vs HSL : la même luminosité, côte à côte

Prenez six teintes et fixez la luminosité et la chroma à oklch(65% 0.11 H). Les échantillons ci-dessous semblent appartenir à une même famille, et leur contraste face au blanc reste entre 3,1:1 et 3,4:1. Faites de même en HSL à 50 % de luminosité, et le contraste face au blanc varie d’environ 1,07:1 pour le jaune à 8,6:1 pour le bleu.

C’est cette régularité qui rend OKLCH utile au quotidien. Une série de couleurs d’état, de séries de graphique ou d’étiquettes de catégorie peut partager un même L et un même C et ne différer que par la teinte, sans qu’aucune ne crie plus fort que les autres. S’il vous faut ensuite une série adaptée au daltonisme, faites aussi varier L, comme l’expliquent les palettes adaptées au daltonisme.

Comment écrire OKLCH en CSS

:root {
  /* lightness as a percentage or a number */
  --violet: oklch(60% 0.2 293);
  --violet-same: oklch(0.6 0.2 293);

  /* with transparency */
  --violet-soft: oklch(60% 0.2 293 / 0.4);

  /* grey: chroma 0, hue ignored */
  --grey: oklch(60% 0 0);
}

/* a fallback for very old browsers comes first */
.button {
  background: #8860ea;
  background: oklch(60% 0.2 293);
}

La prise en charge des navigateurs est large, et vous pouvez en vérifier le détail sur caniuse. Pour explorer les valeurs visuellement, oklch.com est un sélecteur qui montre quelles combinaisons un écran ordinaire peut afficher. Pour convertir un hex de marque existant, collez-le dans ce sélecteur ou dans le panneau couleur des outils de développement de votre navigateur, qui peut afficher n’importe quelle couleur en OKLCH.

Construire une gamme avec OKLCH

Pour créer une gamme de teintes claires et foncées, faites progresser la luminosité régulièrement et laissez la chroma monter vers le milieu et redescendre vers les extrémités. Les couleurs très claires et très sombres ne peuvent physiquement pas contenir beaucoup de couleur : si vous gardez une chroma élevée aux extrêmes, le navigateur doit les rogner. Voici une gamme violette construite ainsi.

Comme L suit la clarté perçue, vous pouvez prendre des décisions de contraste approximatives à partir des seuls chiffres. Dans cette gamme, un texte blanc dépasse 4,5:1 à partir de L 50 et en dessous, et un texte noir à partir de L 60 et au-dessus. Confirmez toujours avec un vérificateur de contraste, mais vous serez rarement surpris. Transformer une gamme comme celle-ci en tokens nommés est expliqué dans les design tokens.

Le gamut : quand une couleur n’existe pas à l’écran

OKLCH peut décrire des couleurs qu’aucun écran ne peut afficher. La plupart des moniteurs affichent le sRGB ; beaucoup de téléphones et d’ordinateurs récents affichent le Display P3, plus large. Poussez la chroma assez haut et vous sortez des deux. Le navigateur ramène alors la couleur à la plus proche que l’écran peut afficher : rien ne casse, mais vous n’obtiendrez peut-être pas ce que vous avez tapé.

Les dégradés OKLCH

C’est dans les dégradés que la couleur perceptuelle se voit le plus. Un dégradé CSS ordinaire fond les couleurs en sRGB, ce qui tire vers le gris entre des teintes éloignées. Le CSS moderne permet de choisir l’espace de fondu, et OKLab ou OKLCH gardent un milieu lumineux et net.

OKLab fond en ligne droite et convient à la plupart des dégradés à deux couleurs. OKLCH fait tourner la teinte, ce qui est superbe pour les couchers de soleil et les arcs-en-ciel mais peut surprendre. La technique complète, y compris les mots-clés shorter hue et longer hue, se trouve dans les dégradés CSS en OKLCH, et la théorie dans l’interpolation des dégradés.

Les Marks de Gradiently sont rendus en direct plutôt qu’écrits en CSS, et chacun porte sa propre palette : l’Encre automatique choisit un texte clair ou foncé dans cette palette pour chaque ligne, pour que les mots se lisent sans que vous ayez à vérifier des chiffres. Si vous préférez partir d’un fond vivant terminé plutôt que d’une valeur dans un sélecteur, parcourez le Marché avec des mots de couleur.