Okay, no person is an exaggeration, however have you ever seen the stats for hwb()? They present a steep decline, and after working quite a bit on shade within the CSS-Tips almanac, I’ve simply been questioning why that’s.
hwb() is a shade operate within the sRGB shade house, which is similar shade house 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 much likehsl(), the primary worth specifies the colour’s hue (between0deg–360deg), whereas the second and third values add whiteness (0–100) and blackness (0–100) to the combination, respectively.
In line with Google, the time period “intuitive” means “what one feels to be true even with out acutely aware reasoning; instinctive.” As such, it does actually appear that hwb() is extra intuitive than hsl(), nevertheless it’s solely a slight notable distinction that makes that true.
Let’s contemplate 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 features 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() offers no clear intuitive option to set simply the saturation. I’d argue that makes the hwb() operate much less intuitive than hsl().
I believe another excuse that hsl() is mostly extra intuitive than hwb() is that HSL as a shade mannequin was created within the Seventies whereas HWB as a shade mannequin was created in 1996. We’ve had far 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 swimsuit. In the meantime, hwb() gained help as not too long ago as 2021! That’s greater than a 10-year hole between features in the case of utilizing them and being accustomed to them.
There’s additionally the truth that different shade features which can be used to characterize colours in different shade areas — equivalent to lab(), lch(), oklab(), and oklch() — provide extra benefits, equivalent to entry to extra colours within the shade gamut and perceptual uniformity. So, possibly 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 desire a shade to look based mostly on private preferences, and for designers, it’s possibly simpler to combine colours that means. However I truthfully wouldn’t go for this as my go-to shade operate within the sRGB shade house as a result of hsl() does one thing comparable utilizing the identical hue, however with saturation and lightness because the parameters which is way extra intuitive than what hwb() affords.
I see our net pal, Stefan Judis, preferring hsl() over hwb() in his article on hwb().
Lea Verou even introduced up the thought of eradicating hwb() from the spec in 2022, however a choice was made to go away it because it was since browsers have been already implementing the operate. And though,I used to be initially pained by the thought of maintaining 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 all the time robust 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 features than hwb(). I, for one, would encourage utilizing them over hwb() as a result of they help so many extra colours which can be merely lacking from the hsl() and hwb() features.
I’ve been exploring colours for fairly a while now, so any enter can be extraordinarily useful. What shade features are you utilizing in your on a regular basis web site or net utility, and why?
