Funzione lch() di CSS

CSS

Definizione e uso di lch() La funzione definisce i colori nello spazio dei colori LCH (Luminanza - Cianosi - Tono).

Esempi

Definire diversi lch() Colore:

#p1 {background-color:lch(10% 100 130 / 0.5);}
#p2 {background-color:lch(40% 100 130);}
#p3 {background-color:lch(90% 100 130 / 20%);}
#p3 {background-color:lch(10% 160 200);}
#p4 {background-color:lch(10% 160 200);}
#p5 {background-color:lch(40% 160 200);}
#p6 {background-color:lch(90% 160 200 / 0.3);}
#p7 {background-color:lch(10% 130 70 / 0.5);}
#p8 {background-color:lch(40% 130 70);}

#p9 {background-color:lch(90% 130 70);}

Prova da solo

Sintassi CSS

Sintassi assolutaQuesta è la colore originale basato sul colore relativo. C H / Alch(from
) Valore
Questa è la colore originale basato sul colore relativo.

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

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

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

lch(

Obbligatorio. Definisce la cromia (quantità di colore), può essere un numero o una percentuale.

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

Obbligatorio. Definisce l'angolo di tonalità del colore, può essere un valore numerico o un valore angolare.

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

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

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

Il valore predefinito è 100%.

Il valore minimo è 0 (o 0%). Il valore massimo non ha un limite (ma in realtà non supera 230). 100% è uguale a 150.

Sintassi dei valori relativi from Questa è la colore originale basato sul colore relativo. C H / Alch(from
) Valore
Descrizione from

color

Inizia con la parola chiave from, seguita dal valore del colore che rappresenta il colore originale.
Questa è la colore originale basato sul colore relativo.

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

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

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

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

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

-125 rappresenta verde, 125 rappresenta rosso.

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

Obbligatorio. Definisce l'angolo di tonalità del colore, può essere un valore numerico o un valore angolare.

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

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

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

Il valore predefinito è 100%.

Dettagli tecnici

Versione: CSS Color Module Livello 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
lch()
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 lab()

Riferimento:Funzione CSS oklab()

Riferimento:Funzione CSS oklch()