HSL, HWB & HSV: Hue
In HSL,
HWB, and
HSV
we can describe and manipulate colors in a very natural way. The hue
property ranges from 0 to 360 letting us select our base color. For
example, red shows up at 0, yellow at 60, and orange naturally
resides between them at 30 degrees.
With the HSL model, a pure red is at hsl(0 100% 50%).
In HWB however, a pure red is hwb(0 0% 0%), and in HSV
it's hsv(0 100% 100%). Read on to
learn the differences between these three models.
HSL: Saturation & Luminosity
Saturation is a percentage that describes the amount of hue in our
color. Starting with our pure red at
hsl(0 100% 50%), as we reduce the saturation our color
will become more and more gray. At 0% saturation the hue will not be
evident in the color at all, leaving us with a grayscale spectrum.
At 100% we will have the full brilliance of the hue available to our
color mix.
Luminosity is a percentage which allows us to tweak the amount of
white or black added to our color mix. Again, given our pure red
hsl(0 100% 50%), our luminosity is at 50%. As we reduce
the luminosity our color darkens until it becomes black at 0%. As
you would expect, when we increase the luminosity our red becomes
pink and eventually white at 100% luminosity.
HWB: Whiteness & Blackness
Whiteness, as you'd expect, lightens a color as you increase it from
0% to 100%. And as it would follow Blackness adds black to your
color. A color with 0% blackness and 100% whiteness will always be
white. As you increase the blackness, the color will become more
gray. Let's look at our pure red again. In HWB it is
hwb(0 0% 0%). If we want to make it more pink, we need
to add whiteness. If we want to desaturate it a bit we can add some
blackness too, which will make it appear more of a smokey pink.
HSV: Saturation & Value
HSV (also called HSB for
Brightness) shares the same hue wheel as HSL and HWB. However, saturation
and value work differently. In HSV, our pure red is
hsv(0 100% 100%). Saturation controls color intensity just
like in HSL, but value controls brightness from black (0%) to the pure
hue (100%). Unlike HSL's luminosity, HSV's value never adds white to
your color—it only controls how bright or dark it appears.
Where HWB lets you independently add whiteness and blackness to a pure hue,
HSV takes a different approach. You can desaturate toward gray (like HSL)
or darken toward black with value, but there's no direct way to lighten
toward white. This makes HSV particularly intuitive for artists familiar
with traditional color mixing, where you start with a pure pigment and
either dilute it or darken it.
Which to use?
HSL came first to the web, rescuing us from the misery of picking
colors in HEX (#c0ff33 anyone?) or RGB. HSL was instantly a better
choice and lead me to create this website to help people understand
how HSL worked. However, if you've spent much time using graphics
applications you may be familiar with HSV (also called HSB). While
HSV isn't supported in CSS, HWB's approach of independently controlling
whiteness and blackness makes it a natural choice for those comfortable
with HSV workflows. With excellent browser support you will be fine
with either HSL or HWB.
WAIT A MINUTE, Eight Character Hex Colors???
Yea pretty neat huh? It turns out hex colors support alpha. You can
even have four character hex colors. Just like #F3A is
shorthand for #FF33AA so the color
#F3A0 is a transparent pink which expands to
#FF33AA00.