HWB
Hue, Whiteness and Blackness — a color model designed specifically for reasoning about mixing with white and black.
hwb(243 31% 10%).The three components
Hue (0–360°)
Hue is the same as in HSL — the angle around the color wheel. 0° is red, 60° is yellow, 120° is green, 180° is cyan, 240° is blue, 300° is magenta.
Whiteness (0%–100%)
Whiteness is how much white is mixed into the hue. At 0% no white is added. At 100% the result is pure white — all color has been washed out. Higher whiteness produces lighter, more pastel colors.
Blackness (0%–100%)
Blackness is how much black is mixed into the hue. At 0% no black is added. At 100% the result is pure black. Higher blackness produces darker, deeper colors.
Pure hue
Tint
Pastel
Shade
Deep shade
Why HWB exists
RGB tells you the brightness of each channel; HSL tells you hue, saturation and lightness; HWB was designed to answer a specific question: how do I mix this color with white and black? It maps directly to how a painter or ink formulator thinks about color — start with a pure hue, then add white or black to reach the target.
- Tints are simple. Adding W produces a tint in one operation, without touching saturation.
- Shades are simple. Adding B produces a shade in one operation.
- Neutral grays are trivial. Hue is irrelevant when W + B = 100%.
- Complements HSL. HWB is not a replacement for HSL — it is an alternative framing for the same color space.
HWB vs HSL
The two models describe the same colors but with different intuitions. Here is how they compare:
| Task | In HSL | In HWB |
|---|---|---|
| Make a tint | Increase L, reduce S | Increase W (S is implied) |
| Make a shade | Decrease L, keep S | Increase B |
| Make a pastel | Increase L, decrease S | Increase W heavily |
| Make a deep tone | Decrease L | Increase B |
| Pure hue | L 50%, S 100% | W 0%, B 0% |
A subtle but important difference: in HSL, changing lightness also shifts perceived saturation. In HWB, adding whiteness or blackness keeps the hue's saturation conceptually the same — you are literally mixing white or black pigment into the hue.
How W and B interact
When W + B equals or exceeds 100%, the extra amount is normalized. If you set W to 60% and B to 60%, the total 120% is scaled so that the result is a mid-gray. This means you cannot accidentally overshoot — the model always produces a valid color.
hwb(243 0% 0%) → pure hue at maximum saturation
hwb(243 50% 0%) → 50% white mixed in (a tint)
hwb(243 0% 50%) → 50% black mixed in (a shade)
hwb(243 50% 50%) → neutral mid gray (W + B = 100%)
hwb(243 60% 60%) → normalized gray (W + B > 100%)Practical syntax in CSS
/* Full saturation hue */
color: hwb(243 0% 0%);
/* A tint */
color: hwb(243 40% 0%);
/* A shade */
color: hwb(243 0% 40%);
/* With alpha */
color: hwb(243 31% 10% / 0.5);Continue reading
Frequently asked questions
What is HWB?
HWB stands for Hue, Whiteness and Blackness. It describes a color by first picking a hue angle, then adding whiteness and blackness as percentages. It was designed specifically for the operation of mixing paint or ink with white and black.
What is the difference between HSL and HWB?
HSL describes a color by hue, saturation and lightness. HWB describes the same color as hue plus whiteness and blackness. In HSL you adjust a single lightness value; in HWB you independently adjust how much white and black are mixed into the hue. HWB maps more directly to how designers think about adding white or black.
When should I use HWB?
HWB is useful when you want to reason about tints (adding white) and shades (adding black) directly. It is well suited to generating palettes from a base hue, or to translating mental "make this lighter/darker" adjustments into numeric values.
Is HWB supported in browsers?
Yes. HWB is part of the CSS Color Module Level 4 and is supported in all modern browsers — Chrome, Firefox, Safari and Edge. The syntax is hwb(hue whiteness% blackness%) with optional alpha separated by a slash.