Grow your CSS skills. Land your dream job.

Yay for HSLa

Published by Chris Coyier

Huge sogging longbottoms? High strength low alloy steel? NOPE, we're talking Hue Saturation Lightness (and alpha) and it's a way of declaring color in CSS. It looks like this:

#some-element {
   background-color: hsla(170, 50%, 45%, 1);
}

It is similar to RGBa in that you declare three values determining the color and then a fourth value for its transparency level. You can read more about browser support below, but it's basically any browser that supports rgba supports hsla too.

  • Hue - Think of a color wheel. Around 0o and 360o are reds 120o are greens, 240o are blues. Use anything in between 0-360. Values above and below will be modulus 360.
  • Saturation - 0% is completely denatured (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.

Let's dig in.

Why is it cool?

The real appeal of HSLa is that it makes more intuitive sense what changing the values will do to the color. Increasing the second value will increase the saturation of that color. Decreasing the third value will decrease the lightness of that color. That makes creating your own color variations on the fly way easier. I would wager that most of us can't create nice and consistent color variations like this using the RGBa model.

The HSLa model also makes changing color values programatically much easier. Check out the demo tool emphasizing that.

Why is it less utilized?

This is me making a big assumption, but from what I can tell, HSLa is much less utilized in the wild than RGBa is. If you have any ideas of why that is, please share in the comments. My theory is that HSL values are harder to get your hands on, as far as sampling from the screen or a Photoshop document.

I guess Photoshop uses Hue/Saturation/Brightness model instead. I honestly don't quite understand the difference, but when I was first attempting this, this is the situation I got in.

Getting HSLa values

There is a little app for Mac called Colors from Matt Patenaude.

You just click the magnifying glass and then anywhere on the screen. It will fill in the color in the box. Then you can select the hsla option and copy it to your clipboard. There are preferences for tweaking the formatting just how you want it to. Works pretty well. My one gripe being that if you close the little floating window, it won't reopen unless you quit and restart the app. Might be a Snow Leopard thing and the app hasn't been updated in a while? I dunno.

If anyone has a favorite Windows or Linux tool for capturing color that has HSLa as a feature, let me know in the comments and I'll update it here.

Browser Support

Firefox 3.0+, Safari 3+, Chrome 6+ (maybe older too?), Opera 10+ (maybe older too?)

As usual IE is left out of the party. Even version 8. I have a feeling version 9 will be supporting it but don't have any proof yet. Anyone have it installed and can test? For IE, you can just declare a fallback color. IE 8 doesn't support RGBa either, so just using a hex code is the best bet.

#some-element { 
    background-color: #e2ecf0; /* Fallback */
    background-color: hsla(190, 30%, 94%, 1); 
}

My Tool

As a demo of how easy it is to create color variations programatically, I created the HSLa Explorer. There are two slides on the page. The top one controls the hue value and the second one controls the opacity level. It takes those values and builds a grid of 100 color variations, where the saturation and lightness are varied in a matrix.

IE doesn't like something in JavaScript (in the demo) for some reason, but no matter, IE doesn't like HSLa anyway. Thanks to Matthieu Sieben for helping improve the demo.

More Tools

Comments

  1. That is a great tool for finding the HSLa of different color arrays.

  2. Thanks for HSLa Explorer.

  3. This seem to work. I took a hex value that I had an pasted it in the hex input.

  4. I was looking on this table, very good job on this tool.

    I think I will try to do something with this kind of color code… Lets see…

    Thanks.

  5. Permalink to comment#

    “HSLa is much less utilized in the wild than RGBa is. If you have any ideas of why that is, please share in the comments.”

    “As usual IE is left out of the party. Even version 8.”

    Is there really any benefit to using HSLa on a live site if you still have to declare a fallback color? It’s great for coming up with a color scheme, but if you have to convert to RGBa you might as well just stick with RGBa in your CSS.

    • That’s not the case.

      Pretty much any browser supporting RGBa supports HSLa. So if you are using RGBa in your designs now, you could be using HSLa with the same browser support. Yes, you have to declare fallbacks for IE (hex is best), but you have to do that with RGBa too.

  6. Awesome, Chris! I think HSLa is under-utilized because not that many people know about it. It seems that RGBa has been publicized a lot more.

    I’m glad you published this article, though, because hsla looks really neat and deserves some more attention.

  7. Polyfragmentiert
    Permalink to comment#

    #some-element {
    background-color: #e2ecf0; /* Fallback */
    background-color: hsla(190, 30%, 94%, 1);
    }

    Shouldn’t the fallback color come second in case the UA doesn’t understand the hsla one and skips it? I’m a little confused here.

    • This is correct.

      If the browser supports hsla, it will overwrite the previous declaration. If it doesn’t, it will ignore it and use the hex code.

  8. Permalink to comment#

    Wow, nice work on that demo tool thing, I couldn’t stop playing with it..sweeet!

  9. Permalink to comment#

    “If anyone has a favorite Windows or Linux tool for capturing color that has HSLa as a feature, let me know in the comments and I’ll update it here.”

    Not Windows or Linux, but I use ColorTagGen (Mac). I like being able to tweak colors. Anyone use something better?

  10. Love this post, I cannot believe I have never used HSLa before.

  11. This is soo underneath the radar for me. Learn learn learn!

  12. HSLa is so much easier to use because you can make color and shade adjustments without needing to open up Photoshop to get a RGB color code. I love it.

  13. There is no device with HSL color space. Monitor works with RGB, printer with CMYK. HSL is always computed. It helps a lot with making color harmonies and choosing colors more natural way. HSL was and in-between phase. But with web colors it makes sense, because there’s no real color management in web design.

  14. This is a really interesting article – it’s useful to know some common mistakes, and how to deal with them

  15. You guys always rock. This one is special one from ur’s.

  16. A solution to this issue could be quite simple: Allow floating-point values for HSL, and the above-mentioned accuracy problems disappear.

  17. If is not applying for IE it just lost my interest.

    Not that I like IE or something like this but sadly I am more a IE debugger than a web developer and everything is not working in IE also it freaks me out.

  18. Okay, I think I know what’s going on with Photoshop and HSL.

    But I’m going to need to write about it somewhere with more room than a comment box. =)

    The gist is: divide the Brightness (B) in Photoshop by 2 when you’re trying to get a darker color. Divide the Saturation (S) by 2 when you’re trying to get a lighter color. There are a few caveats, but it’s relatively simple.

    You can do that kind of math in your head, once you know the method. More to come! Great post Chris.

  19. Additionally, this color picker for Photoshop might be helpful: http://anastasiy.com/magicpicker

    It’s got a triangular HSB picker, which is kind of similar to how HSL works, more so than using the square shaped picker.

  20. The ‘Rainbow’ add-on for Firefox lets you inspect the colour of web page elements and gives you hex, rgb and hsl values. It also has a colour picker. Won’t let you select anything off-page though.

    https://addons.mozilla.org/en-US/firefox/addon/14328/

  21. thinsoldier
    Permalink to comment#

    Why couldn’t the alpha value be a percentage as well?

    Or is it yet another one of those things that was decided ages ago and nobody can find an explanation for (despite having working group e-mail logs going back to the big bang?)

  22. thinsoldier
    Permalink to comment#

    Are there any professional design software (like photoshop) that use HSL instead of HSB?

    If not, why did the group choose HSL over HSB?

    Would it not be possible to have RGBa and HSLa and HSBa and maybe even Lab or CMYK if some browser dev feels like being a completist?

    Somebody’s just going to make a javascript function that converts hsb to hsl anyway, so why not add hsb to the standard?

  23. Crypto
    Permalink to comment#

    SASS is a server-side CSS pre-processor that also supports HSLA, math, nesting, and mixins. However, SASS outputs HSLA colors as hex so it works on IE. SASS integrates seamlessly with Ruby on Rails but the command line version works for any project. Keep your stylesheets DRY with SASS and you’ll never use anything else.

  24. Ant
    Permalink to comment#

    HSL is confusing for me, because:

    You need to add % for S and L, but not H (I would prefer if you don’t need to add it at all)

    It wasn’t matching HSB from Photoshop, maybe I did something wrong.

    I would use HSL only if need to animate colours, otherwise RGB.

    • Plus, isn’t the Hue measured in (360) degrees? I though there was a “deg” measurement like “px” and “em”.

      Why doesn’t the H use “deg”?

      Speaking of which, in some other parts of css there are times when you can use a percentage (ie: 1% or 87%) but other times when you have to use a decimal (ie: 0.01 or 0.87).

      Why not allow decimal or percentage in both cases?

  25. Thanks Chris! HSL is so much more intuitive for us old designers! Perfect for when you want tints or shades of a color w/o shifting color.

    I’ve also noticed Photoshop is ‘off’ when grabbing RGB values. Colors I build with RGB in CSS are not matching the Photoshop graphics built w/hex values. My current project revolves around a violet hex value which is shifting. Not sure, but I think something’s happening when I save for web as PNG file.

    • thinsoldier
      Permalink to comment#

      .png saved from some versions of photoshop when shown in some versions of some browsers in some OS’s tends to come out brighter than the original image.

      See: http://morris-photographics.com/photoshop/articles/png-gamma.html

      If it’s a completely different color you need to calibrate your monitor then calibrate photoshop’s color management settings to make sure photoshop is working in the same color space as your monitor (or something like that…I never did fully comprehend it)

  26. Tom J Nowell
    Permalink to comment#

    Your demo works on iPad until you try to move the sliders and the whole page scrolls instead!

    But a good read nonetheless!

  27. Thanks so much for writing this article, Chris! I wish HSLA got more attention. So much more intuitive than RGBA.

    I’ll second the recommendation of Rainbow for Firefox. A couple good online color tools that support HSLA: Doughnut Color Picker and http://serennu.com/colour/hsltorgb.php

    The third IE 9 preview supports HSLA now. Yay!

  28. Charlie Cathcart
    Permalink to comment#

    My color picker of choice, which supports HSLa, is Frank DeLoupe for OS X. Well worth the 99 cents.

  29. Sip is the best color tool I’ve found for Mac, hands down.

    http://theolabrothers.com/sip/

  30. CP

    Can any one help to fix this.
    i’m using .
    @theme:#5c0632;

    But the below syntax is not working..
    @themeColor:hsl(@theme, 99%, 64%);

    Actaully In HSL, i just want to randomly change “H” value based on my theme.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".