hwb() - Fonction CSS
Résumé des caractéristiques de la fonction hwb()
w
et b
. Calculés par rapport à 1.Schéma syntaxique de hwb()
.
SLes termes présents sur le schéma sont décrits ci-dessous :
color
et une couleur de référence éventuelle, introduite par le mot-cléfrom
. Cette couleur peut être spécifiée dans l'une des multiples syntaxes acceptées par CSS (voir les couleurs CSS.angle
est une valeur numérique suivie d'une unité d'angle. Elle correspond à la teinte.%
sont des pourcentages représentant les valeurs de blanc (White) et de noir (Black).number-α
est un nombre entre 0 et 1 représentant l'opacité de la couleur. Introduit par le caractère slash
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()
.
- ❰ 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 Logo Androïd Brower](/v2-img/logo-android-browser.png)
Androïd Brower
![Baidu Browser Logo Baidu Browser](/v2-img/logo-baidu-browser.png)
Baidu Browser
![Chrome Logo Chrome](/v2-img/logo-chrome.png)
Chrome
![Chrome pour Androïd Logo Chrome pour Androïd](/v2-img/logo-chrome-for-android.png)
Chrome pour Androïd
![Edge Logo Edge](/v2-img/logo-edge.png)
Edge
![Firefox Logo Firefox](/v2-img/logo-firefox.png)
Firefox
![Firefox pour Androïd Logo Firefox pour Androïd](/v2-img/logo-firefox-for-android.png)
Firefox pour Androïd
![Internet Explorer Logo Internet Explorer](/v2-img/logo-ie.png)
Internet Explorer
![KaiOS Browser Logo KaiOS Browser](/v2-img/logo-kaios-browser.png)
KaiOS Browser
![Opéra Logo Opéra](/v2-img/logo-opera.png)
Opéra
![Opéra Mobile Logo Opéra Mobile](/v2-img/logo-opera-mobile.png)
Opéra Mobile
![QQ Browser Logo QQ Browser](/v2-img/logo-qq-browser.png)
QQ Browser
![Safari Logo Safari](/v2-img/logo-safari.png)
Safari
![Safari sur IOS Logo Safari sur IOS](/v2-img/logo-safari-on-ios.png)
Safari sur IOS
![Samsung Internet Logo Samsung Internet](/v2-img/logo-samsung-internet.png)
Samsung Internet
![UC Browser pour Androïd Logo UC Browser pour Androïd](/v2-img/logo-uc-browser-for-android.png)
UC Browser pour Androïd
![Oméra mini Logo Oméra mini](/v2-img/logo-opera-mini.png)
Oméra mini
Voir aussi, dans le même module de standardisation que hwb()
.
Les spécifications CIE é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()
.