Qu'est-ce que la chroma ? L'intensité chromatique au-delà de la saturation

Lorsque la plupart des gens veulent décrire une couleur vive par opposition à une couleur terne, ils emploient le mot « saturation ». Mais en science moderne des couleurs, notamment dans les espaces colorimétriques qui alimentent aujourd'hui le CSS et les outils de design professionnels, un terme plus précis accomplit ce travail : la chroma. La chroma et la saturation sont étroitement liées, mais elles mesurent des choses différentes et se comportent très différemment lorsque vous construisez des gammes de couleurs ou travaillez sur plusieurs teintes. Comprendre cette distinction vous donne un instrument plus fin pour prendre des décisions chromatiques.

La chroma définie en science des couleurs

La chroma est la coloration absolue d'une couleur — à quelle distance elle se situe d'un gris neutre de même luminosité. Pensez-y comme la quantité pure et mesurable de « couleur » présente, indépendamment de la clarté ou de l'obscurité de la couleur.

Le terme vient du grec chroma, signifiant couleur ou teint. En science des couleurs, il a été formalisé par Albert Munsell dans son système colorimétrique Munsell au début du XXe siècle. Munsell organisa les couleurs selon trois axes : la teinte (la famille de couleur spécifique), la valeur (la luminosité) et la chroma (la distance par rapport au gris). Il remarqua que des couleurs vives à différents niveaux de luminosité ne pouvaient pas être comparées à l'aide d'une seule mesure de « saturation » — un jaune vif très clair et un vert vif foncé ont des valeurs de chroma entièrement différentes même s'ils paraissent tous deux « pleinement saturés » à l'œil.

Dans l'usage moderne, la chroma apparaît comme dimension dans plusieurs espaces colorimétriques perceptuels :

• CIE LCH : Luminosité, Chroma, Teinte — version cylindrique de CIELAB
• OKLCH : Luminosité, Chroma, Teinte — version cylindrique d'Oklab, optimisée pour l'uniformité perceptuelle
• Munsell : Valeur, Chroma, Teinte — le système perceptuel original

Dans tous ces systèmes, la chroma est exprimée comme un nombre commençant à 0 (gris parfaitement neutre) et augmentant à mesure que la couleur devient plus vive. Contrairement à la saturation en HSL, la chroma n'a pas de limite supérieure fixe — la chroma maximale atteignable dépend de la teinte et du niveau de luminosité, ainsi que des capacités du système d'affichage ou d'impression utilisé.

Chroma vs saturation : différences clés

La saturation et la chroma concernent toutes deux l'intensité des couleurs, mais elles la mesurent de manières fondamentalement différentes.

La saturation en HSL est une mesure relative. Elle demande : à quel point cette couleur est-elle vive par rapport à la vivacité maximale possible à ce niveau de luminosité ? Elle est toujours exprimée en pourcentage de 0 % (gris pur) à 100 % (vivacité maximale pour cette teinte à cette luminosité). Le problème est que la « vivacité maximale » varie considérablement selon la teinte et la luminosité — ainsi, 100 % de saturation sur un jaune clair et 100 % de saturation sur un violet foncé représentent des quantités absolues de coloration très différentes.

La chroma en LCH ou OKLCH est une mesure absolue. Elle demande : quelle quantité totale de coloration est présente, mesurée en unités perceptuelles ? Une chroma de 0,15 en OKLCH signifie la même quantité absolue de coloration, que la teinte soit rouge, bleue ou verte, et quelle que soit la clarté ou l'obscurité de la couleur.

Considérez deux couleurs souvent décrites comme « pleinement saturées » :

• Un jaune vif comme #FFFF00 — en OKLCH : approximativement oklch(0.97 0.21 108)
• Un bleu vif comme #0000FF — en OKLCH : approximativement oklch(0.45 0.31 265)

Les deux sont à 100 % de saturation HSL. Mais leurs valeurs de chroma OKLCH sont respectivement 0,21 et 0,31 — significativement différentes. Le bleu a une chroma absolue plus élevée. C'est pourquoi lorsque vous réduisez la chroma des deux de façon égale en OKLCH, vous obtenez des couleurs qui paraissent également atténuées à l'œil humain. Si vous réduisez la saturation de façon égale en HSL, le résultat perceptuel serait incohérent.

Résumé pratique

La chroma dans les espaces colorimétriques LCH et OKLCH

LCH et OKLCH utilisent tous deux la chroma comme mesure de la coloration. OKLCH est le plus récent et le plus précis perceptuellement des deux.

LCH

LCH (Luminosité, Chroma, Teinte) est un réarrangement cylindrique de l'espace colorimétrique CIELAB, conçu par la Commission Internationale de l'Éclairage (CIE) en 1976. CIELAB et LCH ont été spécifiquement conçus pour être perceptuellement uniformes, ce qui signifie que des différences numériques égales dans l'espace colorimétrique correspondent à des différences d'aspect égales pour l'œil humain.

En LCH, les valeurs de chroma vont typiquement de 0 à environ 150 pour les couleurs dans le spectre visible, bien que le gamut sRGB limite les valeurs pratiques à environ 0–50 selon la teinte et la luminosité. La fonction CSS lch() utilise cette échelle :

/* LCH : un orange vif */
color: lch(65 45 45);

/* LCH : une version atténuée de la même teinte */
color: lch(65 15 45);

OKLCH

OKLCH est une version cylindrique de l'espace colorimétrique Oklab, conçu par Björn Ottosson en 2020 comme amélioration de CIELAB et LCH. Bien que LCH présente une excellente uniformité perceptuelle dans l'ensemble, il comporte des artefacts de décalage de teinte lors de l'interpolation de couleurs — particulièrement dans la gamme des bleus. OKLCH corrige ces artefacts et produit des dégradés et des gammes de couleurs plus stables visuellement.

En OKLCH, les valeurs de chroma sont exprimées sur une échelle plus petite — typiquement 0 à environ 0,4 pour les couleurs dans le gamut Display P3, les couleurs sRGB se situant généralement entre 0 et environ 0,33. La syntaxe CSS est :

/* OKLCH : un rouge-orange vif */
color: oklch(0.63 0.24 27);

/* OKLCH : une version pastel et atténuée */
color: oklch(0.85 0.08 27);

/* OKLCH : un gris parfaitement neutre (chroma nulle) */
color: oklch(0.5 0 0);

Vous pouvez convertir n'importe quelle couleur hexadécimale en sa valeur de chroma OKLCH avec le Convertisseur de couleurs. Collez un code hex et le convertisseur affiche les valeurs L, C et H qui vous donnent une mesure précise de l'intensité absolue de cette couleur.

Pourquoi les valeurs de chroma n'ont pas de maximum fixe

La chroma maximale atteignable pour n'importe quelle couleur dépend de l'intersection de trois facteurs : la teinte, la luminosité et le gamut du dispositif de sortie. C'est pourquoi l'axe de chroma en OKLCH n'a pas de plafond universel.

Par exemple, dans la région verte d'OKLCH (teinte autour de 140°), le gamut sRGB permet une chroma jusqu'à environ 0,29 à luminosité moyenne. Dans la région jaune-vert, la chroma sRGB maximale est plus faible — environ 0,21 — parce que les primaires sRGB ne peuvent tout simplement pas produire des jaune-verts très saturés. Si vous utilisez un gamut plus large comme Display P3, ces plafonds sont plus élevés pour la plupart des teintes.

Pourquoi la chroma est importante pour le design et les palettes

Comprendre la chroma libère un meilleur contrôle de la cohérence des palettes de couleurs. L'intuition fondamentale est la suivante : lorsque vous souhaitez que deux couleurs paraissent également vives, vous devez leur donner une chroma égale — pas une saturation égale.

Harmonies à chroma égale

Lorsque vous construisez une palette de plusieurs teintes destinées à fonctionner harmonieusement ensemble — disons un bleu primaire, un orange secondaire et un vert tertiaire — vous pouvez verrouiller la valeur de chroma pour les trois. À même luminosité et même chroma, trois couleurs de teintes différentes paraîtront également vives, les faisant se sentir comme une famille cohérente plutôt qu'une sélection aléatoire où une couleur domine les autres.

/* Trois couleurs de marque à chroma égale (0,14) et luminosité égale (0,65) */
--brand-blue:   oklch(0.65 0.14 260);
--brand-orange: oklch(0.65 0.14 50);
--brand-green:  oklch(0.65 0.14 145);

Atteindre cela avec la saturation HSL est impossible — chaque teinte nécessiterait une valeur de saturation différente pour atteindre la même vivacité perçue, exigeant un ajustement manuel à l'œil.

Courbes de chroma dans les gammes de couleurs

Lors de la génération d'une gamme de teintes à tons, la chroma ne reste pas constante — elle monte naturellement puis descend à mesure que l'on passe du blanc pur à travers la plage vive du milieu jusqu'au noir pur. C'est parce que les couleurs proches du blanc et du noir ne peuvent pas maintenir une chroma élevée ; elles sont intrinsèquement proches du neutre.

Comprendre cela signifie que vous pouvez concevoir des gammes d'aspect plus naturel en permettant à la chroma de suivre un arc doux plutôt que de la maintenir artificiellement plate :

/* Une gamme bleue avec un arc de chroma réaliste */
--blue-50:  oklch(0.97 0.02 260);  /* Proche du blanc, chroma faible */
--blue-200: oklch(0.88 0.07 260);  /* Clair, chroma douce */
--blue-400: oklch(0.72 0.14 260);  /* Clair-moyen, chroma croissante */
--blue-500: oklch(0.60 0.16 260);  /* Ton moyen, chroma maximale */
--blue-700: oklch(0.42 0.14 260);  /* Sombre, chroma décroissante */
--blue-900: oklch(0.25 0.07 260);  /* Proche du noir, chroma faible */

Cela produit une gamme qui paraît perceptuellement naturelle du clair au foncé, car elle reflète le comportement de la chroma dans le monde réel.

Chroma et accessibilité

L'accessibilité des couleurs en design UI se concentre généralement sur le ratio de contraste, mais la chroma joue un rôle de soutien. Les couleurs à très faible chroma (proches du gris) offrent moins de différenciation visuelle lorsqu'elles sont utilisées pour encoder du sens — par exemple dans des graphiques ou des cartes. Si un utilisateur a une sensibilité réduite aux couleurs (comme dans le cas d'un déficit de vision des couleurs), une palette avec des différences de chroma suffisamment variées aide à maintenir la lisibilité même lorsque les différences de teinte sont moins perceptibles.

Utilisez le Générateur de palettes pour construire des harmonies à partir d'une teinte spécifique, puis ajustez les valeurs de chroma pour trouver le bon équilibre entre vivacité et retenue.

Mesurer et comparer les valeurs de chroma

Voici un tableau de référence de couleurs web courantes avec leurs valeurs de chroma OKLCH, vous donnant une idée de l'échelle :

Vous pouvez vérifier ces valeurs pour n'importe quelle couleur en utilisant le Convertisseur de couleurs pour convertir un code hex au format OKLCH.

Quand une chroma élevée est utile

Les couleurs à chroma élevée — celles avec des valeurs de 0,2 et plus en OKLCH — conviennent pour :

• Les couleurs primaires de marque qui doivent être distinctives et mémorables
• Les boutons d'appel à l'action qui doivent se démarquer des interfaces neutres
• Les couleurs d'accent dans les visualisations de données où la couleur porte du sens
• Les éléments interactifs qui bénéficient de signaler clairement leur interactivité

Quand une chroma faible est utile

Les couleurs à faible chroma — en dessous de 0,08 en OKLCH — conviennent pour :

• Les fonds et couleurs de surface qui ne doivent pas concurrencer le contenu
• Les couleurs de texte neutres (le texte de corps quasi-noir est un gris foncé à faible chroma)
• Les éléments UI secondaires comme les bordures, séparateurs et états inactifs
• Les palettes de style sophistiqué et éditorial où la retenue signale la qualité

Points clés

• La chroma est une mesure absolue de la coloration — à quelle distance une couleur se situe du gris neutre de même luminosité. La saturation en HSL est une mesure relative qui n'est pas cohérente entre teintes ou niveaux de luminosité.
• LCH et OKLCH sont les principaux formats CSS de couleur utilisant la chroma. OKLCH est préféré depuis 2024 car il corrige les artefacts de décalage de teinte que LCH hérite de CIELAB dans la gamme des bleus.
• La chroma n'a pas de maximum fixe — la limite supérieure dépend de la teinte, de la luminosité et du gamut de sortie. Pour sRGB, la plupart des teintes plafonnent entre 0,25 et 0,40 en OKLCH ; Display P3 permet des valeurs légèrement plus élevées.
• Une chroma égale entre teintes produit des palettes où toutes les couleurs paraissent également vives — chose impossible à atteindre avec une saturation HSL égale.
• La chroma suit naturellement un arc dans les gammes de couleurs — elle est la plus élevée à luminosité moyenne et descend vers le blanc pur et le noir pur. Concevoir des gammes qui suivent cet arc paraît plus naturel.
• Utilisez le Convertisseur de couleurs pour trouver la valeur de chroma OKLCH de n'importe quelle couleur hexadécimale, et le Générateur de palettes pour explorer comment la chroma évolue dans les harmonies et les gammes.