OKLCH vs LAB et LCH

OKLCH et LCH sont le même type d’espace colorimétrique, séparés par deux générations : LCH est la forme polaire de CIELAB (1976), OKLCH est la forme polaire d’OKLab (2020), et OKLab existe pour corriger les défauts les mieux documentés de CIELAB — avant tout le décalage de teinte du bleu, où assombrir un bleu saturé le long d’une teinte CIELAB constante le fait visiblement dériver vers le violet. Pour les palettes et les rampes d’écran, les variantes OK sont le choix par défaut le plus sûr ; LAB et LCH restent les bons outils là où les flux d’impression et le tolérancement des écarts de couleur en dépendent déjà.

Les deux familles sont livrées nativement dans CSS, donc c’est un choix concret dans chaque feuille de style, pas une leçon d’histoire. Cet article démêle les quatre noms, montre le défaut du bleu avec des valeurs réelles, et trace la frontière entre les territoires des deux familles — c’est le volet comparatif de notre guide OKLCH.

Quel est le lien entre LAB, LCH, OKLab et OKLCH ?

Quatre noms, deux espaces colorimétriques :

Les formes rectangulaires décrivent une couleur comme une luminosité plus deux axes opposés : a va du vert au rouge, b va du bleu au jaune. Les formes polaires lisent le même point comme une luminosité, un chroma (distance au gris) et une teinte (un angle). Convertir LAB en LCH, ou OKLab en OKLCH, ne change rien à la couleur — c’est une seule position exprimée dans deux styles de coordonnées.

La vraie comparaison est donc CIELAB contre OKLab. Rectangulaire contre polaire, c’est de l’ergonomie : les designers raisonnent en « même teinte, un peu moins colorée », c’est pourquoi ce sont les formes polaires que les outils de design exposent, et pourquoi cet article dira LCH et OKLCH à partir d’ici.

Où CIELAB se trompe-t-il avec le bleu ?

CIELAB a servi d’espace colorimétrique perceptuel standard pendant plus de quarante ans, et une grande partie tient toujours la route. Son défaut le mieux documenté se situe autour du bleu : les lignes de teinte constante du modèle y sont courbées. Gardez le numéro de teinte CIELAB fixe tout en changeant la luminosité, et les couleurs que vous traversez ne restent pas sur une même teinte perçue.

Voici l’opération qui le révèle. Partez du bleu #2563eb, qui se situe à oklch(0.546 0.215 262.9), et assombrissez-le en une rampe tout en maintenant la teinte OKLCH à ≈263 : la luminosité descend de 0,546 en passant par 0,45 et 0,35 vers 0,25, le chroma suit le gamut, et chaque palier se lit comme le même bleu, en plus sombre — l’extrémité profonde atterrit près du bleu marine (≈ oklch(0.27 0.19 264)), ce que l’œil attend d’une version foncée de ce bleu. Effectuez l’assombrissement équivalent en LCH, en gardant son angle de teinte constant, et le résultat classique apparaît : la moitié inférieure de la rampe prend une teinte violette visible. Ce que CIELAB appelle « la même teinte » dans cette région n’est pas ce que l’œil appelle la même teinte.

OKLab, publié par Björn Ottosson en 2020, a été ajusté sur des données d’apparence des couleurs plus récentes, spécifiquement pour réparer des distorsions comme celle-ci. Il prédit aussi plus fidèlement la luminosité des couleurs fortement saturées — utile quand des accents vifs et des tons sourds doivent sembler coordonnés en poids.

Le défaut du bleu a bâti sa réputation parce qu’assombrir à teinte constante n’est pas une opération exotique — c’est peut-être ce que le travail de design demande le plus souvent à un modèle de couleur. États survolés, états enfoncés, surfaces en mode sombre, texte sur fonds teintés : tous sont « la même couleur, ajustée ». Un modèle dont le numéro de teinte se courbe silencieusement sous cet ajustement transforme chaque rampe en une passe de correction manuelle.

Ouvrez une rampe de bleu maintenue à teinte OKLCH constante : dix paliers du presque-blanc au presque-noir, teinte épinglée à ≈263 tout le long de la descente. Ce sont les paliers profonds qu’il faut surveiller — c’est la région où une teinte CIELAB constante aurait viré au violet.

Pourquoi CSS propose-t-il les deux familles ?

Parce que chacune a son territoire. Le CSS Color Module Level 4 définit lab() et lch() aux côtés d’oklab() et oklch(), gardant les deux générations disponibles côte à côte plutôt que de désigner un gagnant.

La séparation suit les données que vous cherchez à faire correspondre. Si les valeurs que vous recevez proviennent d’un flux d’impression ou de mesure de couleur — la spécification d’un ton direct de marque, un rapport de tolérance ΔE — lab() et lch() les expriment sans traduction. Si vous générez des couleurs pour des écrans — palettes, rampes, dérivations de survol, planification du contraste — les formes OK vous donnent la version du « perceptuel » qui se comporte bien dans les régions que le travail sur écran sollicite le plus.

Quand LAB et LCH restent-ils le bon choix ?

Trois situations gardent CIELAB dans la boîte à outils :

• Production d’impression. La gestion des couleurs ICC utilise CIELAB comme espace de connexion de profil, les bibliothèques de tons directs publient des valeurs de référence LAB, et les flux d’épreuvage sont construits autour d’eux.
• Tolérancement des écarts de couleur. Les formules ΔE utilisées pour le contrôle qualité — dont ΔE2000 — sont définies sur CIELAB. Les instruments, les seuils et des décennies de tolérances accumulées le parlent.
• Jeux de données existants. Les valeurs LAB mesurées conservent leur sens ; convertir une archive en OKLab ajoute une étape et n’améliore rien qui importe à ces flux.

Aucune de ces situations n’est une faiblesse que l’on tolère. Le défaut du bleu compte quand vous générez des couleurs en vous déplaçant le long des axes du modèle — ce que les flux de mesure et d’épreuvage font rarement, et que la génération de palettes d’écran fait en permanence. Cette différence d’usage, plus que toute différence d’âge, est la véritable frontière entre les deux familles.

Comment distinguer la dérive du modèle d’un changement de teinte délibéré ?

Les deux ressemblent à « la teinte a bougé », donc il est utile de voir une fois la version délibérée. La dérive arrive sans invitation : vous avez changé la luminosité, et la teinte a bougé comme effet secondaire. Une rotation délibérée est appliquée à toute la palette d’un coup, exprès, sans toucher à la luminosité.

Scale Composer expose cela comme un contrôle de décalage de teinte sur chaque palette. Faites glisser le décalage de teinte sur la même rampe de bleu — toute l’échelle bascule vers le violet ou vers le sarcelle en un seul mouvement tandis que chaque palier conserve sa luminosité. Voilà à quoi ressemble un changement de teinte intentionnel ; une fois que vous en avez fait un, la version involontaire est facile à nommer quand vous la voyez.