Funzione lab() di CSS

CSS

Definizione e uso di lab() La funzione definisce i colori nello spazio dei colori CIE Lab. Questo spazio dei colori rappresenta tutti i colori visibili all'occhio umano.

Esempi

Definire lab() Colore:

#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%);}

Prova a te stesso

Sintassi CSS

Sintassi assoluta

lab(L a b / A)
Valore Descrizione
L

Obbligatorio. Definisce la luminosità del colore, può essere un numero o una percentuale tra 0 e 100.

0 (o 0%) rappresenta il nero, 100 (o 100%) rappresenta il bianco.

Può anche essere utilizzato none (equivalente a 0%).
a

Obbligatorio. Definisce un numero o una percentuale tra -125 e 125, o tra -100% e 100%.

Definisce la distanza del colore lungo l'asse a, rappresentando la purezza del colore rosso-verde. -125 rappresenta il verde, 125 rappresenta il rosso.

Può anche essere utilizzato none (equivalente a 0%).
b

Obbligatorio. Definisce un numero o una percentuale tra -125 e 125, o tra -100% e 100%.

Definisce la distanza del colore lungo l'asse b, rappresentando la purezza del colore giallo-blu.

-125 rappresenta il blu, 125 rappresenta il giallo.

Può anche essere utilizzato none (equivalente a 0%).
/ A

Opzionale. Rappresenta il valore del canale di trasparenza del colore (0% o 0 rappresenta trasparenza completa, 100% o 100 rappresenta opacità completa).

Può anche essere utilizzato none (che rappresenta canale di trasparenza nullo).

Il valore predefinito è 100%.

Sintassi dei valori relativi

lab(from color L a b / A)
Valore Descrizione
from color

Inizia con il termine from, seguito dal valore del colore che rappresenta il colore originale.

Questo è il colore originale su cui si basano i colori relativi.
L

Obbligatorio. Definisce la luminosità del colore, può essere un numero o una percentuale tra 0 e 100.

0 (o 0%) rappresenta il nero, 100 (o 100%) rappresenta il bianco.

Può anche essere utilizzato none (equivalente a 0%).
a

Obbligatorio. Definisce un numero o una percentuale tra -125 e 125, o tra -100% e 100%.

Definisce la distanza del colore lungo l'asse a, rappresentando la purezza del colore rosso-verde.

-125 rappresenta il verde, 125 rappresenta il rosso.

Può anche essere utilizzato none (equivalente a 0%).
b

Obbligatorio. Definisce un numero o una percentuale tra -125 e 125, o tra -100% e 100%.

Definisce la distanza del colore lungo l'asse b, rappresentando la purezza del colore giallo-blu.

-125 rappresenta il blu, 125 rappresenta il giallo.

Può anche essere utilizzato none (equivalente a 0%).
/ A

Opzionale. Rappresenta il valore del canale di trasparenza del colore (0% o 0 rappresenta trasparenza completa, 100% o 100 rappresenta opacità completa).

Può anche essere utilizzato none (che rappresenta canale di trasparenza nullo).

Il valore predefinito è 100%.

Dettagli tecnici

Versione: CSS Color Module Level 4

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente la funzione per la prima volta.

Chrome Edge Firefox Safari Opera
lab()
111 111 113 15 97
Mescolare numeri e percentuali nei parametri
116 116 113 16.2 102

Pagine correlate

Riferimento:Colore CSS

Riferimento:Funzione hsl() di CSS

Riferimento:Funzione CSS hwb()

Riferimento:Funzione CSS lch()

Riferimento:Funzione CSS oklab()

Riferimento:Funzione CSS oklch()