La syntaxe CSS oklch() expliquée

La fonction CSS oklch() spécifie une couleur à partir de trois valeurs séparées par des espaces — luminosité, chroma, teinte — avec un alpha optionnel après une barre oblique : oklch(0.55 0.15 260) ou oklch(0.55 0.15 260 / 40%). Elle fait partie de CSS nativement depuis 2023 et fonctionne dans tous les principaux navigateurs sans étape de build. Voici une référence pratique pour la syntaxe ; ce que les valeurs signifient sur le plan perceptuel est traité dans notre guide OKLCH.

Quelles sont les trois valeurs et leurs plages ?

color: oklch(L C H);
color: oklch(L C H / alpha);

• L — luminosité. Un pourcentage (0%–100%) ou un nombre (0–1) ; 62% et 0.62 correspondent à la même luminosité. 0 est le noir, 1 le blanc.
• C — chroma. Un nombre positif ou nul. En principe illimité, en pratique borné par ce que les écrans peuvent afficher : les couleurs sRGB plafonnent autour de 0.37, et les couleurs d’interface courantes se situent surtout entre 0 (gris) et 0.25. Il n’existe pas de « 100 % de chroma » qui ait un sens — le maximum dépend de la luminosité et de la teinte.
• H — teinte. Un angle en degrés (0–360, unité optionnelle) : environ 30 pour le rouge-orangé, 145 pour le vert, 260 pour le bleu. Le gris n’a pas de teinte qui ait un sens — écrivez n’importe quel nombre, ou none.
• alpha. Après une / : un pourcentage ou un nombre 0–1, comme partout ailleurs en CSS.

La grammaire formelle se trouve dans la référence MDN pour oklch() ; le résumé ci-dessus couvre ce dont le style au quotidien a besoin.

À quoi ressemble un vrai composant en oklch() ?

Un bouton, écrit entièrement dans cette syntaxe :

.button {
  background: oklch(0.55 0.15 260);          /* bleu de luminosité moyenne  */
  color: oklch(0.98 0.01 260);               /* presque blanc, soupçon de teinte */
  border: 1px solid oklch(0.55 0.15 260 / 40%);  /* même bleu à 40 % d'alpha */
}

Deux détails font un travail discret ici. La couleur du texte porte 0.01 de chroma dans la teinte même du bouton — un presque-blanc qui appartient au bleu plutôt qu’un #fff stérile. Et la bordure réutilise la couleur de fond avec un alpha plutôt qu’un bleu plus clair choisi séparément, si bien qu’elle reste synchronisée si le fond change.

Comment dériver une couleur à partir d’une autre ?

La forme des couleurs relatives décompose une couleur existante en canaux l, c, h que vous pouvez modifier :

:root {
  --brand: oklch(0.55 0.15 260);
}
.button:hover {
  background: oklch(from var(--brand) calc(l - 0.07) c h);  /* plus sombre */
}
.badge {
  background: oklch(from var(--brand) 0.95 calc(c / 3) h);  /* teinte pâle */
}

C’est là qu’un modèle perceptuel est payant en CSS pur : « le survol est 0,07 plus sombre » se comporte de la même façon que la couleur de marque soit bleue, verte ou orange, parce que des pas de L égaux paraissent égaux. La même recette en hex demande une valeur choisie à la main pour chaque teinte.

À quoi ressemblent des valeurs OKLCH générées sur une vraie rampe ?

Lire des valeurs brutes en regard de vraies couleurs construit l’intuition le plus vite. Ouvrez une rampe où le L/C/H de chaque pas est visible dans Scale Composer — la luminosité descend pas à pas le long d’une courbe, le chroma enfle dans les tons moyens et s’atténue aux extrémités, la teinte reste immobile. Trois colonnes de nombres, trois rôles indépendants.

Et les navigateurs qui ne prennent pas en charge oklch() ?

La prise en charge est universelle dans les principaux navigateurs depuis 2023, donc les solutions de repli relèvent d’une question de trafic hérité plutôt que d’une exigence par défaut. Quand vous en avez besoin, la cascade CSS fait le travail — déclarez d’abord la solution de repli :

.button {
  background: #4263c7;                /* utilisé là où oklch() est inconnu */
  background: oklch(0.55 0.15 260);   /* gagne partout ailleurs           */
}

Ou conditionnez des blocs plus larges avec @supports (color: oklch(0 0 0)). Les pipelines de tokens contournent souvent la question en exportant du hex à côté de l’OKLCH, ce qui permet aux consommateurs CSS hérités de fonctionner à partir de la même palette.

Où la syntaxe va-t-elle au-delà du hex ?

Le hex s’arrête à sRGB ; le modèle OKLCH, non. Basculez la même rampe en mode Display-P3 et les pas portent des chaînes color(display-p3 …) à côté de leur hex borné au sRGB — les tons moyens gagnent un chroma que la colonne hex ne peut littéralement pas exprimer. Copiez une paire de valeurs pour le même pas et comparez-les dans votre propre feuille de style : cet écart entre les deux chaînes est la partie du gamut de votre écran que le CSS de l’ère hex n’a jamais atteinte.