Lafonction de type<color>CSSlch() exprime une couleur donnée dans l'espace de couleur LCH, qui utilise le même axe L (luminosité) que la fonction de couleurlab() de l'espace de couleur CIELab, mais utilise des coordonnées polaires C (chroma) et H (pour la teinte,hue en anglais).

Syntaxe

/* Valeurs absolues */lch(29.2345% 44.2 27);lch(52.2345% 72.2 56.2);lch(52.2345% 72.2 56.2 / .5);/* Valeurs relatives */lch(from green l c h / 0.5)lch(from #123456 calc(l + 10) c h)lch(from hsl(180 100% 50%) calc(l - 10) c h)lch(from var(--color-value) l c h / calc(alpha - 0.1))

Valeurs

Voici les descriptions des valeurs autorisées pour lescouleurs absolues et relatives.

Syntaxe des valeurs absolues

lch(L C H[ / A])

Les paramètres sont les suivants :

L

Un nombre (<number>) entre0 et100, un pourcentage (<percentage>) entre0% et100%, ou le mot-clénone (équivalent à0%). Le nombre0 correspond à0% (noir), et le nombre100 correspond à100% (blanc). Cette valeur définit la luminosité de la couleur dans l'espace de couleur CIELab.

Note :LeL danslch() représente la luminosité perçue, qui fait référence à la « luminosité » que nous percevons visuellement avec nos yeux. Cela diffère duL danshsl(), où il représente la luminosité par rapport à d'autres couleurs.

C

Un nombre (<number>), un pourcentage (<percentage>,) ou le mot-clénone (équivalent à0% dans ce cas). Cette valeur est une mesure de la chroma de la couleur (représentant approximativement la « quantité de couleur »). Sa valeur minimale utile est0%, ou0, tandis que son maximum est théoriquement illimité (mais ne dépasse pas230 en pratique), avec100% étant équivalent à150.

H

Un nombre (<number>), un<angle>, ou le mot-clénone (équivalent à0deg) représentant l'angle deteinte de la couleur.

Note :Les angles correspondant à des teintes particulières diffèrent entre les espaces de couleur sRGB (utilisé parhsl() ethwb()), CIELAB (utilisé parlch()), et Oklab (utilisé paroklch()). Consultez l'exempleteintes dans LCH ci-dessous et la page de référence<hue> pour plus de détails et d'exemples.

AFacultatif

Une valeur<alpha-value> représentant la valeur du canal alpha de la couleur, où le nombre0 correspond à0% (entièrement transparent) et1 correspond à100% (entièrement opaque). De plus, le mot-clénone peut être utilisé pour indiquer explicitement l'absence de canal alpha. Si la valeur du canalA n'est pas explicitement définie, elle prend par défaut la valeur 100%. Si elle est incluse, la valeur est précédée d'une barre oblique (/).

Syntaxe des valeurs relatives

lch(from <color> L C H[ / A])

Les paramètres sont les suivants :

from <color>

Le mot-cléfrom est toujours inclus lors de la définition d'une couleur relative, suivi d'une valeur<color> représentant lacouleur d'origine. C'est la couleur originale sur laquelle la couleur relative est basée. La couleur d'origine peut êtren'importe quelle syntaxe<color> valide, y compris une autre couleur relative.

L

Un nombre (<number>) entre0 et100, un pourcentage (<percentage>) entre0% et100%, ou le mot-clénone (équivalent à0%). Le nombre0 correspond à0% (noir), et le nombre100 correspond à100% (blanc). Cette valeur définit la luminosité de la couleur dans l'espace de couleur CIELab.

C

Un nombre (<number>), un pourcentage (<percentage>,) ou le mot-clénone (équivalent à0% dans ce cas). Cette valeur représente la valeur de chroma de la couleur de sortie (représentant approximativement la « quantité de couleur »). Sa valeur minimale utile est0%, ou0, tandis que son maximum est théoriquement illimité (mais ne dépasse pas230 en pratique), avec100% étant équivalent à150.

H

Un nombre (<number>), un<angle>, ou le mot-clénone (équivalent à0deg) représentant l'angle deteinte de la couleur de sortie. Consultez l'exemple de teinte ci-dessous.

AFacultatif

Une valeur<alpha-value> représentant la valeur du canal alpha de la couleur de sortie, où le nombre0 correspond à0% (entièrement transparent) et1 correspond à100% (entièrement opaque). De plus, le mot-clénone peut être utilisé pour indiquer explicitement l'absence de canal alpha. Si la valeur du canalA n'est pas explicitement définie, elle prend par défaut la valeur du canal alpha de la couleur d'origine. Si elle est incluse, la valeur est précédée d'une barre oblique (/).

Définition des composants des canaux de couleur de sortie relative

Lors de l'utilisation de la syntaxe des couleurs relatives dans une fonctionlch(), le navigateur convertit la couleur d'origine en une couleur Lch équivalente (si elle n'est pas déjà définie comme telle). La couleur est définie comme trois valeurs de canaux de couleur distinctes —l (luminosité),c (chroma), eth (teinte) — plus une valeur de canal alpha (alpha). Ces valeurs de canaux sont rendues disponibles dans la fonction pour être utilisées lors de la définition des valeurs des canaux de couleur de sortie :

• La valeur du canall est résolue en un<number> entre0 et100, inclus.
• La valeur du canalc est résolue en un<number> entre0 et150, inclus.
• La valeur du canalh est résolue en un<number> entre0 et360, inclus.
• Le canalalpha est résolu en un<number> entre0 et1, inclus.

Lors de la définition d'une couleur relative, les différents canaux de la couleur de sortie peuvent être exprimés de plusieurs manières différentes. Ci-dessous, nous étudierons quelques exemples pour illustrer ceux-ci.

Dans les deux premiers exemples ci-dessous, nous utilisons la syntaxe des couleurs relatives. Cependant, le premier produit la même couleur que la couleur d'origine et le second produit une couleur qui n'est pas du tout basée sur la couleur d'origine. Ils ne créent pas vraiment de couleurs relatives ! Vous seriez peu susceptible d'utiliser cela dans une base de code réelle, et utiliseriez probablement simplement une valeur de couleur absolue à la place. Nous avons inclus ces exemples comme point de départ pour apprendre la syntaxelch() relative.

Commençons par une couleur d'origine dehsl(0 100% 50%) (équivalent àred). La fonction suivante produit la même couleur que la couleur d'origine — elle utilise les valeurs des canauxl,c, eth de la couleur d'origine (54.29,106.854, et40.856) comme valeurs des canaux de sortie :

lch(from hsl(0 100% 50%) l c h)

La couleur de sortie de cette fonction estlch(54.29 106.854 40.856).

La fonction suivante utilise des valeurs absolues pour les valeurs des canaux de la couleur de sortie, produisant une couleur complètement différente non basée sur la couleur d'origine :

lch(from hsl(0 100% 50%) 29.6871% 66.83 327.109)

Dans le cas ci-dessus, la couleur de sortie estlch(29.6871 66.83 327.109).

La fonction suivante crée une couleur relative basée sur la couleur d'origine :

lch(from hsl(0 100% 50%) 70 150 h)

Cet exemple :

• Convertit la couleur d'originehsl() en une couleurlch() équivalente —lch(54.29 106.854 40.856).
• Définit la valeur du canalH pour la couleur de sortie à celle de la valeur du canalH de l'équivalentlch() d'origine —40.856.
• Définit les valeurs des canauxL etC de la couleur de sortie à de nouvelles valeurs non basées sur la couleur d'origine :70 et150 respectivement.

La couleur de sortie finale estlch(70 150 40.856).

Dans les exemples que nous avons vus jusqu'à présent dans cette section, les canaux alpha n'ont pas été explicitement définis pour les couleurs d'origine ou de sortie. Lorsque le canal alpha de la couleur de sortie n'est pas défini, il prend par défaut la même valeur que le canal alpha de la couleur d'origine. Lorsque le canal alpha de la couleur d'origine n'est pas défini (et qu'il ne s'agit pas d'une couleur relative), il prend par défaut la valeur1. Par conséquent, les valeurs des canaux alpha d'origine et de sortie sont1 pour les exemples ci-dessus.

Examinons quelques exemples qui définissent les valeurs des canaux alpha d'origine et de sortie. Le premier définit la valeur du canal alpha de sortie comme étant la même que la valeur du canal alpha d'origine, tandis que le second définit une valeur différente du canal alpha de sortie, non liée à la valeur du canal alpha d'origine.

lch(from hsl(0 100% 50% / 0.8) l c h / alpha)/* Couleur de sortie calculée : lch(54.29 106.854 40.856 / 0.8) */lch(from hsl(0 100% 50% / 0.8) l c h / 0.5)/* Couleur de sortie calculée : lch(54.29 106.854 40.856 / 0.5) */

Dans l'exemple suivant, la couleur d'originehsl() est à nouveau convertie vers l'équivalentlch() —lch(54.29 106.854 40.856). Les calculscalc() sont appliqués aux valeursL,C,H, etA, résultant en une couleur de sortie delch(74.29 86.8541 0.856018 / 0.9) :

lch(from hsl(0 100% 50%) calc(l + 20) calc(c - 20) calc(h - 40) / calc(alpha - 0.1))

Syntaxe formelle

<lch()> =
lch([from<color>]?[<percentage>|<number>|none][<percentage>|<number>|none][<hue>|none][ /[<alpha-value>|none]]?)

<hue> =
<number>|
<angle>

<alpha-value> =
<number>|
<percentage>

Exemples

Ajustement de la luminosité d'une couleur

Cet exemple montre l'effet de la variation de la valeurL (luminosité) de la notation fonctionnellelch().

HTML

<div data-color="blue-dark"></div><div data-color="blue"></div><div data-color="blue-light"></div><div data-color="red-dark"></div><div data-color="red"></div><div data-color="red-light"></div><div data-color="green-dark"></div><div data-color="green"></div><div data-color="green-light"></div>

CSS

body {  display: grid;  grid-template-columns: 1fr 1fr 1fr;  gap: 20px;}div {  height: 50px;  border: 1px solid black;}

[data-color="blue-dark"] {  background-color: lch(10% 100 240);}[data-color="blue"] {  background-color: lch(50% 100 240);}[data-color="blue-light"] {  background-color: lch(90% 100 240);}[data-color="red-dark"] {  background-color: lch(10% 130 20);}[data-color="red"] {  background-color: lch(50% 130 20);}[data-color="red-light"] {  background-color: lch(90% 130 20);}[data-color="green-dark"] {  background-color: lch(10% 132 130);}[data-color="green"] {  background-color: lch(50% 132 130);}[data-color="green-light"] {  background-color: lch(90% 132 130);}

Résultat

Ajustement de l'intensité des couleurs via la chroma

Cet exemple montre l'effet de la variation de la valeurC (chroma) de la notation fonctionnellelch(), avec des couleurs diminuant en intensité à mesure que la valeurC diminue, passant d'une saturation complète à presque du gris.

HTML

<div data-color="blue"></div><div data-color="blue-chroma1"></div><div data-color="blue-chroma2"></div><div data-color="blue-chroma3"></div><div data-color="red"></div><div data-color="red-chroma1"></div><div data-color="red-chroma2"></div><div data-color="red-chroma3"></div><div data-color="green"></div><div data-color="green-chroma1"></div><div data-color="green-chroma2"></div><div data-color="green-chroma3"></div>

CSS

Avec les couleurs de départ initiales bleu, rouge et vert, nous déclarons des valeurs de chroma progressivement plus petites : commençant par une saturation complète des couleurs à la valeur la plus élevée de150 (équivalente à100%) jusqu'à3 (équivalente à2%), ce qui est presque gris pour toutes les couleurs.

body {  display: grid;  grid-template-columns: 1fr 1fr 1fr 1fr;  gap: 20px;}div {  height: 50px;  border: 1px solid black;}

[data-color="blue"] {  background-color: lch(50% 150 240);}[data-color="blue-chroma1"] {  background-color: lch(50% 105 240);}[data-color="blue-chroma2"] {  background-color: lch(50% 54 240);}[data-color="blue-chroma3"] {  background-color: lch(50% 3 240);}[data-color="red"] {  background-color: lch(50% 100% 20deg);}[data-color="red-chroma1"] {  background-color: lch(50% 70% 20deg);}[data-color="red-chroma2"] {  background-color: lch(50% 36% 20deg);}[data-color="red-chroma3"] {  background-color: lch(50% 2% 20deg);}[data-color="green"] {  background-color: lch(50% 150 130);}[data-color="green-chroma1"] {  background-color: lch(50% 105 130);}[data-color="green-chroma2"] {  background-color: lch(50% 54 130);}[data-color="green-chroma3"] {  background-color: lch(50% 3 130);}

Résultat

Si nous avions utilisé0 au lieu de3 et2%, avec les mêmes valeurs de luminosité, les couleurs auraient toutes été de la même nuance de gris. Dans cet exemple, elles sont presque grises.

Teintes dans LCH

L'exemple suivant montre des échantillons avec différentes valeursH (teinte) de la notation fonctionnellelch().

HTML

<div data-color="0">0deg</div><div data-color="20">20deg</div><div data-color="40">40deg</div><div data-color="60">60deg</div>

and so on.

<div data-color="80">80deg</div><div data-color="100">100deg</div><div data-color="120">120deg</div><div data-color="140">140deg</div><div data-color="160">160deg</div><div data-color="180">180deg</div><div data-color="200">200deg</div><div data-color="220">220deg</div><div data-color="240">240deg</div><div data-color="260">260deg</div><div data-color="280">280deg</div><div data-color="300">300deg</div><div data-color="320">320deg</div><div data-color="340">340deg</div><div data-color="360">360deg</div>

CSS

body {  display: flex;  flex-wrap: wrap;  gap: 3px;}div {  flex: 0 0 4em;  text-align: center;  line-height: 4em;  display: inline-block;  border: 1px solid black;  color: white;  font-family: monospace;}

[data-color="0"] {  background-color: lch(50% 150 0deg);}[data-color="20"] {  background-color: lch(50% 150 20deg);}[data-color="40"] {  background-color: lch(50% 150 40deg);}[data-color="60"] {  background-color: lch(50% 150 60deg);}

et ainsi de suite.

[data-color="80"] {  background-color: lch(50% 150 80deg);}[data-color="100"] {  background-color: lch(50% 150 100deg);}[data-color="120"] {  background-color: lch(50% 150 120deg);}[data-color="140"] {  background-color: lch(50% 150 140deg);}[data-color="160"] {  background-color: lch(50% 150 160deg);}[data-color="180"] {  background-color: lch(50% 150 180deg);}[data-color="200"] {  background-color: lch(50% 150 200deg);}[data-color="220"] {  background-color: lch(50% 150 220deg);}[data-color="240"] {  background-color: lch(50% 150 240deg);}[data-color="260"] {  background-color: lch(50% 150 260deg);}[data-color="280"] {  background-color: lch(50% 150 280deg);}[data-color="300"] {  background-color: lch(50% 150 300deg);}[data-color="320"] {  background-color: lch(50% 150 320deg);}[data-color="340"] {  background-color: lch(50% 150 340deg);}[data-color="360"] {  background-color: lch(50% 150 360deg);}

Résultat

Les angles de teinte danslch() sont différents de ceux danshsl(). Voir<hue> pour plus d'informations. Danshsl(), la couleur sRGB0deg représente le rouge. Cependant, dans l'espace colorimétrique CIELab,0deg correspond au magenta, tandis que le rouge est approximativement41deg.

Ajustement de l'opacité aveclch()

L'exemple suivant montre l'effet de la variation de la valeurA (alpha) de la notation fonctionnellelch().Les élémentsred etred-alpha se superposent à l'élément#background-div pour démontrer l'effet de l'opacité.Donner àA une valeur de0.4 rend la couleur 40% opaque.

HTML

<div>  <div data-color="red"></div>  <div data-color="red-alpha"></div></div>

CSS

div {  width: 50px;  height: 50px;  padding: 5px;  margin: 5px;  display: inline-block;  border: 1px solid black;}#background-div {  background-color: lch(100% 100 240);  width: 150px;  height: 40px;}

[data-color="red"] {  background-color: lch(50% 130 20);}[data-color="red-alpha"] {  background-color: lch(50% 130 20 / 0.4);}

Résultat

Utilisation des couleurs relatives aveclch()

Cet exemple stylise trois éléments<div> avec différentes couleurs de fond, démontrant l'utilisation des couleurs relatives pour changer la luminosité d'une couleur en utilisant la fonction de couleurlch(). Le<div> du milieu conserve la--base-color d'origine, tandis que les<div> de gauche et de droite reçoivent des variantes éclaircies et assombries de la--base-color.

Ces variantes sont définies en utilisant des couleurs relatives — lapropriété personnalisée--base-color est passée dans une fonctionlch(), et les couleurs de sortie ont leur canal de luminosité modifié pour obtenir l'effet désiré via une fonctioncalc(). La couleur éclaircie a 15 % ajoutés au canal de luminosité, et la couleur assombrie a 15 % soustraits du canal de luminosité.

<div>  <div></div>  <div></div>  <div></div></div>

CSS

#container {  display: flex;  width: 100vw;  height: 100vh;  box-sizing: border-box;}.item {  flex: 1;  margin: 20px;}

:root {  --base-color: orange;}#one {  background-color: lch(from var(--base-color) calc(l + 15) c h);}#two {  background-color: var(--base-color);}#three {  background-color: lch(from var(--base-color) calc(l - 15) c h);}

Résultat

Le résultat est le suivant :

Spécifications

Compatibilité des navigateurs

Voir aussi

• Liste de toutes les notations de couleur
• Utilisation des couleurs relatives
• Le module descouleurs CSS
• Le type de donnée<hue>
• Les couleurs LCH en CSS : qu'est-ce que c'est, pourquoi et comment ?^(angl.) par Lea Verou (2020)