Lafonction de type<color>CSShwb() exprime unespace de couleursRGB donné selon sa teinte, sa blancheur et sa noirceur. Une composante alpha optionnelle représente l'opacité de la couleur.

Exemple interactif

background: hwb(12 50% 0%);

background: hwb(50deg 30% 40%);

background: hwb(0.5turn 10% 0% / 0.5);

background: hwb(0 100% 0% / 50%);

<section>  <div></div></section>

#example-element {  min-width: 100%;  min-height: 100%;  padding: 10%;}

Description

Cette fonction de couleur dans l'espace colorimétriquesRGB est définie par une valeur d'angle<hue>, une valeur de blancheur, une valeur de noirceur et, optionnellement, une valeur alpha représentant la transparence de la couleur.

Les angles correspondant à des teintes particulières diffèrent selon les espaces colorimétriques sRGB (utilisé parhsl() ethwb()), CIELAB (utilisé parlch()) et Oklab (utilisé paroklch()).hwb() est dans le même espace colorimétrique quehsl(), et a donc les mêmes angles de teinte. Consultez la page de référence<hue> pour plus de détails et d'exemples, ou essayez de modifier les teintes sur lesélecteur de couleur pour voir le résultat.

Une couleurhwb() est complètement saturée lorsque ses valeurs de blancheur (W) et de noirceur (B) sont toutes deux à0. Pour toute valeur de teinteH,hwb(H 0% 0%) correspond à la même couleur quehsl(H 100% 50%). Augmenter la valeur de blancheur éclaircit la couleur. Augmenter la noirceur assombrit la couleur.

Lorsque la noirceur et la blancheur sont toutes deux supérieures à 0, la couleur devient atténuée, tendant vers le gris. Lorsque la somme de la blancheur et de la noirceur ajoutées est égale ou supérieure à 100% — autrement dit, siW + B >= 100%, la fonction de couleur définit une nuance de gris. Lorsque la somme des deux valeurs est supérieure à 100% (W + B > 100%), les valeurs de blancheur et de noirceur du gris sont effectivement normalisées commeW / (W + B) etB / (W + B) respectivement.

Syntaxe

/* Valeurs absolues */hwb(194 0% 0%)hwb(194 0% 0% / .5)/* Valeurs relatives */hwb(from green h w b / 0.5)hwb(from #123456 h calc(w + 30) b)hwb(from lch(40% 70 240deg) h w calc(b - 30))

Valeurs

Vous trouverez ci-dessous la description des valeurs autorisées pour les couleurs absolues et lescouleurs relatives.

Syntaxe des valeurs absolues

hwb(H W B[ / A])

Les paramètres sont les suivants :

H

Un nombre (<number>), un<angle> ou le mot-clénone (équivalent à0deg dans ce cas) représentant l'angle de<hue> de la couleur.

W

Un pourcentage (<percentage>) représentant la blancheur de la couleur ou le mot-clénone (équivalent à0% dans ce cas) à mélanger.0% signifie aucune blancheur.100% signifie blancheur totale siB vaut0, sinon les valeurs deW etB sont normalisées.

B

Un pourcentage (<percentage>) représentant la noirceur de la couleur ou le mot-clénone (équivalent à0% dans ce cas) à mélanger.0% signifie aucune noirceur.100% signifie noirceur totale siW vaut0, sinon les valeurs deW etB sont normalisées.

AFacultatif

Une valeur<alpha-value> représentant la valeur du canal alpha de la couleur, où le nombre0 correspond à0% (totalement transparent) et1 à100% (totalement opaque). De plus, le mot-clénone peut être utilisé pour indiquer explicitement l'absence de canal alpha. Si la valeur du canalA n'est pas explicitement spécifiée, elle vaut par défaut 100 %. Si elle est présente, la valeur est précédée d'une barre oblique (/).

Syntaxe des valeurs relatives

hwb(from <color> H W B[ / A])

Les paramètres sont les suivants :

from <color>

Le mot-cléfrom est toujours inclus lors de la définition d'une couleur relative, suivi d'une valeur<color> représentant lacouleur d'origine. Il s'agit de la couleur originale sur laquelle la couleur relative est basée. La couleur d'origine peut êtren'importe quelle syntaxe<color> valide, y compris une autre couleur relative.

H

Un nombre (<number>), un pourcentage (<angle>) ou le mot-clénone (équivalent à0deg dans ce cas) représentant l'angle de<hue> de la couleur de sortie.

W

Un pourcentage (<percentage>) représentant la blancheur de la couleur ou le mot-clénone (équivalent à0% dans ce cas) à mélanger.0% signifie aucune blancheur.100% signifie blancheur totale siB vaut0, sinon les valeurs deW etB sont normalisées.

B

Un pourcentage (<percentage>) représentant la noirceur de la couleur ou le mot-clénone (équivalent à0% dans ce cas) à mélanger.0% signifie aucune noirceur.100% signifie noirceur totale siW vaut0, sinon les valeurs deW etB sont normalisées.

AFacultatif

Une valeur<alpha-value> représentant la valeur du canal alpha de la couleur de sortie, où le nombre0 correspond à0% (totalement transparent) et1 à100% (totalement opaque). De plus, le mot-clénone peut être utilisé pour indiquer explicitement l'absence de canal alpha. Si la valeur du canalA n'est pas explicitement spécifiée, elle prend par défaut la valeur du canal alpha de la couleur d'origine. Si elle est présente, la valeur est précédée d'une barre oblique (/).

Définition des composants de canal de sortie des couleurs relatives

Lors de l'utilisation de la syntaxe de couleur relative dans une fonctionhwb(), le navigateur convertit la couleur d'origine en couleur HWB équivalente (si elle n'est pas déjà spécifiée comme telle). La couleur est définie comme trois valeurs de canal de couleur distinctes —h (teinte),w (blanc) etb (noir) — plus une valeur de canal alpha (alpha). Ces valeurs de canal sont mises à disposition dans la fonction pour être utilisées lors de la définition des valeurs de canal de couleur de sortie :

• La valeur de canalh est résolue en une valeur<number> entre0 et360, inclus.
• Les canauxw etb sont chacun résolus en une valeur<number> entre0 et100, inclus.
• Le canalalpha est résolu en une valeur<number> entre0 et1, inclus.

Lors de la définition d'une couleur relative, les différents canaux de la couleur de sortie peuvent être exprimés de plusieurs façons différentes. Ci-dessous, nous allons étudier quelques exemples pour illustrer ceci.

Dans les deux premiers exemples ci-dessous, nous utilisons la syntaxe de couleur relative. Cependant, le premier produit la même couleur que la couleur d'origine et le second produit une couleur qui n'est pas du tout basée sur la couleur d'origine. Ils ne créent pas vraiment de couleurs relatives ! Il est peu probable que vous les utilisiez dans du vrai code, et vous utiliseriez plutôt une valeur de couleur absolue. Nous avons inclus ces exemples comme point de départ pour apprendre la syntaxehwb() relative.

Commençons par une couleur d'originehsl(0 100% 50%) (équivalente àhwb(0 0% 0%)). La fonction suivante produit la même couleur que la couleur d'origine — elle utilise les valeurs de canalh,w etb de la couleur d'origine (0,0% et0%) comme valeurs de canal de sortie :

hwb(from hsl(0 100% 50%) h w b)

La couleur de sortie de cette fonction est l'équivalent sRGBcolor() dehwb(0 0% 0%) :color(srgb 1 0 0).

La fonction suivante utilise des valeurs absolues pour les valeurs de canal de la couleur de sortie, produisant une couleur complètement différente, non basée sur la couleur d'origine :

hwb(from hsl(0 100% 50%) 240 52% 12%)

Dans le cas ci-dessus, la couleur de sortie est l'équivalent sRGBcolor() dehwb(240 52% 12%) :color(srgb 0.52 0.52 0.88).

La fonction suivante crée une couleur relative, basée sur la couleur d'origine :

hwb(from hsl(0 100% 50%) h 30% b)

Cet exemple :

• Convertit la couleur d'origine (hsl(0 100% 50%)) en équivalenthwb() (hwb(0 0% 0%)).
• Définit les valeurs de canalH etB pour la couleur de sortie à celles des valeurs de canalH etB de l'équivalenthwb() de la couleur d'origine — ces valeurs sont0 et0%, respectivement.
• Définit la valeur de canalW de la couleur de sortie à une nouvelle valeur non basée sur la couleur d'origine :30%.

La couleur de sortie finale est l'équivalent dehwb(0 30% 0%) dans l'espace de couleur sRGB —color(srgb 1 0.3 0.3).

Dans les exemples que nous avons vus jusqu'à présent dans cette section, les canaux alpha n'ont pas été explicitement définis pour les couleurs d'origine ou de sortie. Lorsque le canal alpha de la couleur de sortie n'est pas défini, il prend par défaut la même valeur que le canal alpha de la couleur d'origine. Lorsque le canal alpha de la couleur d'origine n'est pas défini (et qu'il ne s'agit pas d'une couleur relative), il prend par défaut la valeur1. Par conséquent, les valeurs de canal alpha d'origine et de sortie sont1 pour les exemples ci-dessus.

Regardons quelques exemples qui définissent les valeurs de canal alpha d'origine et de sortie. Le premier définit que la valeur de canal alpha de sortie est la même que la valeur de canal alpha d'origine, tandis que le second définit une valeur de canal alpha de sortie différente, non liée à la valeur de canal alpha d'origine.

hwb(from hsl(0 100% 50% / 0.8) h w b / alpha)/* Couleur de sortie calculée: color(srgb 1 0 0 / 0.8) */hwb(from hsl(0 100% 50% / 0.8) h w b / 0.5)/* Couleur de sortie calculée: color(srgb 1 0 0 / 0.5) */

Dans l'exemple suivant, la couleur d'originehsl() est à nouveau convertie en représentationhwb() —hwb(0 0% 0%). Des calculscalc() sont appliqués aux valeursH,W,B etA, et la couleur de sortie finale est l'équivalent dehwb(120 25% 10% / 0.9 dans l'espace de couleur sRGB :color(srgb 0.25 0.9 0.25 / 0.9).

hwb(from hsl(0 100% 50%) calc(h + 120) calc(w + 25) calc(b + 10) / calc(alpha - 0.1))

Syntaxe formelle

<hwb()> =
hwb([from<color>]?[<hue>|none][<percentage>|<number>|none][<percentage>|<number>|none][ /[<alpha-value>|none]]?)

<hue> =
<number>|
<angle>

<alpha-value> =
<number>|
<percentage>

Exemples

Utilisation des couleurs relatives avechwb()

Cet exemple met en forme trois éléments HTML<div> avec des couleurs d'arrière-plan différentes. Celui du milieu reçoit la--base-color non modifiée, tandis que ceux de gauche et de droite reçoivent des variantes éclaircie et assombrie de cette--base-color.

Ces variantes sont définies en utilisant des couleurs relatives — lapropriété personnalisée--base-color est passée dans une fonctionhwb(), et les couleurs de sortie ont leurs canaux blanc et noir modifiés pour obtenir l'effet souhaité via une fonctioncalc(). La couleur éclaircie a 30% ajoutés au canal blanc, et la couleur assombrie a 30% ajoutés au canal noir.

<div>  <div></div>  <div></div>  <div></div></div>

CSS

#container {  display: flex;  width: 100vw;  height: 100vh;  box-sizing: border-box;}.item {  flex: 1;  margin: 20px;}

:root {  --base-color: orange;}/* Selon la spécification, les valeurs w et b devraient être résolues en un   nombre entre 0-100.   Cependant, Chrome 121+ les résout incorrectement en nombres entre 0- d'où   l'utilisation actuelle de calculs comme w + 0.3 au lieu de w + 30 */#one {  background-color: hwb(from var(--base-color) h calc(w + 0.3) b);}#two {  background-color: var(--base-color);}#three {  background-color: hwb(from var(--base-color) h w calc(b + 0.3));}/* Utilise @supports pour ajouter la prise en charge de l'ancienne syntaxe   qui nécessite que les unités % soient définies dans les calculs w et b.   Ceci est requis pour Safari 16.4+. */@supports (color: hwb(from red h w calc(b + 30%))) {  #one {    background-color: hwb(from var(--base-color) h calc(w + 30%) b);  }  #three {    background-color: hwb(from var(--base-color) h w calc(b + 30%));  }}

Résultat

La sortie est la suivante :

Spécifications

Compatibilité des navigateurs

Voir aussi

• <color> : Pour une liste de toutes les notations de couleur
• Outil de conversion de format de couleur
• Utiliser les couleurs relatives
• Module Couleurs CSS
• <hue> : le type de donnée représentant un angle de teinte d'une couleur