Chroma

Chroma est l’axe d’attribut de couleur qui capture “quelle quantité de couleur il y a dans la couleur” indépendamment de la luminosité. Un rouge pur et un rose pur peuvent avoir des teintes et des luminosités similaires mais des chromas très différents — le rose est plus proche du gris, le rouge en est plus éloigné.

Le chroma est parfois confondu avec la saturation. La distinction :

• Chroma est la distance absolue par rapport à l’axe achromatique (gris) à une luminosité donnée, mesurée dans l’espace colorimétrique choisi (OKLab, CIELAB, etc.).
• Saturation est le rapport du chroma à la luminosité — une mesure relative.

Cela compte en design car OKLCH (la fonction de couleur CSS moderne) utilise le chroma, pas la saturation. oklch(0.72 0.18 47) signifie luminosité 0,72, chroma 0,18, teinte 47°. Ajuster le chroma seul maintient la luminosité et la teinte stables ; avec la saturation, ajuster une valeur change aussi la luminosité perçue.

Le chroma maximum atteignable varie avec la teinte et la luminosité. En sRGB, le jaune à luminosité moyenne peut supporter plus de chroma que le bleu à la même luminosité — les primaires jaunes sont plus proches de la limite du gamut sRGB. Les valeurs OKLCH qui dépassent le gamut sRGB sont clippées à la limite, ce qui déplace parfois la couleur rendue de façon inattendue. Pour un design perceptuellement cohérent sur une large plage de teintes, choisissez une valeur de chroma (par exemple 0,12 à 0,15) qui est atteignable à chaque teinte dont vous avez besoin.

Exemple de calcul

Créez une palette de 9 étapes du gris au rouge. En HSL, vous pourriez commencer à hsl(0 0% 50%) et finir à hsl(0 100% 50%), en ajustant la saturation linéairement. Les étapes intermédiaires semblent bonnes pour le rouge, mais la même approche pour le bleu (hsl(240 0% 50%) → hsl(240 100% 50%)) produit un point médian qui paraît nettement plus sombre que le point médian rouge — la luminosité HSL n’est pas perceptuellement uniforme. En OKLCH, fixer la luminosité à 0,65 et faire varier le chroma de 0 à 0,18 produit neuf étapes qui correspondent en luminosité perçue à travers les teintes. Concrètement : oklch(0.65 0.00 0), oklch(0.65 0.0225 0), …, oklch(0.65 0.18 0) se trouvent tous sur la même ligne de luminosité perçue. Répétez le même rampe de chroma à la teinte 240 (bleu) et l’échelle de bleu résultante sera visuellement parallèle à l’échelle de rouge étape par étape — impossible à atteindre avec HSL seul.

Numériquement, les valeurs de chroma OKLCH pour les couleurs sRGB dans le gamut tombent approximativement dans la plage 0 à 0,37. Le maximum dépend de la teinte et de la luminosité : à L=0,6, le rouge le plus saturé atteignable en sRGB a un chroma d’environ 0,25 ; le jaune le plus saturé environ 0,21 ; le bleu le plus saturé environ 0,31. Connaître ces plafonds évite de spécifier des valeurs de palette impossibles que le navigateur clippera silencieusement.

Quand et pourquoi c’est important

Le chroma compte chaque fois que vous avez besoin de couleurs qui semblent cohérentes à travers les teintes — les systèmes de design avec des échelles de couleurs sémantiques (rouge-50 à rouge-900, bleu-50 à bleu-900, etc.), les visualisations de données avec des palettes catégorielles qui doivent être également lisibles, et les interfaces utilisateur soucieuses de l’accessibilité où les taux de contraste dépendent de la luminosité perçue (et non brute). La palette Tailwind v4, Radix Colors et le système de design IBM Carbon publient tous des rampes OKLCH à chroma contrôlé exactement pour cette raison. L’erreur à éviter est de traiter “saturation” comme synonyme d’“intensité” : augmenter la saturation en HSL entraîne la luminosité avec elle, tandis qu’augmenter le chroma en OKLCH ne le fait pas. Pour la viz de données, la règle pratique est de choisir le chroma maximum atteignable à chaque teinte dont vous avez besoin (typiquement ~0,10-0,13 pour le sRGB dans le gamut à toutes les teintes), puis de garder le chroma fixe et de faire varier la luminosité pour les étapes de l’échelle. Référence : W3C CSS Color Module Level 4 — OKLab et OKLCH.

Pourquoi OKLab/OKLCH a remplacé HSL pour le travail de design sérieux : HSL est une simple transformation algébrique de RGB — son axe de “luminosité” n’est pas perceptuellement uniforme. Deux couleurs HSL avec des valeurs de luminosité identiques peuvent sembler très différentes en luminosité réelle ; un jaune à une luminosité HSL de 50 % paraît beaucoup plus lumineux qu’un bleu à la même valeur. OKLab (Björn Ottosson, 2020) a été spécifiquement conçu pour que l’axe L corresponde à la perception humaine de la luminosité, et l’axe chroma à la saturation perçue. Des pas égaux dans OKLab semblent être des pas égaux à l’œil. CSS Color Module Level 4 a ajouté les fonctions oklab() et oklch() pour cette raison, et les systèmes de design (Tailwind 4, Radix Colors) publient de plus en plus des échelles de palette générées en OKLCH pour une cohérence perceptuelle garantie. Voir aussi : chromaticité, sRGB, gamut. Référence : Björn Ottosson — Un espace colorimétrique perceptuel pour le traitement d’image (2020).