Les fonctions CSS lab() et lch()
Résumé des caractéristiques de la fonction lab()
L*a*b*.Schéma syntaxique des fonctions lab() et lch().
Les termes sur le schéma sont décrits ci-dessous :
colorest 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-lest un nombre sans unité, compris entre0et100ou un pourcentage.number-aetnumber-bsont deux nombres sans unité, compris entre-160et+160, ou des pourcentages.αest un nombre sans unité compris entre0et1, 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 :
colorest 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-lest un nombre sans unité, compris entre0et100ou un pourcentage.number-cest un nombre sans unité, compris entre0et230, ou un pourcentage.angle-hest un nombre suivi d'une unité d'angle.αest un nombre sans unité compris entre0et1, 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 :
Lest la clarté (Lightness en anglais). Plus la clarté est élevée, plus la couleur est claire, le blanc correspondant à une clarté de100.aest la position de la couleur sur l'axe vert-rouge.best la position de la couleur sur l'axe bleu-jaune.
L'espace L*C*H* est lui caractérisé par les trois valeurs :
Lest la clarté (Lightness en anglais).Cest la chrominance. Une valeur faible correspond à une couleur terne, proche du gris, tandis qu'une valeur élevée correspond à une couleur vive.Hest la teinte (Hue en anglais). Elle est exprimée en degrés et indique la position de la couleur sur le cercle des teintes.0degcorrespond à 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 de l'arrière-plan.border-color: Définit la couleur des bordures.caret-color: Choisit la couleur du marqueur de texte (curseur clignotant).color: Définit la couleur de l'avant plan (texte essentiellement).column-rule-color: Définit la couleur des lignes de séparation de colonnes.outline-color: Définit la couleur de l'encadrement (outline).scrollbar-color: Définit deux couleurs qui seront appliquées sur les barres de défilement.text-decoration-color: Définit la couleur du trait de décoration.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).l: la clarté (Lightness an anglais) de la couleur. Ce doit être un nombre entre0et100, sans unité, ou un pourcentage entre0%et100%.0est le noir ;100est le blanc.aetb: deux nombres sans unité compris entre-160et160. En fait ces deux valeurs peuvent dépasser ces limites mais au delà, la différence de couleur n'est plus sensible. Siaetbsont exprimés en pourcentages,-100%correspond à-125et100%correspond à125.α: l'opacité de la couleur, un nombre sans unité compris entre0et1ou un pourcentage entre0%et100%. La transparence totale étant notée0et 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.l: la clarté (Lightness) de la couleur. Ce doit être un nombre entre0et100, sans unité, ou un pourcentage entre0%et100%.0est le noir ;100est le blanc.c: la chrominance : un nombre sans unité compris entre0et230. 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 correspondance100%=150.h: la teinte : un nombre suivi d'une unité d'angle entre0et360deg. Les valeurs en dehors de cette plage sont ramenées à la valeur équivalente incluse dans la plage.
Voici quelques valeurs approximatives pour la teinteh:
- Rouge (red,maroon...) =40.9deg
- Vert (green,lime...) =134.4deg
- Bleu (blue,navy...) =301.4deg
- Cyan (cyan,teal...) =196.5deg
α: l'opacité de la couleur, un nombre sans unité compris entre0et1ou un pourcentage entre0%et100%.
0correspond à une couleur totalement transparente, et1ou100%à 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 quelab(). Ses paramètres ont la même signification mais évoluent dans des plages différentes.l: la clarté de la couleur. Ce doit être un nombre sans unité entre0(noir) et100(blanc) ou un pourcentage entre0%et100%.aetb: deux nombres sans unité compris entre-0.5et0.5. Des valeurs plus grandes peuvent être indiquées sans perturber la syntaxe mais l'effet sur la couleur sera insensible.aetbpeuvent aussi être exprimés en pourcentages,-100%correspondant à-0.4et100%correspondant à0.4.α: l'opacité de la couleur, un nombre sans unité compris entre0et1. Les pourcentages ne sont pas autorisés pour cette quatrième valeur.0correspond à une couleur totalement transparente, et1à 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 baselch().l: la clarté de la couleur. Ce doit être un nombre sans unité entre0et100. Cela peut aussi être un pourcentage entre0%et100%. Le noir correspondant à0et le blanc à100ou100%.c: la chrominance : un nombre sans unité compris entre0et0.5. Les valeurs plus grandes sont autorisées mais ne produisent plus d'effet sensible sur la couleur résultante.h: la teinte : un nombre suivi d'une unité d'angle entre0et360deg. Les valeurs en dehors de cette plage sont ramenées à la valeur équivalente incluse dans la plage.α: cette quatrième valeur optionnelle est l'opacité de la couleur, un nombre sans unité compris entre0(couleur transparente) et1(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.
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.
lab() lch()oklab() oklch()Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
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.
Fonctions.
sRGB.L*C*H*.L*a*b* avec une correction perceptive.L*C*H* avec une correction perceptive.Directives.
color().