Colors HWB Color Model
HWB describes a color by its pure hue plus how much white and how much black are mixed into it, offering a more intuitive alternative to HSL for creating tints and shades.
A Different Way to Think About Color
HWB stands for Hue, Whiteness, and Blackness. Instead of describing a color with an abstract 'saturation' and 'lightness' percentage like HSL does, HWB asks a much more physical question: starting from a pure, vivid hue, how much white paint and how much black paint would you mix in? That framing matches how painters and designers already think about tints (adding white) and shades (adding black).
The Three Components
- Hue — a position on the color wheel from 0 to 360 degrees, exactly like in hsl()
- Whiteness — a percentage from 0% to 100% describing how much white is mixed in
- Blackness — a percentage from 0% to 100% describing how much black is mixed in
When both whiteness and blackness are 0%, you get the purest, most saturated version of that hue. As either value rises, the color becomes softer (more whiteness) or darker (more blackness). If whiteness and blackness together add up to 100% or more, there's no room left for the hue at all, and the result is a plain gray — the specific hue value stops mattering.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.swatch {
background-color: hwb(200 0% 0%); /* a vivid, fully saturated blue */
}
</style>
</head>
<body>
<div class="swatch">Swatch</div>
</body>
</html>Example
<!DOCTYPE html>
<html>
<head>
<style>
.tint { background-color: hwb(200 40% 0%); } /* lighter, softened blue */
.shade { background-color: hwb(200 0% 40%); } /* darker, deeper blue */
.tone { background-color: hwb(200 20% 20% / 0.8); } /* muted and semi-transparent */
</style>
</head>
<body>
<div class="tint">Tint</div>
<div class="shade">Shade</div>
<div class="tone">Tone</div>
</body>
</html>Why Some Designers Prefer HWB
HSL's saturation and lightness percentages don't map cleanly onto how most people intuitively picture mixing color — pushing 'lightness' toward 100% doesn't feel the same as 'adding white'. HWB removes that translation step: whiteness and blackness are literally the amount of white and black blended into the base hue, which lines up much more directly with traditional color theory and how you'd describe a color by eye.
- Keep the hue constant across a palette and vary only whiteness/blackness for a cohesive family of colors.
- Remember that whiteness + blackness at or above 100% collapses the color to gray, regardless of hue.
- Add an alpha value with a slash, e.g. hwb(200 20% 20% / 50%), just like in hsl() and rgb().
Exercise: Colors CMYK and HWB
What is the CMYK color model primarily used for?
