Why `hsl` is better

Siddharth - Jun 3 '21 - - Dev Community

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:

Blue

Which looks way better than the #0000ff blue.

Base Blue

Here's a red (hsl(0, 50%, 50%)) and a green (hsl(120, 50%, 50%))

Red
Green

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .