HSL() / HSLa() is great for programmatic color control
If you ever need to hand-manipulate a color in native CSS, HSL is pretty much the only way. HSL (the
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!
Not long ago, I basically did the same thing but rotated the hue to animate this stargate:
Need a quick color picker? I put this one together ages ago and I quickly ported it over to 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.
The post HSL() / HSLa() is great for programmatic color control appeared first on CSS-Tricks.