Color HWB
Hue, Whiteness, Blackness color model explained
What Is the HWB Color Model?
HWB stands for Hue, Whiteness, and Blackness. It was designed as a more intuitive alternative to HSL. Instead of saturation and lightness, you start with a pure hue and add white or black paint to it — much like a real painter would.
- Hue (0–360°) — The base color, same as in HSL.
- Whiteness (0–100%) — How much white is mixed into the color.
- Blackness (0–100%) — How much black is mixed into the color.
If Whiteness + Blackness ≥ 100%, the result is always a shade of gray. The hue becomes irrelevant because the color is fully washed out.
Interactive HWB Mixer
#1A62F2hwb(220 10% 5%)
HEX#1A62F2
RGB26, 98, 242
HSL220°, 89%, 53%
How White and Black Affect the Hue
Think of HWB like mixing paint. Start with a pure pigment (the hue), then:
Adding Whiteness to Hue 220°
0% (pure)50%100% (white)
Adding Blackness to Hue 220°
0% (pure)50%100% (black)
HWB vs HSL Comparison
Both models share the same Hue wheel. The key difference is in the other two dimensions:
| Aspect | HSL | HWB |
|---|---|---|
| 2nd Dimension | Saturation (color intensity) | Whiteness (white added) |
| 3rd Dimension | Lightness (brightness) | Blackness (black added) |
| Mental Model | Light and color vibrance | Paint mixing with white/black |
| CSS Support | hsl(h, s%, l%) | hwb(h w% b%) |
| Browser Support | All modern browsers | Chrome 101+, Firefox 96+, Safari 15+ |
Common HWB Colors
| Color | Swatch | H | W | B | CSS |
|---|---|---|---|---|---|
| Pure Red | 0° | 0% | 0% | hwb(0 0% 0%) | |
| Light Red | 0° | 40% | 0% | hwb(0 40% 0%) | |
| Dark Red | 0° | 0% | 50% | hwb(0 0% 50%) | |
| Pure Green | 120° | 0% | 0% | hwb(120 0% 0%) | |
| Sage | 120° | 30% | 30% | hwb(120 30% 30%) | |
| Pure Blue | 240° | 0% | 0% | hwb(240 0% 0%) | |
| Sky Blue | 200° | 30% | 0% | hwb(200 30% 0%) | |
| Pure Yellow | 60° | 0% | 0% | hwb(60 0% 0%) | |
| Khaki | 60° | 30% | 20% | hwb(60 30% 20%) | |
| White | 0° | 100% | 0% | hwb(0 100% 0%) | |
| Black | 0° | 0% | 100% | hwb(0 0% 100%) | |
| Gray 50% | 0° | 50% | 50% | hwb(0 50% 50%) |
Try It — CSS hwb() Syntax
Live Editor
.element {
background-color: hwb(280 15% 10%);
color: #ffffff;
}hwb(280 15% 10%)
Pro tip: HWB is supported in CSS Color Level 4. The syntax uses spaces instead of commas:
hwb(220 10% 5%). No commas needed!