lab() et lch() en CSS.

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

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).
• l est un nombre sans unité, compris entre 0 et 100 ou un pourcentage.
• a et 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).

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).
• l est un nombre sans unité, compris entre 0 et 100 ou un pourcentage.
• c est un nombre sans unité, compris entre 0 et 230, ou un pourcentage.
• h est un nombre suivi d'une des unités 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.

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.

• accent-color : Définit la couleur des élément actifs, cochés.
• background-color : Définit la couleur en arrière-plan.
• border-color : Définit la couleur des bordures pour les 4 cotés de l'élément.
• caret-color : Choisit la couleur du marqueur de texte (curseur clignotant).
• color : Définit la couleur de l'avant plan et affecte une valeur à currentcolor.
• column-rule-color : Définit la couleur des filets de séparation de colonnes, dans le contexte d'une mise en page multi-colonnes, d'un conteneur grille ou d'un conteneur flex.
• lighting-color : Définit la couleur de l'éclairage dans le contexte d'un filtre SVG.
• outline-color : Définit la couleur du contour (outline).
• scrollbar-color : Définit deux couleurs qui seront utilisées pour les barres de défilement.
• text-decoration-color : Définit la couleur du trait de décoration (souligné, rayure...).
• text-emphasis-color : Définit la couleur des caractères de mise en exergue.

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 0deg 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 0deg 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 0deg (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 avec la fonction lab().

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.

93%

93%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Historique de la fonction lab().

• Module CSS - Couleurs - Niveau 4

  Ce niveau 4 de la spécification introduit enfin la notion d'espaces colorimétriques, avec un certain nombre d'espaces prédéfinis.
  Introduction du systèmes de couleurs HWB (Hue, White and Black) et des référentiels du CIE (Commission Internationale de l'Éclairage) Lab et LCH.
  Introduction de la fonction color() qui permet de définir une couleur dans un autre espace de couleurs que le sRGB.

  Concernant lab(). Introduction des systèmes de définition des couleurs indépendants de l'appareil : CIE Lab, et LCH.
  Et définition des fonctions correspondantes : lab(), lch(), oklab() et oklch().
  

  05 Juillet 2016

  Document de travail.

  

  05 Juillet 2022

  Candidat à la recommandation.

  

  

• Module CSS - Couleurs - Niveau 5

  Ce niveau 5 de la spécification introduit les espaces de couleurs personnalisés et les couleurs relatives.
  Toutes les fonctions permettant de définir une couleur acceptent maintenant la clause from pour définir une couleur par rapport à une autre.
  La directive @color-profile permet de créer ses propres espaces colorimétriques.
  Ajout de nouvelles fonctions telles que color-mix(), device-cmyk(), light-dark() or contrast-color().

  Concernant lab(). Introduction des couleurs relatives, définities par rapport à une autre couleur.
  Aménagement de la syntaxe des fonctions lab(), lch(), oklab() et oklch() pour satisfaire à cette nouvelle fonctionnalité (clause from).
  

  03 Mars 2020

  Document de travail.

  

  

  

Voir aussi, à propos des couleurs.

Les fonctions lab() et lch(), ainsi que oklab() et oklch() sont décrites dans le module Module CSS - Couleurs, qui regroupe tout ce qui concerne la gestion des couleurs. Les définitions suivantes sont également décrites dans ce module :

Propriétés :

Fonctions :

Directives :

Descripteurs :