Couleurs HWB : blancheur et noirceur en CSS

Considérez HWB comme un modèle d’édition sRGB

HWB signifie teinte, blancheur et noirceur. CSS Color 4 le définit comme une autre manière d’indiquer une couleur sRGB : partir de la teinte sRGB entièrement saturée, ajouter une proportion de blanc et réserver une proportion au noir. Le résultat reste dans sRGB ; HWB ne donne donc pas accès à Display P3 ni aux autres gamuts étendus. Son intérêt est opérationnel : un sélecteur maintient une teinte stable pendant que la personne règle la part provenant des extrémités blanche et noire.

• La teinte suit le même cercle que HSL, avec le même espacement visuel inégal entre angles numériques.
• La blancheur augmente le canal sRGB minimal et rapproche le résultat du blanc tout en restant opaque.
• La noirceur réduit le canal maximal disponible et rapproche le résultat du noir tout en restant opaque.
• HWB se résout en sRGB ; une valeur HEX ou rgb() équivalente représente donc tout résultat HWB opaque.
• Les coordonnées HWB sont des contrôles d’édition, pas des preuves d’accessibilité ; le contraste se calcule depuis les couleurs rendues résolues.

Utilisez la syntaxe espacée et gardez alpha séparé

La fonction s’écrit hwb(H W B / A). La teinte accepte un angle ou un nombre sans unité interprété en degrés ; les angles dépassant un tour reviennent à la même position. Blancheur et noirceur sont plus claires en pourcentages. Alpha suit une barre et vaut 100% s’il est omis. Contrairement à hsl(), HWB n’a pas d’ancienne forme à virgules : celles-ci rendent hwb() invalide. CSS moderne accepte aussi none pour une composante absente, mais none n’est pas zéro et concerne surtout l’interpolation.

:root {
  --action: hwb(210 10% 20%);
  --action-translucent: hwb(210 10% 20% / 60%);
  --action-wrapped-hue: hwb(570deg 10% 20%); /* Same hue as 210deg */
}

/* Invalid: HWB does not have a comma syntax. */
.invalid-example {
  color: hwb(210, 10%, 20%);
}

Augmentez la blancheur et surveillez le seuil du premier plan

Maintenez la teinte à 210 degrés et la noirceur à 20%, puis augmentez la blancheur. Le plus grand canal résolu reste à 80% tandis que les petits canaux montent. Le tableau suit l’algorithme HWB vers sRGB de CSS Color 4, arrondit chaque canal à la valeur 8 bits la plus proche, puis calcule le contraste depuis ce HEX avec la formule de luminance WCAG. AA exige au moins 4,5:1 pour le texte normal.

• Pour cette teinte et cette noirceur, le premier plan bascule entre 10% et 20% de blancheur.
• À 10%, le noir n’atteint que 4,37:1 et le blanc 4,81:1 ; arrondir le pourcentage d’entrée ne rend pas les deux sûrs.
• L’étape 40% donne 6,99:1 au noir, ce qui satisfait AA mais reste juste sous le seuil AAA de 7:1 pour le texte normal.
• Testez chaque état sémantique séparément ; ne supposez pas un premier plan unique sûr sur toute une gamme HWB.
• Gardez les rapports non arrondis pour décider et n’arrondissez que la documentation affichée.

Augmentez la noirceur sans la confondre avec l’opacité

Maintenez maintenant la teinte à 210 degrés et la blancheur à 10%. Accroître la noirceur réduit la contribution disponible de la teinte pure, tandis que le canal minimal reste proche de 10%. Toutes les lignes demeurent entièrement opaques. C’est différent d’une baisse d’alpha : une couleur translucide révèle un fond inconnu, alors qu’une valeur HWB plus noire se résout déjà en un triplet sRGB complet. Le premier plan bascule dans l’autre sens à mesure que la gamme s’assombrit.

Normalisez blancheur plus noirceur à partir de 100%

Le cas limite essentiel apparaît lorsque W + B vaut au moins 100%. CSS ne rejette pas la couleur : il normalise les deux quantités par leur somme et renvoie un résultat achromatique dont les trois canaux sRGB valent W / (W + B). La teinte originale ne peut pas modifier ce gris et devient sans effet. Des valeurs aux totaux différents mais au même rapport W:B peuvent donc donner la même couleur après avoir franchi la limite.

• La première ligne est l’exemple CSS Color 4 : 40 / (40 + 80) produit un gris à un tiers.
• Une blancheur et une noirceur égales se normalisent toujours en gris 50% lorsque leur somme atteint la limite.
• N’encodez pas de teinte sémantique dans un jeton achromatique : modifier l’angle ne change pas le rendu.
• Si une gamme doit conserver sa teinte, validez W + B < 100% avant publication.
• Évitez les allers-retours répétés avec des pourcentages HWB arrondis, car le rapport W:B peut dériver près de la limite.

Convertissez entre RGB, HWB et HSL sans perdre la source

Pour une couleur sRGB, la blancheur HWB est le plus petit canal RGB normalisé et la noirceur vaut un moins le plus grand canal. La teinte dérive de la différence des canaux avec la même géométrie que HSL. La conversion est déterministe, mais un arrondi d’affichage n’est pas réversible. Conservez une représentation canonique assez précise, puis dérivez les autres pour la documentation et les commandes de copie au lieu d’écraser continuellement la source.

Livrez les jetons HWB avec des preuves résolues

Un jeu pratique rassemble les coordonnées éditables, un repli sRGB résolu et les résultats de premier plan testés. Les déclarations directes peuvent placer HEX avant HWB, permettant aux logiciels qui ignorent la valeur suivante de conserver la précédente. Ce repli ne résout pas le contraste avec alpha et ne rend pas accessible une gamme non testée ; chaque état final rendu exige ses propres preuves.

:root {
  --action: hwb(210 10% 20%);
  --action-muted: hwb(210 30% 20%);
  --action-dark: hwb(210 10% 40%);
  --on-action: #FFFFFF;
  --on-action-muted: #000000;
}

.action {
  color: #FFFFFF;
  background: #1A73CC;
  background: var(--action); /* 4.81:1 with white */
}

.action-muted {
  color: var(--on-action-muted);
  background: #4D8CCC;
  background: var(--action-muted); /* 5.94:1 with black */
}

• Maintenez W + B sous 100% si la teinte choisie doit rester visible.
• Stockez les coordonnées HWB canoniques avec assez de précision et exportez le HEX arrondi comme valeur sRGB dérivée.
• Testez séparément les paires normal, hover, active, selected, focus et disabled dans les thèmes clair et sombre.
• Résolvez alpha sur le fond réel avant de calculer luminance ou contraste.
• Ne présentez pas HWB comme un espace à gamut étendu ou perceptuellement uniforme : il hérite du gamut et des limites de teinte de sRGB.
• Utilisez HSL si saturation et luminosité du modèle sont les contrôles voulus, et OKLCH si l’espacement perceptuel est requis.
• Liez la spécification de conversion et gardez les valeurs non arrondies afin qu’un futur générateur reproduise le résultat.