HSL is part of CSS version 3 colors, but currently it seems that Internet Explorer 8 is the only of the major browsers not supporting it (see caniuse).
But why do I like HSL better than RGB? I'll try to explain how it works, and then you can judge for yourself what you think.
Just like RGB colors, HSL is represented by three values. The first value (Hue) is a number between 0 and 360). It's the number of degrees in the color circle (and thus, 0 and 360 is the same value). See this picture:
(picture from wikimedia)
HSL(0, X, X) is red. HSL(120, X, X) is in the green area, etc.
Now, let me jump to the last value - Lightness. I think it's a bit easier to explain than Hue. I think of it as "whiteness" or "blackness" (duh!). A number between 0 and 100%. Thus 100% will always be white and 0% will always be black - no matter what the other values are.
So HSL(0, X, 100%) is white just as HSL(120, X, 100%) is white. And HSL(0, X, 0%) is black, just as HSL(240, X, 0%). If you stay at 50% you'll have "medium" lightness.
HSL(0, X, 50%) is red. HSL(60, X, 50%) is yellow.
What's Saturation then? I like to think of it as "grayness" or, inverted, as "colorfulness". A value from 0 to 100%. Where 100% means "full color". And 0% means gray. And 0% will always mean gray, no matter what degree in the color circle you set. But! The Lightness value trumps this value, so HSL(X, 0%, 100%) and HSL(X, 100%, 100%) is still white and HSL(X, 0% 0%) and HSL(X, 100%, 0%) is still black. But by playing around with the Lightness value, you can get different shades of gray.
HSL(0, 0% 50%) is gray and HSL(0, 0%, 80%) is lighter gray.
And now we're starting to touch the beauty of this (at least what I think).
Let's say we have the color red: HSL(0, 100%, 50%) (remember that S:100% means "full color" or "no grayness"). If I want to have a darker red, I just decrease the lightness.
Red, HSL(0, 100%, 50%):
Darker red, HSL(0, 100%, 40%):
Add some "grayness" to make it look even darker:
Darker red with "grayness", HSL(0, 70%, 40%):
(be careful with the Lightness value, it quite quickly becomes very dark (or white), e.g HSL(0, 100%, 20%)):
Anyway. Perhaps you see what I mean when I say that I think this feels more "natural"? When playing around with nuances of colors I think it's easier to work with HSL over RGB.
Let's say I want to have a red pastel nuance. I think it's quite easy to think how I would create it. First value would be 0 degrees: Red) then I'd add some "grayness", and also make the Lightness value quite high. Let's just try with HSL(0, 80%, 80%):
And voilà! First try. I think it looks pretty good.
It's not equally obvious (in my opinion) how that would've been accomplished with RGB. I would've started with Red 255 (255 is max value (a byte, 0xff, is 255)). But then what? I know that RGB(255, 255, 255) is white. So perhaps RGB(255, 180, 180) would be similar?
Ha! That actually looks pretty good as well. Let's say I'm quite good with RGB values as well ;-) But it lacks a bit of that "grayness" I wanted to have. And... I think I know how I would've achieved that as well (just decrease the Red value a bit). But anyway, working with HSL in this way feels like I can express what I want to achieve in a better way.
Wonder what the RGB value of HSL(0, 80%, 80%) is? It's RGB(240, 170, 170). So, I was pretty close :-) And if you still prefer RGB, it's quite easy to convert. Just google for "HSL to RGB converter" or start Chrome developer tools; there you can shift+click (in the "Styles" tab) on a color to switch between the different color modes.
As an aside, there's also HSLA that just adds an extra Alpha value. 0 to 1, where 0 is transparent and 1 is opaque and 0.5 is semi-transparent.
Hope that explains how the HSL color "mode" works. At least it is how I've come to understand it :-)
No comments:
Post a Comment