Why Isn’t Anyone Using the hwb() Color Function?

Here’s a rewritten version of the article with a more polished tone and improved clarity, while retaining the original meaning and structure:

—

Why Isn’t Anyone Using the hwb() Color Function?

Okay, saying nobody uses hwb() might be a stretch—but the usage stats definitely don’t lie. After spending a significant amount of time digging into color functions for the CSS-Tricks Almanac, I couldn’t help but notice the steep decline in hwb() usage. And it got me thinking—why is that?

The hwb() color function operates within the sRGB color space—just like rgb(), hsl(), and even the classic hexadecimal format (e.g. #f8a100). It was introduced with the promise of being more intuitive than hsl(), mainly because it allows you to add white or black to a hue directly. That sounds simpler, right? But is it really more intuitive?

hwb() takes three values: a hue (0–360deg), a whiteness percentage (0–100%), and a blackness percentage (0–100%).

By definition, “intuitive” means something that feels naturally understandable—without needing much thought. In that sense, hwb() might technically qualify. But in practice, the difference in intuitiveness between hwb() and hsl() is marginal at best.

Let’s look at a comparison using the same color—light orange—defined with both functions:

/* light orange using hsl */
.element-1 {
  color: hsl(30deg 100% 75%);
}

/* light orange using hwb */
.element-2 {
  color: hwb(30deg 50% 0%);
}

Both functions produce the same visual result. But here’s the catch: hsl() uses saturation and lightness, while hwb() uses whiteness and blackness. hsl() offers a more direct way to control saturation, which many designers find more practical. hwb(), on the other hand, doesn’t provide a clear route to adjust saturation independently. That lack of control can make it feel less intuitive, not more.

Another factor to consider is familiarity. HSL has been around since the 1970s, while HWB was introduced in 1996. Browser support for hsl() dates back to 2008, while hwb() didn’t gain support until 2021. That’s over a decade of a head start, which naturally leads to more widespread usage and familiarity.

Plus, newer color functions like lab(), lch(),