Why `hsl` is better
Siddharth
Posted on June 3, 2021
I prefer hsl
over rgb
. It's really impossible to get colors manually using rgb
. hsl(h, s, l)
/hsla(h, s, l, a)
is really easy to understand.
-
h
- Hue: The hue. It's the only thing you actually need to know. Think of it like a color wheel. Around 0o and 360o are reds. 120o is where greens are and 240o are blues. Use anything in between 0-360. Values above and below will be modulus 360. -
s
- Saturation: 0% is completely desaturated (grayscale). 100% is fully saturated (full color). -
l
- Lightness: 0% is completely dark (black). 100% is completely light (white). 50% is average lightness. -
a
- Alpha: Opacity/Transparency value. 0 is fully transparent. 1 is fully opaque. 0.5 is 50% transparent.
You can hand-manipulate any of those four values and have a decent idea of what's going to take place. Change the hue to take a journey around the color wheel. Change the saturation to get deeper or more muted hues. Change the lightness to essentially mix in black or white.
You may know what rgb(0, 0, 0)
and rgb(255, 0, 0)
is, but creating a sea blue and going a bit darker or getting a deep yellow isn't exactly math.
hsl
is also easy to manipulate with JavaScript. You could create a color scheme from a hue by adjusting the saturation and lightness.
Example
According to what I said, if you set hue to 240, you get blue. So I just took 240 as the hue, and 50%
as the saturation and the lightness, and I got this pleasing blue:
Which looks way better than the #0000ff
blue.
Here's a red (hsl(0, 50%, 50%)
) and a green (hsl(120, 50%, 50%)
)
Posted on June 3, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.