Hwb() - Fonction CSS

Schéma syntaxique de hwb().

Sur le diagram, les termes en gras sont les termes prédéfinis de CSS, les autres 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.
• angle est une valeur numérique suivie d'une des unités 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% et b=0%, la couleur rendue correspond à du blanc, quelque soit la valeur de la teinte.
• A l'inverse, lorsque w=0% et b=100%, la couleur rendue correspond à du noir, quelque soit la valeur de la teinte.
• Si les deux valeurs w et b sont fixées à 100% le résultat est du gris, quelque soit la teinte.

La valeur hwb() peut être utilisée avec les propriétés suivantes :

• accent-color : Définit la couleur des élément actifs, cochés.
• background-color : Définit la couleur en 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.
• lighting-color : Définit la couleur de l'éclairage dans le contexte d'un filtre SVG.
• outline-color : Définit la couleur du contour (outline).
• scrollbar-color : Définit deux couleurs qui seront utilisées pour les barres de défilement.
• text-decoration-color : Définit la couleur du trait de décoration (souligné, rayure...).
• text-emphasis-color : Définit la couleur des caractères de mise en exergue.

Syntaxes de la fonction hwb().

• <propriété>: hwb(45deg 10% 10%); h w b

  La fonction hwb() attend trois paramètres obligatoires :

  1. h : une valeur positive ou négative avec une unité d'angle (voir les unités d'angle). Ce paramètre définit la teinte : c'est une valeur sur le cercle chromatique (roue des couleurs).
  2. w : un pourcentage de 0% à 100%. Il indique le pourcentage de blanc (white) qui compose la couleur.
  3. b : un pourcentage de 0% à 100%. Il indique le pourcentage de noir (black) qui compose la couleur.

  Attention ! Pour les valeurs w et b, le symbole de pourcentage est obligatoire, même si la valeur est 0.

• <propriété>: hwb(45deg 50% 50% / 50%); h w b α

  La fonction hwb() accepte un quatrième paramètre optionnel :

  1. α : une valeur entre 0 et 1, ou un pourcentage entre 0% et 100%. Il indique le degré d'opacité de la couleur : 0 étant une couleur totalement transparente, et 1 (ou 100%) 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.

Simulateur avec la fonction hwb()

Support de la fonction hwb().

Remarques :

(1) Une erreur de calcul sur les valeurs des canaux w et b donne un chiffres entre 0 et 1 plutôt qu'entre 0 et 100.

1

Fonction
hwb()

2

Couleurs
relatives

3

Valeurs et
pourcentages

Estimation de la prise en charge globale.

95%

86%

86%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

1

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Historique de la fonction hwb().

• Module CSS - Couleurs - Niveau 4

  Introduction du système HWB (Hue, White, Black) pour la définition des couleurs.
  

  05 Juillet 2016

  Document de travail.

  

  05 Juillet 2022

  Candidat à la recommandation.

  

  

• Module CSS - Couleurs - Niveau 5

  Introduction des couleurs relatives : couleurs définies par rapport à une autre avec la clause from.
  

  03 Mars 2020

  Document de travail.

  

  

  

Voir aussi. Gestion des couleurs.

Comme tout ce qui concerne les couleurs, la fonction hwb() est décrite dans le module CSS Color Module. Les définitions suivantes sont également décrites dans cette spécification :

Propriétés :

Fonctions :

Directives :

Descripteurs :