Okay, no one is an exaggeration, however have you ever seen the stats for hwb()? They present a steep decline, and after working quite a bit on coloration within the CSS-Methods almanac, I’ve simply been questioning why that’s.
hwb() is a coloration perform within the sRGB coloration house, which is identical coloration house utilized by rgb(), hsl() and the older hexadecimal coloration 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 need to add to a given coloration. However, how is hwb() extra intuitive than hsl()?
hwb()accepts three values, and just 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 aware reasoning; instinctive.” As such, it does actually appear that hwb() is extra intuitive than hsl(), however it’s solely a slight notable distinction that makes that true.
Let’s contemplate an instance with a coloration. We’ll declare gentle orange in each hsl() and hwb():
/* gentle orange in hsl */
.element-1 {
coloration: hsl(30deg 100% 75%);
}
/* gentle orange in hwb() */
.element-2 {
coloration: hwb(30deg 50% 0%);
}These two capabilities produce the very same coloration, 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 technique to set simply the saturation. I’d argue that makes the hwb() perform much less intuitive than hsl().
I believe one more reason that hsl() is usually extra intuitive than hwb() is that HSL as a coloration mannequin was created within the Nineteen Seventies whereas HWB as a coloration mannequin was created in 1996. We’ve had way more time to get acquainted with hsl() than now we have 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 on the subject of utilizing them and being accustomed to them.
There’s additionally the truth that different coloration capabilities which can be used to symbolize colours in different coloration areas — corresponding to lab(), lch(), oklab(), and oklch() — provide extra benefits, corresponding to entry to extra colours within the coloration gamut and perceptual uniformity. So, possibly being intuitive is coming on the expense of getting a extra sturdy characteristic set, which may clarify why you may go together with a much less intuitive perform that doesn’t use sRGB.
Look, I can get across the thought of controlling how white or black you need a coloration to look based mostly on private preferences, and for designers, it’s possibly simpler to combine colours that means. However I actually wouldn’t go for this as my go-to coloration perform within the sRGB coloration house 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() gives.
I see our internet 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 choice was made to depart it because it was since browsers had been already implementing the perform. And though,I used to be initially pained by the concept of preserving 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 on the subject of sustaining backwards compatibility, which is a core tenet of the net.
I wish to say one thing although: lab(), lch(), oklab(), oklch() are already right here and are higher coloration capabilities 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() capabilities.
I’ve been exploring colours for fairly a while now, so any enter can be extraordinarily useful. What coloration capabilities are you utilizing in your on a regular basis web site or internet utility, and why?
