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!How to Use Color HWB?
- 1Choose a base color using the interactive picker or enter HEX, RGB, HSL values.
- 2Generate matching color palettes, schemes, or color space transformations instantly.
- 3Click on any color code block in the results to copy it instantly to your clipboard.
Designer Friendly
Easily match colors, check contrast ratios, and generate custom palettes for your designs.
Multi-Format Support
Supports copy-paste in HEX, RGB, RGBA, HSL, HSLA, and CSS variables formats.
Runs Locally
No internet connection required. Our color engines run instantly and cleanly inside your web browser.