If you ever need to hand-manipulate a color in native CSS, HSL is pretty much the only way. HSL (the hsl() and hsla() functions in CSS) stands for hue, saturation, lightness, and optionally, alpha. We’ve talked about it before but we can break it down a little more and do some interesting things with it.
- Hue: Think of 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.
- Saturation: 0% is completely desaturated (grayscale). 100% is fully saturated (full color).
- Lightness: 0% is completely dark (black). 100% is completely light (white). 50% is average lightness.
- 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 sense of what is going to happen. Change the hue to take a trip around the color wheel. Change the saturation to get deeper or more muted colors. Change the lightness to essentially mix in black or white.
You might have some mental chops with rgb(), knowing that rgb(255, 0, 0) is clearly red or rgb(0, 0, 0) is black, but manipulating those to get to a light purple or starting with a forest green and getting a little lighter isn’t exactly mental math. You might even be the clever sort who can identify color by Hex codes. Ask David DeSandro at a party sometime. Still, nothing nearly as intuitive as HSL.
Those of you on the cutting edge might recall the working draft of Color Level 4 with the color() function and more intuitive sub-functions. Or, you might get hot and heavy with Sass color functions or your own home brew thing. More power to ya!
See the Pen Sass Color Functions by Chris Coyier (@chriscoyier) on CodePen.
I really like HSL when playing with color in JavaScript. For example, say you want to generate some different red tones. You could randomize the H, S, and L tightly around some values:
See the Pen Random Reds by Chris Coyier (@chriscoyier) on CodePen.
Not long ago, I basically did the same thing but rotated the hue to animate this stargate:
See the Pen Sparklegate by Chris Coyier (@chriscoyier) on CodePen.
If you’re messing with color in JavaScript and want randomization to result in pleasing colors, give PleaseJS a spin.
Need a quick color picker? I put this one together ages ago and I quickly ported it over to CodePen:
See the Pen HSL Explorer by Chris Coyier (@chriscoyier) on CodePen.
There is also the HSL Color Picker and Mothereffering HSL if you want options.
See the Pen HSL by Graham Pyne (@gpyne) on CodePen.
Wanna learn more about color on the web in general? Don’t miss Sarah Drasner’s A Nerd’s Guide to Color on the Web. Lots of great goodies in there to up your understanding of working with color.
See the Pen HSL by Dan Wilson (@danwilson) on CodePen.
When it comes to transitions, browsers do NOT behave like expected. HSL will be converted to RGB and the transition will occure in RGB manner… test it here: https://codepen.io/szopos/pen/gKPqwq
Of course nobody wants that “rainbowish” transition like in my codepen demo (except you like rainbows), but if you have “less complementary” colours it feels more natural if the S(aturation) and L(ightness) are “locked” and the transition goes only from H(ue) to H(ue). RGB transitions always have a grey state in the middle of the transition.
Maybe one day browsers will be able to distinguish between RGB and HSL transitions.
Long live (partial) rainbows.