Espaces colorimétriques perceptuels : Lab, LCH, Oklab, OKLCH

Quand vous concevez un jeu d'échantillons de couleur à intervalles perceptuels égaux — des nuances qui paraissent régulièrement espacées à l'œil humain — vous découvrez rapidement que HSL et RGB sont les mauvais outils. Incrémenter la luminosité HSL de 10 points produit des sauts visuels radicalement différents selon la teinte. Le bleu s'assombrit beaucoup plus vite que le jaune. Le vert et le jaune sont concentrés à l'extrémité lumineuse, le bleu et le violet à l'extrémité sombre, et pourtant ils partagent des valeurs de luminosité identiques.

La solution est un espace colorimétrique perceptuellement uniforme : un espace où des différences numériques égales dans n'importe quelle direction correspondent à des différences perçues égales dans la couleur. Ce tutoriel retrace l'évolution des espaces colorimétriques perceptuellement uniformes — du CIE Lab en 1976 à OKLCH en 2020 — en expliquant comment chacun fonctionne et ce qui les distingue.

Pourquoi l'uniformité perceptuelle est importante

La vision des couleurs humaine est un système biologique construit pour la survie, pas pour la mesure linéaire. Les trois types de cellules coniques dans nos rétines répondent à des plages chevauchantes de longueurs d'onde lumineuses, avec une sensibilité maximale dans la région vert-jaune. Nous sommes bien plus sensibles aux variations de lumière verte qu'à celles de lumière bleue. Nous percevons également la luminosité de façon non linéaire : une augmentation de 10 % de la puissance lumineuse physique paraît comme un changement perceptuel bien plus petit qu'une augmentation de 10 % à partir d'une quasi-obscurité.

Ces faits biologiques signifient que les coordonnées numériques d'une couleur — ses valeurs R, V, B, ou ses valeurs T, S, L — sont un très mauvais guide de son aspect visuel. Deux couleurs à la même distance numérique en sRGB ou HSL peuvent paraître à peine distinguables ou radicalement différentes, selon leur position dans l'espace colorimétrique.

Un espace colorimétrique perceptuellement uniforme tente de corriger cela. Sa structure mathématique est calibrée par rapport aux données de perception humaine, recueillies lors d'expériences où des observateurs comparent des couleurs et rapportent quelles paires paraissent « également différentes ». L'objectif : un déplacement de 10 unités dans n'importe quelle direction dans l'espace colorimétrique devrait paraître comme un changement de même taille quel que soit le point de départ.

Applications pratiques qui bénéficient de l'uniformité perceptuelle :

• Génération de nuances : construction d'une gamme tonale en 10 étapes paraissant régulièrement espacée
• Interpolation de couleur : dégradés qui transitent fluidement sans creux de luminance
• Évaluation du contraste : savoir si deux couleurs sont « suffisamment éloignées » perceptuellement
• Sélection de couleur : déplacer des curseurs aux effets visuels prévisibles
• Visualisation de données : associer des données numériques à des couleurs sans créer de variations de luminosité trompeuses

CIE Lab (1976)

Le CIE Lab (aussi écrit L*a*b* ou CIELAB) a été normalisé par la Commission internationale de l'éclairage en 1976. Il reste le standard international pour la mesure des couleurs dans les industries de la fabrication, de l'impression et du textile.

Structure

Lab utilise trois axes :

• L* — Luminosité, de 0 (noir) à 100 (blanc)
• a* — Axe vert-rouge. Les valeurs négatives sont vertes, les positives sont rouges/magenta.
• b* — Axe bleu-jaune. Les valeurs négatives sont bleues, les positives sont jaunes.

Les axes a* et b* sont des axes de couleurs opposées, reflétant la façon dont les neurones du système visuel encodent les informations de couleur comme des signaux rouge-contre-vert et bleu-contre-jaune.

De XYZ vers Lab

La conversion vers Lab nécessite de passer par le CIE XYZ, un espace colorimétrique linéaire dérivé des fonctions d'adaptation colorimétrique d'un « observateur standard » :

L* = 116 × f(Y/Yn) − 16
a* = 500 × [f(X/Xn) − f(Y/Yn)]
b* = 200 × [f(Y/Yn) − f(Z/Zn)]

Où Xn, Yn, Zn sont les valeurs XYZ d'un blanc de référence (généralement D65, l'illuminant de lumière du jour standard), et f est une fonction basée sur la racine cubique qui encode la nature compressive de la perception humaine de la luminosité.

Le Convertisseur de couleurs convertit n'importe quelle valeur HEX ou RGB en coordonnées Lab aux côtés d'autres formats.

Points forts et limites de Lab

Lab fait bien mieux que sRGB ou HSL pour prédire quand deux couleurs paraîtront également différentes. Son axe de luminosité L* est approximativement perceptuellement uniforme — un déplacement de L*=30 à L*=40 paraît approximativement de la même taille qu'un déplacement de L*=60 à L*=70, pour la plupart des observateurs dans des conditions de visualisation standard.

Cependant, le CIE Lab présente une faille connue : son interaction chroma-luminosité. Les couleurs vives et très saturées (en particulier les bleus et les verts) paraissent légèrement inégales dans l'espace Lab. Certains « cercles » perceptuels dans l'espace Lab ressemblent davantage à des ellipses ou des formes irrégulières pour les observateurs humains réels. Le système Munsell, basé sur des données empiriques étendues, ne se projette pas proprement sur Lab.

Lab est également défini en termes de coordonnées rectangulaires, ce qui le rend moins intuitif pour les designers qui pensent en termes de teinte et de saturation.

Syntaxe CSS

/* CIE Lab en CSS */
color: lab(55% -20 40);
/* L*=55 (ton moyen), a*=-20 (légèrement vert), b*=40 (jaune) */

color: lab(75% 0 0);
/* Gris neutre à L*=75 */

LCH : Lab cylindrique

LCH est une transformation cylindrique du CIE Lab — le même espace colorimétrique exprimé en coordonnées polaires. Au lieu de la grille rectangulaire a*/b*, LCH utilise :

• L — Luminosité (identique à Lab L*)
• C — Chroma (la distance depuis l'axe de gris neutre : C = √(a² + b²))
• H — Angle de teinte en degrés (H = atan2(b, a), plage 0–360)

Pourquoi LCH est plus intuitif que Lab

Le chroma est analogue à la « saturation » mais plus significatif : il mesure la colorimétricité d'une couleur par rapport à un gris neutre de luminosité égale. La teinte est l'angle familier sur la roue chromatique. Cela rend LCH bien plus accessible aux designers que les coordonnées abstraites a*/b* de Lab.

Surtout, LCH conserve les propriétés d'uniformité perceptuelle de Lab. Des incréments de C égaux paraissent comme des augmentations égales de colorimétricité. Des incréments de L égaux paraissent comme des pas égaux de luminosité. Et parce que l'axe L est le même que le L* de Lab, des pas de L égaux paraissent perceptuellement réguliers à travers toutes les teintes — contrairement à HSL, où le jaune est dramatiquement plus lumineux que le bleu à même L.

Syntaxe CSS

/* LCH en CSS */
color: lch(55% 50 150);
/* L=55 (ton moyen), C=50 (chroma modéré), H=150 (vert) */

/* Construction d'une gamme tonale avec une luminosité perçue cohérente */
:root {
  --teal-100: lch(95% 10 190);
  --teal-300: lch(75% 25 190);
  --teal-500: lch(55% 40 190);
  --teal-700: lch(35% 35 190);
  --teal-900: lch(18% 20 190);
}

Limites de LCH

LCH hérite du problème d'interaction chroma-luminosité de Lab. Les lignes de teinte dans LCH ne sont pas parfaitement « droites » lorsqu'elles sont projetées sur la perception humaine — en particulier dans la plage bleue (H ≈ 270–300). Cela signifie qu'en augmentant le chroma à une teinte fixe dans LCH, la teinte apparente peut se décaler légèrement. Les bleus tendent à se déplacer vers le violet au fur et à mesure que le chroma augmente. C'est ce qu'on appelle la « non-linéarité de la teinte » et c'est la principale motivation pour la génération suivante d'espaces colorimétriques.

Oklab (2020)

Oklab a été publié par Björn Ottosson en 2020. C'est une réponse directe aux déficiences connues du CIE Lab — spécifiquement la non-linéarité de teinte qui rend Lab et LCH moins perceptuellement uniformes que leurs créateurs ne le souhaitaient.

Objectifs de conception

L'objectif explicite d'Ottosson était un espace colorimétrique où :

1. La luminosité est perceptuellement uniforme à travers toutes les teintes
2. Des différences numériques égales correspondent à des différences perceptuelles égales dans toutes les directions
3. Les lignes de teinte sont approximativement droites (teinte cohérente quand le chroma change)
4. Le calcul est simple et rapide

Pour y parvenir, Ottosson a adopté une approche différente : au lieu de dériver l'espace directement des fonctions d'adaptation colorimétrique du CIE XYZ, il a ajusté une nouvelle matrice de transformation aux données empiriques des expériences humaines de discrimination des couleurs (spécifiquement, les données des ellipses de MacAdam et l'ensemble de données Luo-Rigg). Le résultat est un espace qui correspond mieux à la forme réelle de la perception humaine des couleurs.

Structure

Oklab utilise le même nommage L/a/b que le CIE Lab mais avec des axes différents :

• L — Luminosité, 0 à 1 (note : normalisé à 1, pas à 100)
• a — Axe opposé vert-rouge (similaire au a* du CIE Lab mais avec une meilleure linéarité de teinte)
• b — Axe opposé bleu-jaune

La conversion depuis sRGB implique deux multiplications matricielles et une étape de racine cubique, la rendant efficace pour le calcul en temps réel.

Oklab vs CIE Lab : améliorations clés

L'amélioration de la linéarité de teinte est la plus visible dans la plage bleu-violet, où le CIE Lab/LCH présente des distorsions. Dans Oklab, modifier le chroma à une teinte fixe produit moins de dérive de teinte.

Syntaxe CSS

/* Oklab en CSS */
color: oklab(0.55 -0.05 0.12);
/* L=0.55 (ton moyen), a=-0.05 (légèrement vert), b=0.12 (jaune) */

OKLCH : Oklab cylindrique

OKLCH est à Oklab ce que LCH est à Lab — le même espace, exprimé en coordonnées polaires cylindriques. C'est le format qui a acquis l'adoption la plus large dans le CSS moderne et les outils de design.

• L — Luminosité, 0 à 1
• C — Chroma (distance depuis l'axe neutre), typiquement 0 à ~0,4 pour les couleurs sRGB
• H — Angle de teinte, 0–360 degrés

/* OKLCH en CSS */
color: oklch(0.55 0.15 160);
/* L=0.55, C=0.15, H=160° (vert-cyan) */

OKLCH par rapport à LCH : la différence pratique

Pour la plupart des travaux de design, OKLCH et LCH produisent des résultats similaires. La différence est la plus apparente quand :

1. Génération de gammes de nuances à travers les bleus : les gammes LCH dans la plage bleue peuvent dériver légèrement vers le violet à fort chroma. Les gammes OKLCH restent sur la teinte.
2. Interpolation à travers les teintes : les dégradés OKLCH à travers la plage bleu-violet restent plus vibrants et stables en teinte que les dégradés LCH.
3. Projection de gamut : quand une couleur dépasse le gamut sRGB et doit être remappée, la meilleure linéarité de teinte d'OKLCH donne une projection plus prévisible.

Construire une gamme de nuances en OKLCH

Parce que l'axe L d'OKLCH est perceptuellement calibré, vous pouvez générer une gamme en 10 étapes avec des incréments L égaux et obtenir approximativement des pas visuels égaux :

En partant d'un violet de marque #7C3AED — approximativement oklch(0.52 0.23 295) :

:root {
  --purple-50:  oklch(0.97 0.04 295);
  --purple-100: oklch(0.93 0.07 295);
  --purple-200: oklch(0.86 0.11 295);
  --purple-300: oklch(0.78 0.15 295);
  --purple-400: oklch(0.68 0.19 295);
  --purple-500: oklch(0.58 0.22 295);
  --purple-600: oklch(0.52 0.23 295);  /* couleur de marque */
  --purple-700: oklch(0.44 0.22 295);
  --purple-800: oklch(0.35 0.18 295);
  --purple-900: oklch(0.27 0.13 295);
  --purple-950: oklch(0.20 0.09 295);
}

Chaque étape représente une diminution perceptuelle cohérente de la luminosité. Notez que le chroma est également ajusté à mesure qu'on approche l'extrémité sombre — les couleurs très sombres ne peuvent pas supporter un chroma élevé dans aucun espace colorimétrique perceptuel. Utilisez le Convertisseur de couleurs pour trouver les coordonnées OKLCH de votre couleur de marque, puis ajustez les valeurs L de façon systématique.

OKLCH au-delà de sRGB : les couleurs à gamut large

Un avantage majeur d'OKLCH par rapport à Lab/LCH pour le développement web est qu'OKLCH peut adresser des couleurs en dehors du gamut sRGB. Les écrans modernes qui prennent en charge Display P3 ou Rec. 2020 peuvent afficher des couleurs plus vives que le sRGB ne le permet. Les coordonnées OKLCH peuvent décrire ces couleurs à gamut large :

/* Ce vert vif peut être hors gamut sRGB selon certaines combinaisons teinte/chroma */
color: oklch(0.80 0.30 140);
/* Les navigateurs afficheront l'équivalent sRGB le plus proche sur les écrans standard */
/* et la couleur vive complète sur les écrans à gamut large */

Les couleurs avec C > ~0,25 sont susceptibles de dépasser le sRGB pour certains angles de teinte. Vérifiez si une valeur OKLCH spécifique est dans le gamut à l'aide du Convertisseur de couleurs.

Choisir le bon espace pour votre tâche

Une note sur le support CSS

Les quatre espaces — Lab, LCH, Oklab et OKLCH — sont pris en charge dans CSS Color Level 4 et disponibles dans tous les principaux navigateurs modernes depuis 2022–2023 :

color: lab(55% -20 40);        /* CIE Lab */
color: lch(55% 50 150);        /* LCH */
color: oklab(0.55 -0.05 0.12); /* Oklab */
color: oklch(0.55 0.15 160);   /* OKLCH */

Pour la plupart des travaux de design web, OKLCH est le choix par défaut : c'est le format cylindrique le plus intuitif, il offre la meilleure linéarité de teinte, et il accède au plus large gamut. Utilisez Oklab quand vous avez besoin d'effectuer des calculs colorimétriques cartésiens (distance, moyenne). Utilisez CIE Lab/LCH uniquement si vous avez besoin de la compatibilité avec un système de design ou un standard existant construit autour d'eux.

Points clés

• L'uniformité perceptuelle signifie que des distances numériques égales correspondent à des différences de couleur perçues égales. sRGB et HSL ne sont pas perceptuellement uniformes ; Lab, LCH, Oklab et OKLCH sont conçus pour l'être.
• CIE Lab (1976) a été le premier espace perceptuellement uniforme largement adopté. Son axe L* est bien calibré pour la luminosité, mais son interaction chroma-luminosité provoque des dérives de teinte, notamment dans les bleus.
• LCH est le CIE Lab en forme cylindrique (teinte, chroma) — plus intuitif pour les designers que les axes a*/b* de Lab, mais hérite des problèmes de linéarité de teinte de Lab.
• Oklab (2020) a été conçu par Björn Ottosson pour corriger la non-linéarité de teinte de Lab, en utilisant des données empiriques de perception humaine. Il atteint une meilleure cohérence de teinte sur toute la plage de chroma.
• OKLCH est Oklab en forme cylindrique — le format le plus pratique pour le CSS et le travail de design. Il combine uniformité perceptuelle, coordonnées intuitives teinte-chroma-luminosité et accès aux couleurs à gamut large.
• Utilisez le Convertisseur de couleurs pour traduire n'importe quelle couleur HEX ou RGB en OKLCH et commencer à construire des systèmes de couleurs perceptuellement calibrés dès aujourd'hui.