I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Photograph of a face during the Indian festival of Holi, taken by Thomas Hawk -

Three Ways You Should Be Using HSL Color In Your Site Today

css / color

Estimated reading time: 3 minutes

Cet article est également disponible en français

There are some areas in which using hsl color in your 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 . Using a few simple rules can create harmonious color choices that work in every situation.

hsl complimentary color scheme

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!*

hsl monochromatic color scheme

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 CSS3 code 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.

When Should You Not Use HSL Colors?

Short answer: when you need the site to be viewed in IE8 or lower. If you want IE support, Sass can automatically translate hsl colors to hexadecimal… so there’s little excuse not to start using the advantages of hsl today.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.