OKLCH expliqué : le format de couleur enfin fidèle à votre œil

Qu’est-ce qu’OKLCH

OKLCH est la forme polaire d’Oklab, un espace colorimétrique perceptuel publié par Björn Ottosson en 2020. Il comporte trois valeurs. L est la luminosité perçue, de 0 (noir) à 1 ou 100 % (blanc). C est la chroma, la quantité de couleur, de 0 (gris) à environ 0,37 pour les couleurs les plus vives qu’un écran puisse afficher. H est l’angle de teinte, de 0 à 360 degrés.

Voici la même couleur écrite dans différents formats. Chaque valeur ci-dessous est calculée en direct par PickShade : vous pouvez la copier telle quelle.

Pourquoi OKLCH est meilleur que HSL

En HSL, la luminosité est une formule, pas une perception. hsl(60 100% 50%) est un jaune éclatant et hsl(240 100% 50%) un bleu foncé, pourtant les deux affichent 50 % de luminosité. Construisez une palette en HSL et chaque teinte demandera une correction manuelle.

En OKLCH, les couleurs de même L paraissent aussi claires les unes que les autres. Gardez L et C et faites tourner H pour obtenir un jeu de teintes équilibré, ou gardez H et C et faites varier L par paliers pour une échelle de nuances propre. C’est pour cela que Tailwind CSS v4 définit toute sa palette par défaut en OKLCH.

La luminosité prédit aussi le contraste. Un texte dont le L diffère d’environ 0,4 ou plus de celui de son fond est généralement lisible, ce qui rend les choix de couleurs accessibles bien plus simples à évaluer.

Syntaxe en CSS

La luminosité s’écrit en pourcentage ou en nombre de 0 à 1. La chroma est un nombre. La teinte est un angle en degrés. La transparence se place après une barre oblique.

color: oklch(62.8% 0.258 29.23);
background: oklch(0.7 0.15 250 / 50%);
border-color: oklch(from var(--brand) calc(l - 0.1) c h);

Compatibilité navigateurs

oklch() fonctionne dans tous les navigateurs actuels : Safari depuis la version 15.4, Chrome et Edge depuis la 111, Firefox depuis la 113. Cela couvre bien plus de 90 % des utilisateurs. Pour les très vieux navigateurs, placez une valeur HEX de secours sur la ligne qui précède la valeur OKLCH.

color: #ff5733;
color: oklch(68% 0.21 33.7);

Limites de chroma et gamut

OKLCH peut décrire des couleurs qu’aucun écran ne sait afficher. La chroma maximale dépend de la luminosité et de la teinte : un jaune vif n’est possible qu’avec une luminosité élevée, un bleu vif qu’avec une luminosité faible. Quand une valeur sort du gamut sRGB ou Display P3, le navigateur la ramène à l’intérieur, ce qui peut décaler la couleur.

PickShade signale les couleurs hors sRGB et vous donne la couleur la plus proche qui rentre dans le gamut, trouvée en réduisant la chroma tout en conservant la luminosité et la teinte, la méthode recommandée par CSS Color 4.

Comment convertir HEX en OKLCH

La conversion passe de HEX à sRGB, de sRGB à la lumière linéaire, du sRGB linéaire à l’espace des cônes LMS, puis applique une racine cubique, une matrice vers Oklab et enfin le passage d’Oklab en coordonnées polaires. À la main, les erreurs sont faciles : collez plutôt une couleur dans le convertisseur et copiez le résultat.

Questions et réponses