Prenez deux couleurs que HSL jure d'égale clarté : hsl(60 100% 50%) et hsl(240 100% 50%). Même luminosité de 50 %. Pourtant la première est un jaune aveuglant et la seconde un bleu sombre et lourd. HSL a menti. C'est exactement ce problème qu'OKLCH est venu résoudre.

OKLCH est une nouvelle façon d'écrire les couleurs en CSS — oklch(L C H) — et tous les grands navigateurs le prennent désormais en charge. Ce guide explique ce que veulent dire ses trois nombres, pourquoi il bat HSL et HEX pour construire de vraies palettes, et comment commencer à l'utiliser sans casser les anciens navigateurs.

Les trois nombres : L, C, H

Une couleur OKLCH ressemble à ceci : oklch(70% 0.15 250).

  • L — Luminosité (0% à 100%). À quel point la couleur paraît claire à l'œil humain. 0% est noir, 100% est blanc.
  • C — Chroma (0 à environ 0.37). À quel point elle est vive ou saturée. 0 est gris ; plus c'est haut, plus c'est coloré.
  • H — Teinte (0 à 360). L'angle sur la roue chromatique — en gros 30 rouge, 140 vert, 250 bleu.

Vous pouvez ajouter de la transparence comme pour les autres couleurs CSS : oklch(70% 0.15 250 / 0.5) pour 50 % d'opacité.

Pourquoi OKLCH bat HSL

HSL et OKLCH reposent tous deux sur l'idée luminosité-chroma-teinte, alors pourquoi changer ? Parce que la « luminosité » de HSL est une astuce mathématique, pas ce que voient vos yeux. Celle d'OKLCH s'appuie sur un modèle de la vision humaine, donc ses nombres collent à la perception.

Le bénéfice concret apparaît dès que vous construisez une palette :

  • Une luminosité constante d'une teinte à l'autre. En OKLCH, toute couleur à L 70% paraît aussi claire, qu'elle soit jaune, bleue ou rose. En HSL, le jaune à 50% éclate quand le bleu à 50% s'enfonce. Voilà pourquoi les palettes HSL réclament toujours des retouches manuelles.
  • Des nuances prévisibles. Vous voulez qu'un bouton et son état survolé diffèrent d'un pas fixe et régulier ? Baissez la luminosité de la même valeur en OKLCH et le changement paraît uniforme. Faites-le en HSL et certaines couleurs bougent à peine tandis que d'autres font un bond.
  • Faire tourner la teinte garde la même impression. Changez seulement la teinte en OKLCH et vous obtenez une couleur sœur, de même clarté et de même vivacité — parfait pour des accents de thème.

Pour qui génère la gamme de couleurs d'un design system, cette cohérence, c'est tout ce qui compte.

Il affiche des couleurs qu'HEX ne peut pas

HEX et RGB sont bloqués sur le gamut sRGB — l'ensemble limité de couleurs qu'un vieux moniteur pouvait afficher. Les écrans modernes de téléphones et d'ordinateurs portables affichent une plage plus large (appelée P3), avec des verts, des rouges et des cyans nettement plus riches.

OKLCH peut désigner ces couleurs plus larges directement ; #rrggbb ne sait tout simplement pas les décrire. OKLCH n'est donc pas seulement plus logique : il atteint une plus grande part de ce que votre écran sait réellement afficher.

Peut-on l'utiliser sans risque aujourd'hui ?

Oui. oklch() fonctionne dans les versions actuelles de Chrome, Edge, Safari et Firefox, et ce depuis quelques années. Pour la petite part de visiteurs sur d'anciens navigateurs, donnez d'abord un repli simple :

.button {
  background: #3b82f6;                 /* older browsers use this */
  background: oklch(62% 0.19 255);     /* modern browsers use this */
}

Le navigateur lit de haut en bas et retient la dernière couleur qu'il comprend. Les anciens navigateurs s'arrêtent au HEX ; les récents appliquent l'OKLCH.

Comment convertir vos couleurs existantes

Vous n'avez rien à calculer à la main. Collez une valeur HEX, RGB ou HSL dans le convertisseur de couleurs gratuit et il vous donne l'équivalent OKLCH instantanément — plus l'inverse, pour repasser d'une valeur oklch() à un repli HEX destiné à l'astuce CSS ci-dessus. Tout se passe dans votre navigateur, rien n'est envoyé.

Si vous n'avez besoin que d'un seul sens, il existe aussi un convertisseur HEX vers OKLCH dédié.

À retenir

  • OKLCH = oklch(Luminosité Chroma Teinte) — une luminosité fiable, la vivacité et un angle de teinte.
  • Il corrige le plus gros défaut de HSL : des nombres de luminosité égaux paraissent vraiment aussi clairs, donc les palettes restent cohérentes sans bricolage manuel.
  • Il atteint des couleurs plus larges (P3) qu'HEX et RGB ne savent pas décrire.
  • Utilisez-le dès aujourd'hui avec une ligne de repli HEX avant la ligne oklch().
  • Convertissez n'importe quelle couleur vers et depuis OKLCH avec un convertisseur de couleurs plutôt que de faire les calculs vous-même.