Why is No person Utilizing the hwb() Coloration Perform?

Okay, no one is an exaggeration, however have you ever seen the stats for hwb()? They present a steep decline, and after working rather a lot on shade within the CSS-Tips almanac, I’ve simply been questioning why that’s.

hwb() is a shade operate within the sRGB shade area, which is similar shade area utilized by rgb(), hsl() and the older hexadecimal shade format (e.g. #f8a100). hwb() is meant to be extra intuitive and simpler to work with than hsl(). I kinda get why it’s thought of “simpler” because you specify how a lot black or white you wish to add to a given shade. However, how is hwb() extra intuitive than hsl()?

hwb() accepts three values, and just like hsl(), the primary worth specifies the colour’s hue (between 0deg–360deg), whereas the second and third values add whiteness (0 – 100) and blackness (0 – 100) to the combination, respectively.

In response to Google, the time period “intuitive” means “what one feels to be true even with out aware reasoning; instinctive.” As such, it does actually appear that hwb() is extra intuitive than hsl(), but it surely’s solely a slight notable distinction that makes that true.

Let’s take into account an instance with a shade. We’ll declare mild orange in each hsl() and hwb():

/* mild orange in hsl */
.element-1 {
  shade: hsl(30deg 100% 75%);
}

/* mild orange in hwb() */
.element-2 {
  shade: hwb(30deg 50% 0%);
}

These two capabilities produce the very same shade, however whereas hwb() handles ligthness with two arguments, hsl() does it with only one, leaving one argument for the saturation. By comparability, hwb() gives no clear intuitive strategy to set simply the saturation. I’d argue that makes the hwb() operate much less intuitive than hsl().

I believe one more reason that hsl() is mostly extra intuitive than hwb() is that HSL as a shade mannequin was created within the Nineteen Seventies whereas HWB as a shade mannequin was created in 1996. We’ve had rather more time to get acquainted with hsl() than we’ve got hwb(). hsl() was applied by browsers way back to 2008, Safari being the primary and different browsers following go well with. In the meantime, hwb() gained help as not too long ago as 2021! That’s greater than a 10-year hole between capabilities in the case of utilizing them and being accustomed to them.

There’s additionally the truth that different shade capabilities which might be used to characterize colours in different shade areas — akin to lab(), lch(), oklab(), and oklch() — provide extra benefits, akin to entry to extra colours within the shade gamut and perceptual uniformity. So, perhaps being intuitive is coming on the expense of getting a extra strong characteristic set, which might clarify why you may go along with a much less intuitive operate that doesn’t use sRGB.

Look, I can get across the concept of controlling how white or black you need a shade to look based mostly on private preferences, and for designers, it’s perhaps simpler to combine colours that manner. However I actually wouldn’t go for this as my go-to shade operate within the sRGB shade area as a result of hsl() does one thing related utilizing the identical hue, however with saturation and lightness because the parameters which is way extra intuitive than what hwb() provides.

I see our net pal, Stefan Judis, preferring hsl() over hwb() in his article on hwb().

Lea Verou even introduced up the concept of eradicating hwb() from the spec in 2022, however a call was made to depart it because it was since browsers have been already implementing the operate. And though,I used to be initially pained by the concept of conserving hwb() round, I additionally fairly perceive the sensation of engaged on one thing, after which seeing it thrown within the bin. As soon as we’ve launched one thing, it’s at all times powerful to stroll it again, particularly in the case of sustaining backwards compatibility, which is a core tenet of the online.

I wish to say one thing although: lab(), lch(), oklab(), oklch() are already right here and are higher shade capabilities than hwb(). I, for one, would encourage utilizing them over hwb() as a result of they help so many extra colours which might be merely lacking from the hsl() and hwb() capabilities.

I’ve been exploring colours for fairly a while now, so any enter could be extraordinarily useful. What shade capabilities are you utilizing in your on a regular basis web site or net software, and why?

Extra on shade