There are some areas in which using hsl color in your CSS has so many advantages it’s surprising that more developers don't take advantage of it.

Create Rapid Prototypes For Site Color Schemes

hsl is ideal for the quick creation of site color schemes, especially for developers who may not have a strong grasp of design or color theory. Using a few simple rules can create harmonious color choices that work in every situation.

As an example, let’s say you have a central tone that you want to use to quickly generate a site’s color scheme. For instance, you might have a burnt orange color derived from a client’s logo, which corresponds to hsl(30,90%,29%).

To generate an instant complementary color, just add 180 degrees to the hue value: in our example, that gives a result of hsl(210,90%,29%). Easy!*

Create an instant monochromatic color scheme: take the saturation value and subtract thirds from it. Our base color is hsl(30,90%,29%), so the additional colors will be hsl(30,60%,29%) and hsl(30,30%,29%).

For a neutral color scheme: subtract from and add to the hue value by the same amount, up to 90°. For example, a 30° neutral color split would add the colors hsl(0,90%,29%) and hsl(60,90%,29%).

Triadic color scheme: add 120° to the hue value of the base color.

Used well, this eliminates the entire debate of “what color goes with this?”, helping to generate the design of a site very quickly.

Fast Color Adjustment

How many times do clients ask “can we make the background a little lighter?” If you’ve specified colors in RGB or hexadecimal, that means adjusting three components simultaneously, trying to make sure one doesn’t jiggle up or down more than the others. If you’ve coded the color scheme of your site in hsl, it’s easy. Want the orange background of a page to be darker? Take this:

body {
	background: hsl(60,100%,50%);
}

And just dial down the last number:

body {
	background: hsl(60,100%,40%);
}

Done! And if you’ve used the color scheme technique we discussed above, you can adjust the other colors in the site just as easily.

Create Rapid Color Variants For New Styles

I’ve been working on an article that uses a radial gradient to create a tell-tale light in a button element, shown to the right (best seen in Webkit, as of this writing) based on work by simurai. Stripped of vendor prefixes, the CSS looks like this:

input {
	background-image:
		radial-gradient( 
			hsla(0,100%,90%,1) 0%,
			hsla(0,100%,70%,1) 15%,
			hsla(0,100%,60%,.3) 28%,
			hsla(0,100%,30%,0) 70%
		);
}

If I wanted to make a blue light, all I have to do is rotate the hue component of the HSL code:

input {
	background-image:
		radial-gradient(
			hsla(200,100%,90%,1) 0%,
			hsla(200,100%,70%,1) 15%,
			hsla(200,100%,60%,.3) 28%,
			hsla(200,100%,30%,0) 70%
		);
}

That’s it: the new light has the same intensity and brightness, just in a different hue. No more fiddling with red, green and blue values.

^* You might wonder what happens if the hue value of the original is greater than 180. The answer is that it doesn’t matter: browsers will happily “go around the clock” with values greater than 360. Even negative numbers work

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.