Coding Colors Easily Using CSS3 hsl() Notation

August 28th, 2010 by zoltan · 16 Comments

Update: Jan 6, 2011

Check out Paul Irish’s Mother Effing HSL for a nice color-picker you can play with to get the hang of HSL.

I have heard stories about those people” that see a color and can immediately calculate the RGB hex code in their head, without any tool whatsoever. Since I have never actually met one of those people”, I don’t think they really exist. However, it would be a nice skill to have, especially when presenting a new design to a client and they say “Perfect! But can make that box a brighter orange, and that do-hickey a less pronounced purple? And can you show us how it would look right now?

This seemingly impossible task of coming up with color codes off the top of your head can be done using CSS3’s hsl color notation. HSL is a much more “human-friendly” notation than RGB, and with it you can code colors in your head easily without using The GIMP’s or Photoshop’s color-wheel.

Don’t believe me? Read on and I’ll show you. You’ll never want to go back to RGB again. And even though IE 6-8 doesn’t support HSL natively, we will cover how support can be added.

Notation

An HSL color code uses the following CSS3 notation:

#myObject {
    background: hsl(120, 50%, 50%);
}

The first number is the hue, the second number is the saturation, and the third is the lightness. These three terms are what HSL stand for. But how does one manipulate these numbers? Easily.

Step 1: “Young Guys Can Be Messy Rascals”

Red: 360°
Yellow: 60°
Green: 120°
Cyan: 180°
Blue: 240°
Magenta: 300°

This diagram is not an image. It was generated with HTML using CSS3 transform functions and hsl() color notation, and cssSandpaper for browsers that don’t support it.

Memorize this sentence. If you do, you will be to remember the six major colors in the HSV color wheel: Yellow, Green, Cyan, Blue, Magenta and Red. These colors are spaced out by angles of 60 degrees. If you follow the mnemonic, you should be able to remember the diagram on the left very easily.

So, if you want to pick green, you would code:

hsl(120, 100%, 50%)

(Don’t worry about the second and third parameters for now … we will get to that in a second).

Blue would be:

hsl(240, 100%, 50%)

Let’s say you wanted a color that is not on the wheel, like purple. Purple is halfway between blue (240°) and magenta (300°) so we should pick something in between:

background-color: hsl(270, 100%, 50%)

Think it should be more blue? Choose an angle closer to blue!

background-color: hsl(255, 100%, 50%);

Want more magenta instead? Then choose angle closer to magenta:

background-color: hsl(285, 100%, 50%);

Note that you do not put use the deg keyword link in CSS3 Transforms. It seems a little inconsistent, but at least it’s less typing.

Step 2: Choose Your Intensity

The second parameter is the colorfulness, or saturation. The larger the percentage, the more “colorful” this color is. Let’s take a look at what happens when we change green’s (120°) colorfulness:

hsl(120, 0%, 50%) hsl(120, 25%, 50%) hsl(120, 50%, 50%) hsl(120, 75%, 50%) hsl(120, 100%, 50%)

The more the saturation percentage, the less “gray” it is.

Step 3: Lighten it up

The final step is to lighten up the color to the right level. That can be done with the final parameter:

hsl(120, 50%, 0%) hsl(120, 50%, 25%) hsl(120, 50%, 50%) hsl(120, 50%, 75%) hsl(120, 50%, 100%)

That’s It!

Try it when you are using color on your next project. You’ll find using the HSL color-space is much easier than using RGB

Browser Support

HSL is supported in almost all the major browsers: Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 10+ and Explorer 9.0+. For the browsers that don’t support it, I have updated cssSandpaper to implement HSL with the CSS color property, as well as the border, background family of properties (i.e. border-right, background-color, etc).

Also supported by cssSandpaper is HSLA, which is to HSL, as RGBA is to RGB. It contains a fourth element, the alpha channel, that is a number from 0 to 1. To illustrate how this works, let’s say an HTML element has a grid as a background image. How can you shade that background image so that it looks, say, more green?

hsla(120, 50%, 50%, 0.25) hsla(120, 50%, 50%, 0.5) hsla(120, 50%, 50%, 0.75) hsla(120, 50%, 50%, 1)

The table above is not an image — it is a real example of hsla() in action. Pretty neat, huh? You can also use HSL and HSLA color in gradients. The cssSandpaper library has supported WebKit style gradients with it’s own -sand-gradient property. Now it supports HSLA gradients, like this 80% opaque yellow to 20% opaque blue linear gradient:

-sand-gradient(linear, center top, center bottom, from(hsla(60, 100%, 50%, 0.8)), to(hsla(255, 100%, 50%, 0.2)));

Unfortunately, cssSandpaper only supports HSLA for background coloring only, not border or text coloring, but one would just use progressive enhancement to take care of that edge case, since what it does support, in my humble opinion, is rather cool. Download the latest version from the link below and use HSL and HSLA color notation now! You’ll impress your developer friends with your off-the-top-of-your-head color-coding skillz. :-)

Get the latest version of cssSandpaper from the official documentation page

Tags: Color · CSS · CSS3 · hsl/hsla · Polyfills

16 responses so far ↓
  • 1 Lorel // Sep 14, 2010 at 7:59 am

    WOW!! Great idea! I’ve been looking for something like this instead of trial and error to get the right color shade.

  • 3 Dave // Jan 5, 2011 at 7:38 pm

    This is a really great tool – you da man!

    Thanks for making this available. Hope it stays around for a while!

  • 4 Jeremy Carlson // Jan 5, 2011 at 7:40 pm

    I like! I didn’t know about HSLA – SO much more intuitive! But not likely to use yet, unless I have other CSS3 needs on the same project. It seems like a lot of scripting to download to avoid having Photoshop or My little Digital Color Meter open. I’m bookmarking you though :)

  • 5 Jeffrey // Jan 5, 2011 at 7:43 pm

    I agree: “You’ll never want to go back to RGB again.” I use the color picker at http://www.workwithcolor.com/hsl-color-picker-01.htm for my work.

  • 6 zoltan // Jan 6, 2011 at 12:40 am

    @Dave: As long as people show interest, I’ll keep working on cssSandpaper. Thanks for the the kind words!

  • 7 zoltan // Jan 6, 2011 at 12:42 am

    @Jeremy: One of the things I am working on is a more modular cssSandpaper, where a base script will only load the components the developer needs. For example, if s/he wants to use HSL colours, but not CSS3 transforms, then only the HSL code will load. Keep an eye on this blog in the next little while. ;-)

  • 8 SomeGuyNamedDylan // Jan 6, 2011 at 5:38 pm

    Great write up! Thanks for sharing.

    As for your statement: “I have heard stories about “those people” that see a color and can immediately calculate the RGB hex code in their head”

    Watch this…Or read this rather:

    Red : #F00
    Black: #000
    Green: #0F0

    Wooo Hooo 3 for 3!!!

  • 9 Josh L // Jan 6, 2011 at 7:04 pm

    Yay for HSL love. I have also never met someone who could actually think in RGB values. I have, however, met folks who have been working in the print industry for far too long who can actually think in CMYK. Scary stuff.

    But any idiot can think in HSL. I love that I can use HSL values for CSS3 properties that non-HSL browsers won’t see anyway. Also, HSLA (and RGBA, but fuck that!) actually “blends” with colors below it when you mess with the alpha, making CSS shadows behave the way they do in Photoshop.

    Cheers!

  • 10 zoltan // Jan 8, 2011 at 2:31 pm

    @SomeGuyNamedDylan: Your RGB-foo is quite impressive! I hope you use your powers for good rather than evil. ;-)

  • 11 Brandon Mathis // Mar 2, 2011 at 6:15 pm

    I just created http://hslpicker.com which uses live gradients and sliders to make HSL picking easy and precise. The url updates with the hex code for easy sharing too.

  • 13 Nick Yeoman // Mar 20, 2011 at 3:56 pm

    I know 3 people who can think in RGB hex codes, so they are out there. I’m not one them, thanks for this article, makes my life easy.

  • 14 dacree // Mar 24, 2011 at 10:34 am

    Thanks for this. Best explanation of CSS3 HSL I’ve read.

  • 15 Marie // Nov 30, 2011 at 2:41 am

    Thank You!!! With your examples I finally understood how to convert colors’ range, that I see, to HSL.

  • 16 John // Dec 29, 2012 at 12:34 am

    Fantastic it saved my life!

Give Feedback

Don't be shy! Give feedback and join the discussion.

Please Note: If you are asking for help using the information on this page or if you are reporting a bug with the code featured here, please include a URL that shows the problem you are experiencing along with the browser/version number/operating system combination where the issue manifests itself. Without this information, I may not be able to respond.

An orange star denotes a required field.