User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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:

share|improve this question
I think your first link pretty much answers your question. – DA01 Nov 20 '10 at 0:05
up vote 8 down vote accepted

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.

share|improve this answer

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.

share|improve this answer

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

share|improve this answer

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.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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