Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

Les fonctions CSS lab() et lch()

lab()
lch()
oklab()
oklch()

Résumé des caractéristiques de la fonction lab()

Description rapide
Définit une couleur dans le système L*a*b*.
Statut
Standard
Pourcentages
Plusieurs paramètres peuvent être exprimés en pourcentages. Voyez le texte pour plus de précisions.
Module W3C
Module CSS - Couleurs
Références (W3C)
Statut du document: WD (document de travail)

Schéma syntaxique des fonctions lab() et lch().

lab() - Syntax DiagramSyntax diagram of the lab() CSS function. from color from color number-l number-l number-a number-a number-b number-b / number-α / number-α %-α %-αlab()lab()
Schéma syntaxique de la fonction lab()
Syntaxe détaillée

Les termes sur le schéma sont décrits ci-dessous :

  • color est une couleur de référence éventuelle, introduite par le mot-clé from, et exprimée dans l'une des syntaxes reconnues par CSS (voir les couleurs CSS).
  • number-l est un nombre sans unité, compris entre 0 et 100 ou un pourcentage.
  • number-a et number-b sont deux nombres sans unité, compris entre -160 et +160, ou des pourcentages.
  • α est un nombre sans unité compris entre 0 et 1, ou un pourcentage, introduit par le caractère slash. Il représente l'opacité de la couleur (canal alpha).
lch() - Syntax DiagramSyntax diagram of the lch() CSS function. from color from color number-l number-l number-c number-c angle-h angle-h / number-α / number-α %-α %-αlch()lch()
Schéma syntaxique de la fonction lch()
Syntaxe détaillée

Sur ce deuxième schéma, les termes sont décrits ci-dessous :

  • color est une couleur de référence éventuelle, introduite par le mot-clé from, et exprimée dans l'une des syntaxes reconnues par CSS (voir les couleurs CSS).
  • number-l est un nombre sans unité, compris entre 0 et 100 ou un pourcentage.
  • number-c est un nombre sans unité, compris entre 0 et 230, ou un pourcentage.
  • angle-h est un nombre suivi d'une unité d'angle.
  • α est un nombre sans unité compris entre 0 et 1, ou un pourcentage, introduit par le caractère slash. Il représente l'opacité de la couleur (canal alpha).

Description des fonctions lab() et lch().

Les espaces de couleurs L*a*b* et L*C*H* ont été définis par la CIE (Commission internationale de l'éclairage) pour caractériser les couleurs de surface. ils ont mal adaptés aux couleurs affichées sur un écran, mais bien adaptés aux couleurs imprimées.

Les trois grandeur qui définissent une couleur dans ces espaces peuvent se représenter sur le schéma suivant. On voit que le L*a*b* est un référentiel cartésien, tandis que le L*C*H* est un référentiel en coordonnées polaires.

Esaces de couleurs L*a*b* et L*c*h*

L'espace L*a*b* est caractérisé par trois valeurs :

  • L est la clarté (Lightness en anglais). Plus la clarté est élevée, plus la couleur est claire, le blanc correspondant à une clarté de 100.
  • a est la position de la couleur sur l'axe vert-rouge.
  • b est la position de la couleur sur l'axe bleu-jaune.

L'espace L*C*H* est lui caractérisé par les trois valeurs :

  • L est la clarté (Lightness en anglais).
  • C est la chrominance. Une valeur faible correspond à une couleur terne, proche du gris, tandis qu'une valeur élevée correspond à une couleur vive.
  • H est la teinte (Hue en anglais). Elle est exprimée en degrés et indique la position de la couleur sur le cercle des teintes. 0deg correspond à une couleur entre le magenta et le rouge.

Les fonctions lab() et lch() peuvent être utilisées avec :

Toutes les propriétés qui attendent une définition de couleur.

Syntaxe des fonctions lab() et lch().

Toutes ces fonctions acceptent trois paramètres séparés par des espaces, et un quatrième, optionnel, séparé par un slash ( / ). La virgule n'est pas acceptée (c'est la tendance actuelle des syntaxes CSS). Un quatrième paramètre est maintenant reconnu : il s'agit d'une couleur de référence à partir de laquelle on calculera la nouvelle couleur.

  • <propriété>: lab(67.5345% -8.6912 -41.601); <propriété>: lab(67.5345% -8.6912 -41.601 / 0.8); l a b α

    Les trois premières valeurs définissent la couleur. La quatrième valeur, optionnelle, est séparée des autres par un slash. Elle définit l'opacité de la couleur. Si cette quatrième valeur n'est pas indiquée, l'opacité est fixée par défaut à 1 (opacité totale).

    1. l : la clarté (Lightness an anglais) de la couleur. Ce doit être un nombre entre 0 et 100, sans unité, ou un pourcentage entre 0% et 100%. 0 est le noir ; 100 est le blanc.
    2. a et b : deux nombres sans unité compris entre -160 et 160. En fait ces deux valeurs peuvent dépasser ces limites mais au delà, la différence de couleur n'est plus sensible. Si a et b sont exprimés en pourcentages, -100% correspond à -125 et 100% correspond à 125.
    3. α : l'opacité de la couleur, un nombre sans unité compris entre 0 et 1 ou un pourcentage entre 0% et 100%. La transparence totale étant notée 0 et l'opacité totale correspondant à 1.
  • <propriété>: lch(52.2345% 72.25 45deg); <propriété>: lch(52.2345% 72.25 45deg / 0.7); l c h α

    Comme pour la fonction lab(), les trois premières valeurs définissent la couleur, et la quatrième valeur (optionnelle) définit l'opacité de cette couleur.

    1. l : la clarté (Lightness) de la couleur. Ce doit être un nombre entre 0 et 100, sans unité, ou un pourcentage entre 0% et 100%. 0 est le noir ; 100 est le blanc.
    2. c : la chrominance : un nombre sans unité compris entre 0 et 230. Les valeurs plus grandes sont autorisées mais ne produisent plus d'effet sensible sur la couleur résultante. Cette valeur peut également être exprimée en pourcentage avec la correspondance 100% = 150.
    3. h : la teinte : un nombre suivi d'une unité d'angle entre 0 et 360deg. Les valeurs en dehors de cette plage sont ramenées à la valeur équivalente incluse dans la plage.
      Voici quelques valeurs approximatives pour la teinte h :
          - Rouge (red, maroon...) = 40.9deg
          - Vert (green, lime...) = 134.4deg
          - Bleu (blue, navy...) = 301.4deg
          - Cyan (cyan, teal...) = 196.5deg
    4. α : l'opacité de la couleur, un nombre sans unité compris entre 0 et 1 ou un pourcentage entre 0% et 100%.
      0 correspond à une couleur totalement transparente, et 1 ou 100% à une couleur totalement opaque.
  • <propriété>: oklab(67.534% -0.3911 -0.2019); <propriété>: oklab(67.534% -0.3911 -0.2019 / 0.5); l a b α

    La fonction oklab() donne un rendu plus perceptif que lab(). Ses paramètres ont la même signification mais évoluent dans des plages différentes.

    1. l : la clarté de la couleur. Ce doit être un nombre sans unité entre 0 (noir) et 100 (blanc) ou un pourcentage entre 0% et 100%.
    2. a et b : deux nombres sans unité compris entre -0.5 et 0.5. Des valeurs plus grandes peuvent être indiquées sans perturber la syntaxe mais l'effet sur la couleur sera insensible. a et b peuvent aussi être exprimés en pourcentages, -100% correspondant à -0.4 et 100% correspondant à 0.4.
    3. α : l'opacité de la couleur, un nombre sans unité compris entre 0 et 1. Les pourcentages ne sont pas autorisés pour cette quatrième valeur. 0 correspond à une couleur totalement transparente, et 1 à une couleur totalement opaque.
  • <propriété>: oklch(52.2345% 72.2 56.2); <propriété>: oklch(52.2345% 72.2 56.2 / 0.7); l c h α

    oklch() donne un rendu plus perceptif que la fonction de base lch().

    1. l : la clarté de la couleur. Ce doit être un nombre sans unité entre 0 et 100. Cela peut aussi être un pourcentage entre 0% et 100%. Le noir correspondant à 0 et le blanc à 100 ou 100%.
    2. c : la chrominance : un nombre sans unité compris entre 0 et 0.5. Les valeurs plus grandes sont autorisées mais ne produisent plus d'effet sensible sur la couleur résultante.
    3. h : la teinte : un nombre suivi d'une unité d'angle entre 0 et 360deg. Les valeurs en dehors de cette plage sont ramenées à la valeur équivalente incluse dans la plage.
    4. α : cette quatrième valeur optionnelle est l'opacité de la couleur, un nombre sans unité compris entre 0 (couleur transparente) et 1 (totalement opaque).

Animation des couleurs.

Il est très facile de créer des animations très fluides avec les fonctions lab(), lch(), oklab() ou oklch(). Pour cet exemple, nous avons utilisé lab() en ne faisant varier que le paramètre h (la teinte).

Il y a un petit piège quand on fait varier la teinte de 0 à 360 degrés : si on ne définit que les valeurs de départ et de fin, certains navigateurs vont au plus court, en ne faisant pas le tour complet des teintes, mais en tournant à l'envers pour passer directement de 0 à 360. Pour éviter ça il faut définir une étape intermédiaire à 50% pour 180 degrés.

Simulateur.

background-color :

Compatibilité des navigateurs.

La définition d'une couleur avec les système L*a*b* ou L*C*H* est maintenant possible sur tous les navigateurs.

1
Fonctions
lab()
lch()
2
Fonctions
oklab()
oklch()
Estimation de la prise en charge globale.
89%
89%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Version testée : 121

Baidu Browser

Version testée : 13.18

Chrome

Version testée : 121

Chrome pour Androïd

Version testée : 121

Edge

Version testée : 121

Firefox

Version testée : 122

Firefox pour Androïd

Version testée : 122

Internet Explorer

Version testée : 11

KaiOS Browser

Version testée : 3

Opéra

Version testée : 106

Opéra Mobile

Version testée : 73

QQ Browser

Version testée : 13.1

Safari

Version testée : 17.3

Safari sur IOS

Version testée : 17.3

Samsung Internet

Version testée : 23

UC Browser pour Androïd

Version testée : 15.5

Opéra mini

Version testée : Toutes
Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Voir aussi, dans le même module de standardisation que lab().

Les spécifications CSS éditées par le W3C sont organisées en modules. lab() fait partie du module CSS - Couleurs (CSS Color Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

color
Définit la couleur de l'avant plan (texte essentiellement).
opacity
Opacité (ou transparence).

Fonctions :

color()
Définit une couleur dans un espace de couleurs autre que sRGB.
⚠
device-cmyk()
Définit une couleur en fonction d'un périphérique, en spécifiant les valeurs cyan, magenta, jaune et noir.
hsl()
Détermine une couleur à partir des paramètres Teinte (Hue), Saturation et Luminosité.
hsla()
Détermine une couleur et sa transparence à partir des paramètres Teinte (Hue), Saturation, Luminosité et Alpha.
hwb()
Définit une couleur à partir de sa teinte et d'une dose de noir et de blanc.
lch()
Définit une couleur dans le système L*C*H*.
oklab()
Définit une couleur dans le système L*a*b* avec une correction perceptive.
oklch()
Définit une couleur dans le système L*C*H* avec une correction perceptive.
rgb()
Détermine une couleur à partir des valeurs de Rouge, de Vert et de Bleu.
rgba()
Détermine une couleur et sa transparence à partir des valeurs de Rouge, de Vert, de Bleu et de la valeur Alpha.

Directives :

@color-profile
Spécifie un profil colorimétrique qui pourra ensuite être utilisé par la fonction color().