Fonction lab() de CSS

CSS

Définition et utilisation de lab() La fonction dans l'espace de couleur CIE Lab spécifie la couleur. Cet espace de couleur représente toutes les couleurs visibles par l'œil humain.

instances

Définir des lab() Couleur :

#p1 {background-color:lab(0 40% 20% / 0.5);}
#p2 {background-color:lab(30 -40% -20%);}
#p3 {background-color:lab(40 30% -20% / 20%);}
#p4 {background-color:lab(50 60% 20%);}
#p5 {background-color:lab(60 50% -10%);}
#p6 {background-color:lab(70 70% -80% / 0.3);}
#p7 {background-color:lab(80 70% 20% / 0.5);}
#p8 {background-color:lab(90 80% -20%);}
#p9 {background-color:lab(100 90% -100%);}

Essayez-le vous-même

Syntaxe CSS

Syntaxe de valeur absolue

lab(L a b / A)
Valeur Description
L

Obligatoire. Définit la luminosité de la couleur, qui peut être un nombre ou un pourcentage entre 0 et 100.

0 (ou 0%) représente le noir, 100 (ou 100%) représente le blanc.

Vous pouvez également utiliser none (équivalent à 0%).
a

Obligatoire. Définit un nombre ou un pourcentage entre -125 et 125, ou entre -100% et 100%.

Définit la distance de la couleur le long de l'axe a, représentant l'intensité rouge-vert de la couleur. -125 représente le vert, 125 représente le rouge.

Vous pouvez également utiliser none (équivalent à 0%).
b

Obligatoire. Définit un nombre ou un pourcentage entre -125 et 125, ou entre -100% et 100%.

Définit la distance de la couleur le long de l'axe b, représentant l'intensité jaune-bleu de la couleur.

-125 représente le bleu, 125 représente le jaune.

Vous pouvez également utiliser none (équivalent à 0%).
/ A

Optionnel. Représente la valeur du canal de transparence de la couleur (0% ou 0 représentant une transparence complète, 100% ou 100 représentant une opacité complète).

Vous pouvez également utiliser none (représentant un canal de transparence absent).

La valeur par défaut est de 100%.

Syntaxe de valeur relative

lab(from color L a b / A)
Valeur Description
from color

Commence par le mot-clé from, suivi de la valeur de la couleur originale.

C'est la couleur originale sur laquelle se base la couleur relative.
L

Obligatoire. Définit la luminosité de la couleur, qui peut être un nombre ou un pourcentage entre 0 et 100.

0 (ou 0%) représente le noir, 100 (ou 100%) représente le blanc.

Vous pouvez également utiliser none (équivalent à 0%).
a

Obligatoire. Définit un nombre ou un pourcentage entre -125 et 125, ou entre -100% et 100%.

Définit la distance de la couleur le long de l'axe a, représentant l'intensité rouge-vert de la couleur.

-125 représente le vert, 125 représente le rouge.

Vous pouvez également utiliser none (équivalent à 0%).
b

Obligatoire. Définit un nombre ou un pourcentage entre -125 et 125, ou entre -100% et 100%.

Définit la distance de la couleur le long de l'axe b, représentant l'intensité jaune-bleu de la couleur.

-125 représente le bleu, 125 représente le jaune.

Vous pouvez également utiliser none (équivalent à 0%).
/ A

Optionnel. Représente la valeur du canal de transparence de la couleur (0% ou 0 représentant une transparence complète, 100% ou 100 représentant une opacité complète).

Vous pouvez également utiliser none (représentant un canal de transparence absent).

La valeur par défaut est de 100%.

Détails techniques

Version : CSS Color Module Level 4

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Chrome Edge Firefox Safari Opera
lab()
111 111 113 15 97
Mélangez des nombres et des pourcentages dans les paramètres
116 116 113 16.2 102

Pages associées

Référence :Couleurs CSS

Référence :Fonction hsl() CSS

Référence :Fonction CSS hwb()

Référence :Fonction CSS lch()

Référence :Fonction CSS oklab()

Référence :Fonction CSS oklch()