Recommandation de cours :

Page précédente Fonction hue-rotate() CSS
Page suivante Fonction hypot() CSS
Retour au niveau supérieur Manuel de fonctions CSS

Fonction hwb() de CSS

Définition et utilisation de CSS hwb() La fonction CSS utilise le modèle de teinte-éclat-noir (HWB) pour spécifier la couleur. Elle peut également inclure un canal de transparence optionnel (représentant la transparence de la couleur).

Exemple

Définir différentes couleurs HWB(A) :

#p1 {background-color:hwb(60 40% 20% / 0.5);}
#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%);}

Essayez-le vous-même

Syntaxe CSS

Syntaxe de valeur absolue

hwb(hue whiteness blackness / A)

Valeur	Description
hue	Obligatoire. Définit l'angle sur la roue des couleurs (de 0 à 360) - 0 (ou 360) est le rouge, 120 est le vert, 240 est le bleu. Vous pouvez également utiliser none (équivalent à 0deg).
whiteness	Obligatoire. Définit la blancheur de la mixture ; 0% représente une absence de blancheur, 100% représente une blancheur complète. Vous pouvez également utiliser none (équivalent à 0%).
blackness	Obligatoire. Définit la noirceur de la mixture ; 0% représente une absence de noirceur, 100% représente une noirceur complète. Vous pouvez également utiliser none (équivalent à 0%).
/ A	Optionnel. Représente la valeur du canal de transparence de la couleur (0% ou 0 représente une transparence complète, 100% ou 100 représente une opacité complète). Vous pouvez également utiliser none (représentant une transparence nulle). La valeur par défaut est de 100%.

Syntaxe de valeur relative

hwb(from color whiteness blackness / A)

Valeur	Description
from color	Commence par le mot-clé from, suivi de la valeur de couleur de la couleur originale. C'est la couleur originale sur laquelle se base la couleur relative.
hue	Obligatoire. Définit l'angle sur la roue des couleurs (de 0 à 360) - 0 (ou 360) est le rouge, 120 est le vert, 240 est le bleu. Vous pouvez également utiliser none (équivalent à 0deg).
whiteness	Obligatoire. Définit la blancheur de la mixture ; 0% représente une absence de blancheur, 100% représente une blancheur complète. Vous pouvez également utiliser none (équivalent à 0%).
blackness	Obligatoire. Définit la noirceur de la mixture ; 0% représente une absence de noirceur, 100% représente une noirceur complète. Vous pouvez également utiliser none (équivalent à 0%).
/ A	Optionnel. Représente la valeur du canal de transparence de la couleur (0% ou 0 représente une transparence complète, 100% ou 100 représente une opacité complète). Vous pouvez également utiliser none (représentant une transparence nulle). La valeur par défaut est de 100%.