Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

hwb() - Fonction CSS

hwb()

Résumé des caractéristiques de la fonction hwb()

Description rapide
Définit une couleur à partir de sa teinte et d'une dose de noir et de blanc.
Statut
Standard
Pourcentages
Utilisables pour les paramètres w et b. Calculés par rapport à 1.
Module W3C
Module CSS - Couleurs
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: WD (document de travail)

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.

Roue des couleurs pour la fonction hwb()

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 fonction hwb() peut être utilisée avec :

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é code>from.

hwb(
 from c from c h w b h w b / α / α
)
  • ❰ 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 CSS 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 a

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

    1. a : 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.

background-color :

Prise en charge par les navigateurs (compatibilité).

Colonne 1
Prise en cahrge de la définition des couleurs en mode HWB : Hue (teinte), White (blanc) et Black (noir), et donc compatibilité de la fonction CSS hwb().
Colonne 2
Prise en charge de la définition d'une couleur relativement à une autre couleur (paramètre from de la fonction CSS hwb().
Colonne 2
Prise en charge de la syntaxe de hwb() avec des valeurs numériques et des pourcentages.
1
hwb()
2
Relative colors
3
Mixed types
Estimation de la prise en charge en pourcentage du parc actuel.
93%
43%

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.

  • Définit la couleur de l'avant plan (texte essentiellement).
  • Opacité (ou transparence).

Fonctions.

  • Définit une couleur dans un espace de couleurs autre que sRGB.
  • Détermine une couleur à partir des paramètres Teinte (Hue), Saturation et Luminosité.
  • Détermine une couleur et sa transparence à partir des paramètres Teinte (Hue), Saturation, Luminosité et Alpha.
  • Définit une couleur dans le système L*a*b*.
  • Définit une couleur dans le système L*C*H*.
  • Définit une couleur dans le système L*a*b* avec une correction perceptive.
  • Définit une couleur dans le système L*C*H* avec une correction perceptive.
  • Détermine une couleur à partir des valeurs de Rouge, de Vert et de Bleu.
  • Détermine une couleur et sa transparence à partir des valeurs de Rouge, de Vert, de Bleu et de la valeur Alpha.

Directives.

  • Spécifie un profil colorimétrique qui pourra ensuite être utilisé par la fonction color().