HWB Color Model

Hex and RGB aren't made for people! When you think darker blue or vibrant red, you're thinking in terms of hues and their modifications.

The HWB model works this way, separating the base color from its whiteness and blackness adjustments.

Unlike RGB's technical approach, this perceptual model mirrors how we naturally perceive color, making palette creation and manipulation more predictable.

The HWB model

The hwb() function defines colors using Hue with Whiteness and Blackness values, plus optional transparency. Here, the Hue is its pure color, adding the Whiteness and Blackness will change its lightness or darkness, and mixing them will produce everything in between.

A simple way to understand the hwb() model

Basic syntax hwb(0deg 0% 0%)

The first value, 0deg, is the hue ranging from 0° to 359° (red to red) as you probably know it from HSL

The second value, 0%, is the whiteness where 100% will be pure white

The third value, 0%, is the blackness where 100% will be pure black

So w 0%, b 0% will give the full hue color

Mixing w and b results in a gray, muted color

You can also add opacity like this hwb(0deg 0% 0% / .5)

HWB color wheel diagram showing Hue (H) around the circumference, Whiteness (W) on the outer ring, and Blackness (B) towards the center.

Create a smooth color palette

In this example, I have a variable called --my-color

For it to work properly, it should be a pure hue, e.g. hwb(90deg 0% 0%)

Let's use the CSS from and calc functions to make it 50% darker

So it will look like this: background-color: hwb(from var(--my-color) h w calc(b + 50%));

Let's make it 50% lighter: background-color: hwb(from var(--my-color) h calc(w + 50%) b);

This is how I built the slider below – try it out

What's next?

Use it in your design system?! Contact me at this email