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%))
Top comments (6)
That's quite interesting. When adjusting colors in a GUI I always go for HSL for the benefits that you stated, it's easy to make a color a little brighter/warmer with HSL, but with RGB it's a different story. But I never thought of using it in code. That's an eye opener to me... I wish I had known this earlier :D
hsl*is* the only way add colour in code if we want to be able to manipulate the colorPaint won't do you any good for RGB. When was the last time you got yellow when you mixed red and green paint? Or magenta from mixing blue and red? Or cyan from mixing blue and green?
Oh yeah, I totally forgot that paint was subtractive mixing
Great explanation! Thank you !
Would you mind share some examples?
Sure thing!
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
#0000ffblue.Here's a red (
hsl(0, 50%, 50%)) and a green (hsl(120, 50%, 50%))