hwb() - Fonction CSS
Résumé des caractéristiques de la fonction hwb()
w
et b
. Calculés par rapport à 1.Description de la fonction hwb()
.
La fonction hwb()
définit une couleur à partir de trois paramètres qui sont la teinte,
le taux de blanc et le taux de noir.
Le système HWB
a été développé pour qu'il soit plus intuitif de déterminer les paramètres d'une couleur ou d'ajuster une couleur.
Le principe est de choisir d'abord une teinte en se basant sur une roue des couleurs comme celle qui est représentée ci-dessus (encore appelée cercle chromatique),
puis d'ajouter plus ou moins de blanc et/ou de noir pour obtenir la couleur exacte recherchée.
Ceci se traduit par trois paramètres, qui sont généralement dénommés de la façon suivante :
h
pour hue (teinte en anglais).w
pour white (blanc en anglais).b
pour black (noir en anglais).
Le système hwb
présente les caractéristiques suivantes :
- Lorsque
w=100%
etb=0%
, la couleur rendue correspond à du blanc, quelque soit la valeur de la teinte. - A l'inverse, lorsque
w=0%
etb=100%
, la couleur rendue correspond à du noir, quelque soit la valeur de la teinte. - Si les deux valeurs
w
etb
sont fixées à100%
le résultat est du gris, quelque soit la teinte.
La fonction hwb() peut être utilisée avec :
accent-color
: Définit la couleur des élément actifs, cochés.background-color
: Définit la couleur de l'arrière-plan.border-color
: Définit la couleur des bordures.caret-color
: Choisit la couleur du marqueur de texte (curseur clignotant).color
: Définit la couleur de l'avant plan (texte essentiellement).column-rule-color
: Définit la couleur des lignes de séparation de colonnes.outline-color
: Définit la couleur de l'encadrement (outline).scrollbar-color
: Définit deux couleurs qui seront appliquées sur les barres de défilement.text-decoration-color
: Définit la couleur du trait de décoration.text-emphasis-color
: Définit la couleur des caractères de mise en exergue.
Syntaxe de la fonction hwb()
.
h
, w
et b
représentent respectivement la valeur de la teinte (Hue), du blanc (White) et du noir (Black).
α
est l'opacité de la couleur.
c
et une couleur de référence éventuelle, introduite par le mot-clé from
.
hwb(
)
- ❰ propriété ❱: hwb(45deg 10% 10%); h w b
La fonction
hwb()
attend trois paramètres obligatoires :h
: une valeur positive ou négative avec une unité d'angle (voir les unités CSS d'angle). Ce paramètre définit la teinte : c'est une valeur sur le cercle chromatique (roue des couleurs).w
: un pourcentage de0%
à100%
. Il indique le pourcentage de blanc (white) qui compose la couleur.b
: un pourcentage de0%
à100%
. Il indique le pourcentage de noir (black) qui compose la couleur.
Attention ! Pour les valeurs
w
etb
, le symbole de pourcentage est obligatoire, même si la valeur est0
. - ❰ propriété ❱: hwb(45deg 50% 50% / 50%); h w b α
La fonction
hwb()
accepte un quatrième paramètre optionnel :α
: une valeur entre 0 et 1, ou un pourcentage entre0%
et100%
. Il indique le degré d'opacité de la couleur :0
étant une couleur totalement transparente, et 1 (ou100%
) une couleur totalement opaque.
- ❰ propriété ❱: hwb(from green h w 50%); c h w b
Définition d'une couleur par rapport à une autre couleur. Le mot
from
introduit la couleur de référence. Les autres paramètres peuvent alors être :- Les lettres
h
,w
,b
pour garder la valeur de la couleur de référence. - Une valeur numérique ou un pourcentage, pour forcer ce paramètre à la valeur indiquée.
- Une formule avec la fonction
calc()
pour ajuster un paramètre par rapport à celui de la couleur de référence.
Exemples :
hwb(from red h w b)
Redonne la couleur de référence (tous les paramètres sont inchangés).
hwb(from red h 90% b)
Garde la teinte de la couleur de référence mais l'éclaircit fortement (white = 90%).
hwb(from red calc(h + 180) w b)
Trouve la couleur complémentaire de la couleur de référence. - Les lettres
Simulateur.
Prise en charge par les navigateurs (compatibilité).
HWB
: Hue (teinte), White (blanc) et Black (noir), et donc compatibilité de
la fonction CSS hwb()
.
from
de la fonction CSS hwb()
.
hwb()
avec des valeurs numériques et des pourcentages.
hwb()
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que hwb()
.
Les spécifications CSS éditées par le W3C sont organisées en modules. hwb()
fait partie du Module CSS - Couleurs (CSS Color Module). Les définitions suivantes sont également décrites dans ce même module.
Propriétés.
Fonctions.
sRGB
.L*a*b*
.L*C*H*
.L*a*b*
avec une correction perceptive.L*C*H*
avec une correction perceptive.Directives.
color()
.