CSS - Fonction hwb()

Description de la fonction hwb().

Attention ! Le système HWB est encore peu reconnu par les navigateurs.

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.

La fonction hwb() peut être utilisée avec :

• 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).
• 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().

• color: hwb(45deg, 50%, 50%); 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 angulaires en CSS). 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.
• color: hwb(45deg, 50%, 50%, 50%); h w b a

  La fonction hwba() attend un paramètre supplémentaire par rapport à hwb() :

  1. a : une valeur entre 0 et 1, ou un pourcentage entre 0% et code>100%. Il indique le degré d'opacité de la couleur : 0 étant une couleur totalement transparente, et 1 (ou 100%) une couleur totalement opaque.

Simulateur.

Voir aussi...

Couleurs - Propriété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).
• 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.

Couleurs - Fonctions.

• hsl() : Détermine une couleur à partir des paramètres Teinte (Hue), Saturation et Luminosité.
• hsla() : Détermine une couleur et sa transparence à partir des paramètres Teinte (Hue), Saturation, Luminosité et Alpha.
• hue-rotate() : Change les couleurs d'une image (rotation des teintes).
• rgb() : Détermine une couleur à partir des valeurs de Rouge, de Vert et de Bleu.
• rgba() : Détermine une couleur et sa transparence à partir des valeurs de Rouge, de Vert, de Bleu et de la valeur Alpha.