How to Convert HSL to HWB
HSL (Hue, Saturation, Lightness) and HWB (Hue, Whiteness, Blackness) are sibling color spaces. Both were designed to make color manipulation easier for humans, and both share the exact same 360-degree Hue wheel. Converting between them is simply a matter of translating how the color's intensity and brightness are described.
Saturation/Lightness vs. Whiteness/Blackness
In HSL, you control a color by adjusting its saturation (how vivid it is) and its lightness (how close it is to black or white).
HWB takes a different approach, mimicking how a painter mixes physical pigments. You start with a pure hue and then mix in white paint (Whiteness) to create a tint, or black paint (Blackness) to create a shade.
The Conversion Math
Because both formats share the same Hue value, the H channel doesn't change during the conversion. You only need to calculate the Whiteness and Blackness based on the HSL Saturation and Lightness.
While you can convert HSL to RGB and then to HWB, you can also calculate it directly. The Whiteness is derived by subtracting the chroma from the lightness, while the Blackness is calculated by subtracting the lightness and chroma from 100%.
When to Use HWB
If you are building a monochromatic color palette, HWB is often faster to work with than HSL. By locking the Hue and simply stepping the Blackness up by 10% for each new shade, you can generate a perfectly uniform dark theme palette in seconds.