# OKLCH expliqué : la couleur perceptuelle pour les designers

[Canonical HTML page](https://gradiently.design/fr/guide/oklch-explained)

HSL promettait une couleur lisible et y est presque parvenu. OKLCH garde la partie lisible et corrige le mensonge sur la luminosité, et c’est pourquoi les design systems l’adoptent.

## The short version

- OKLCH décrit une couleur avec trois valeurs : la luminosité perceptuelle (L), la chroma ou intensité colorée (C) et l’angle de teinte (H).
- Contrairement à HSL, la luminosité OKLCH correspond à la clarté que les gens perçoivent : deux couleurs de même L ont un contraste similaire face au blanc.
- En CSS, elle s’écrit `oklch(60% 0.2 293)`, avec une transparence facultative après une barre oblique, et tous les grands navigateurs actuels la prennent en charge.
- La chroma n’a pas de maximum fixe : la quantité de couleur possible dépend de la luminosité, de la teinte et de l’écran, et les couleurs hors de la gamme de l’écran y sont ramenées.
- Interpoler des dégradés en OKLCH ou en OKLab évite le milieu gris et terne que produisent les fondus sRGB entre des teintes éloignées.

**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

| Lettre | Nom | Plage | Ce qu’elle contrôle |
| --- | --- | --- | --- |
| L | Luminosité | 0 % à 100 % (ou 0 à 1) | La clarté perçue de la couleur, telle que l’œil la juge |
| C | Chroma | 0 et plus, rarement au-delà de 0,37 | La quantité de couleur : 0 est gris, plus haut est plus vif |
| H | Teinte | 0 à 360 degrés | Quelle couleur : environ 30 rouge, 110 jaune, 140 vert, 265 bleu |
| / A | Alpha | 0 à 1, ou 0 % à 100 % | L’opacité, facultative |

Les angles de teinte d’OKLCH ne correspondent pas à ceux de HSL. Le bleu pur se situe ici vers 264, et non à 240.

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](https://gradiently.design/fr/guide/hsl-colors) à 50 % de luminosité, et le contraste face au blanc varie d’environ 1,07:1 pour le jaune à 8,6:1 pour le bleu.

- H 30 #c97466: #c97466
- H 90 #a98c35: #a98c35
- H 150 #5aa26b: #5aa26b
- H 210 #11a1b4: #11a1b4
- H 270 #758bd3: #758bd3
- H 330 #b576af: #b576af

`oklch(65% 0.11 H)` sur six teintes. Luminosité égale, chroma égale, et cela se voit vraiment.

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](https://gradiently.design/fr/guide/color-blindness-design).

## Comment écrire OKLCH en CSS

```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);
}
```

`oklch(60% 0.2 293)` est proche de #8860ea en sRGB. Les versions actuelles de Chrome, Edge, Firefox et Safari prennent toutes en charge oklch().

La prise en charge des navigateurs est large, et vous pouvez en vérifier le détail sur [caniuse](https://caniuse.com/mdn-css_types_color_oklch). Pour explorer les valeurs visuellement, [oklch.com](https://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.

- L 97 C .015: #f5f3ff
- L 90 C .05: #dfd9fd
- L 80 C .10: #c0b2f9
- L 70 C .17: #a486fd
- L 60 C .22: #8a5af4
- L 50 C .22: #6e37d2
- L 40 C .18: #50249d
- L 30 C .12: #331b63
- L 20 C .07: #180d32

Teinte 293 partout. Chaque palier est un saut visuel similaire, ce que les gammes HSL réussissent rarement.

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](https://gradiently.design/fr/guide/color-contrast-accessibility), mais vous serez rarement surpris. Transformer une gamme comme celle-ci en tokens nommés est expliqué dans [les design tokens](https://gradiently.design/fr/guide/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é.

### À éviter

- Une chroma élevée à des L très clairs ou très sombres
- Recopier des valeurs P3 dans une charte de marque destinée à l’impression
- Supposer qu’une couleur OKLCH vive est identique sur tous les écrans
- Utiliser une chroma au-delà d’environ 0,2 pour de grandes surfaces de fond

### À faire

- Vérifier les valeurs dans un sélecteur qui marque la limite sRGB
- Garder un hex de repli pour les couleurs de marque
- Baisser la chroma vers les extrémités d’une gamme
- Réserver les couleurs les plus vives à de petits accents

## 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.

- Fondu en sRGB : milieu gris: `linear-gradient(90deg in srgb, #2563eb, #facc15)`
- Fondu en OKLab : net: `linear-gradient(90deg in oklab, #2563eb, #facc15)`
- Fondu en OKLCH : par le vert: `linear-gradient(90deg in oklch, #2563eb, #facc15)`

Les deux mêmes couleurs, de trois façons. OKLCH fait le tour du cercle des teintes et peut donc passer par des teintes qu’aucune extrémité ne contient.

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](https://gradiently.design/fr/guide/css-gradient-oklch), et la théorie dans [l’interpolation des dégradés](https://gradiently.design/fr/guide/gradient-interpolation).

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.

## FAQ

### Qu’est-ce qu’OKLCH ?

OKLCH est un format de couleur fondé sur l’espace colorimétrique OKLab. Il décrit les couleurs par leur luminosité perceptuelle, leur chroma et leur teinte, si bien que des valeurs égales paraissent aussi claires et aussi vives.

### OKLCH est-il meilleur que HSL ?

Pour construire des palettes, des gammes et des dégradés, oui, car sa luminosité correspond à ce que voit l’œil. HSL reste pratique pour des retouches rapides à la main.

### Peut-on utiliser oklch() en CSS aujourd’hui ?

Oui. Les versions actuelles de Chrome, Edge, Firefox et Safari le prennent en charge. Placez un hex de repli en premier si vous devez gérer de très vieux navigateurs.

### Quelle est la chroma maximale en OKLCH ?

Il n’y a pas de maximum fixe. La chroma possible dépend de la luminosité, de la teinte et de l’écran ; en sRGB, la plupart des teintes plafonnent bien en dessous de 0,37.

### Comment convertir un hex en OKLCH ?

Collez le hex dans un sélecteur OKLCH comme oklch.com, ou dans le panneau couleur des outils de développement de votre navigateur, qui peut afficher la même couleur en OKLCH.