I recently learned about the HSLa format for specifying colors with CSS3. When would I use HSLa over RGBa?

Here are two articles that briefly talk about it:

  • I think your first link pretty much answers your question.
    – DA01
    Nov 20, 2010 at 0:05

4 Answers 4


Not specific to CSS, i.e. in general it does not really matter much whether you specify one color in HSL or RGB, where it matters is if you need to interpolate over the color value, going from red to green in HSL is a lot more predictable than in RGB. And you can do it without changing the perceived brightness of the color. This means it is helpful whenever you need to change color (fade, gradient ...)

Is is also easier to pick a color in HSL/HSB (these are two slightliy different color models). The photoshop color picker that you see is a HSB color picker, choose H on the bar on the left, choose S on the horizontal axis of the color patch and B on the vertical axis.


I thought Jon Hicks had an interesting take on HSL from a designer's perspective, especially regarding the ability to see color:

Finally I could use numbers to select my colours, and once I’d learned where the hues sat on the scale, I was away! Not just for CSS either, as 85% of my work time is spent in Illustrator, creating either icons, logos, or illustrations.

Hue, Saturation, Lightness is a post on The Hickensian


HSL is great for situations where you'll need to change values, but RGB is the industry standard and is the most compatible. Changing brightness or color with HSL would require a simpler javascript function than using RGB.


Not at all. IE won't support it, and specifying a fallback? Seriously? It's the same color declaration twice for no reason.

If you need to provide something kuler (i.e. generating dynamic color schemes based on algorithms) you should ideally do it server-side, or, if necessary, via JS. But no need to use this as it doesn't bring anything to the table.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.