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.
OKLCH: The New Color Kid on the Block
OKLCH is the
newest color model to arrive in browsers, and it's a game-changer.
Unlike HSL/HSV/HWB that share the same hue wheel, OKLCH uses a
completely different hue system based on human perception. Where
HSL's yellow sits at 60°, OKLCH puts it around 110°. This isn't a
bug—it's a feature! OKLCH hues actually match how our eyes perceive
color relationships.
The real magic of OKLCH is wide gamut support.
While HSL and friends are limited to sRGB colors (the web's
traditional color space), OKLCH can describe vibrant colors that
exist in P3 and beyond—think the electric blues and neon greens you
see on modern displays. When you pick an out-of-gamut color,
browsers automatically fall back to the closest sRGB or P3
equivalent, so your colors work everywhere.
You'll notice gaps in the OKLCH sliders—these
aren't broken! They represent the limits of what displays can
actually show. Those gaps are "gamut boundaries" where certain
combinations of lightness, chroma, and hue simply don't exist in the
real world. It's like trying to mix a color that's simultaneously
super bright and super saturated—physics just won't allow it.
Pro tip: OKLCH can be tricky to navigate directly.
Try picking a color in HSL or HWB first, then switch to OKLCH and
crank up the chroma to push it into those vibrant P3 territories.
It's like having a turbo button for your colors!
Which to use?
Here's the thing: OKLCH is secretly a superpower for design systems.
Because it uses perceptual lightness, you can shift hues while
keeping the same visual brightness—something that's impossible with
HSL. Imagine creating an entire palette by picking one color and
just rotating the hue. With OKLCH, all those colors will feel
equally vivid and balanced. With HSL? Some will look washed out
while others pop.
That said, HSL and HWB are still fantastic for quick color
picking—they're intuitive and you already know them. Think of it
this way: use HSL or HWB to find your color, then switch to OKLCH to
perfect it. Want that blue to really sing on a modern display?
OKLCH. Need a whole rainbow of colors that work together? OKLCH.
Just picking a quick accent color? HSL or HWB will do you just fine.
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
.