Funzione CSS hwb()

Definizione e uso

CSS hwb() La funzione utilizza il modello di tonalità-bianchezza-oscurità (HWB) per specificare il colore. È anche possibile aggiungere un canale di trasparenza opzionale (che rappresenta la trasparenza del colore).

Esempio

Definire diverse colori HWB(A):

#p1 {background-color:hwb(60 40% 20% / 0.5);}
#p1 {background-color:hwb(120 40% 20%);}
#p2 {background-color:hwb(120 40% 20%);}
#p3 {background-color:hwb(120 40% 20% / 20%);}
#p4 {background-color:hwb(240 40% 20%);}
#p5 {background-color:hwb(240 50% 10%);}
#p6 {background-color:hwb(240 40% 20% / 0.3);}
#p7 {background-color:hwb(300 40% 20% / 0.5);}
#p8 {background-color:hwb(360 40% 20%);}

#p9 {background-color:hwb(360 90% 0%);}

Prova a te stesso

Sintassi CSS

Sintassi valore assolutohue whiteness blackness / A)
Valore Descrizione
hue

Obbligatorio. Definisce l'angolo sul cerchio delle colori (da 0 a 360) - 0 (o 360) è rosso, 120 è verde, 240 è blu.

Puoi anche usare none (equivalente a 0deg).
whiteness

Obbligatorio. Definisce la biancoce della mescolanza; 0% rappresenta assenza di biancoce, 100% rappresenta biancoce completa.

Puoi anche usare none (equivalente a 0%).
blackness

Obbligatorio. Definisce la neroce della mescolanza; 0% rappresenta assenza di neroce, 100% rappresenta neroce completa.

Puoi anche usare 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).

Puoi anche usare none (che rappresenta canale di trasparenza nullo).

Il valore predefinito è 100%.

Sintassi valore relativo

hwb(from color whiteness blackness / 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.
hue

Obbligatorio. Definisce l'angolo sul cerchio delle colori (da 0 a 360) - 0 (o 360) è rosso, 120 è verde, 240 è blu.

Puoi anche usare none (equivalente a 0deg).
whiteness

Obbligatorio. Definisce la biancoce della mescolanza; 0% rappresenta assenza di biancoce, 100% rappresenta biancoce completa.

Puoi anche usare none (equivalente a 0%).
blackness

Obbligatorio. Definisce la neroce della mescolanza; 0% rappresenta assenza di neroce, 100% rappresenta neroce completa.

Puoi anche usare 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).

Puoi anche usare 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
hwb()
101 101 96 15 87
Mischia numeri e percentuali nei parametri
121 121 122 Non supportato 107

Pagina correlata

Riferimento:Colori CSS

Riferimento:Funzione hsl() di CSS

Riferimento:Funzione lab() di CSS

Riferimento:Funzione lch() di CSS

Riferimento:Funzione CSS oklab()

Riferimento:Funzione CSS oklch()