CSS - hsl or rgb(a) colors

Question

I am about to start a new project and I want its CSS to be both consistent and performant. I was wondering which color units I should use. Medium and Trello have different approach advocating rba over hsl and vice versa. I am really struggling to understand the benefits of each other

What are the pros/cons of hsl over rgb?

Answer 1

Old question, but here's my answer nonetheless.

First off, if you're a pure developer and want to just get coding and finish the project, go ahead and use any colour format, it doesn't matter. But if you're worried about usability and hand-off to a larger team and so on, read on.

So, formats like hex and rgb are meant to be more machine-readable than human-readable. HSL is the opposite— meant to be understandable by humans better.

HSL stands for Hue, Saturation and Lightness. Hue is the value of the actual pure colour, such as Red, Green, Blue, Yellow, Purple and so on, as represented on a colour wheel. The value is in degrees, from 0 to 360.

As Thomas rightfully pointed out in the comments, the degrees for blue here should be 240, not 270.

Saturation is how much of that colour is present in the mix. It's a percentage scale, from 0% to 100%. 0% saturation outputs a dull grey, meaning there's 0% of your hue in the mix.

Lightness is again a percentage value, from 0% to 100%. 0% means its completely dark, in other words— pure black. 100% is, well, pure white.

HSL is an intuitive colour format that mimics the real world. For example, you're probably sitting at a desk right now. Notice the colour of the desk. Let's say its a mahogany desk. It's colour values would be—

Hex: #4f2017;
RGB: rgb(79, 32, 23);
HSL: hsl(10, 55%, 20%);

Now hold your hand above it, like a couple of inches above the surface. Your hand's shadow now makes the desktop a bit darker, right? Now, it's impossible to represent this colour change in hex or rgb, without changing the colour itself. But in hsl, it's a absolute breeze— simply decrease the Lightness value, and bam! The colour remains the same, but with a bit of black mixed in— basically lessen the Lightness value.

OLD VALUES                    NEW VALUES 
Hex: #4f2017; --------------> #200d09;
RGB: rgb(79, 32, 23); ------> rgb(32, 13, 9);
HSL: hsl(10, 55%, 20%); ----> hsl(10, 55%, 8%);

As you can see, the values of Hex and RGB have completely changed, whereas HSL only one aspect changed. Because of this, it becomes intuitively easy to create colour schemes on the fly.

If I told you the button on the webpage needs to be #61904a or rgb(97, 144, 74), can you guess what the colour could be? Nope, not unless you're a computer.

But the same colour in HSL: hsl(100, 32%, 43%). Now the Hue value is 100°, meaning it's close to pure Green which is 120°. So its a green of some sort. Next, its 32% saturated, meaning 32 steps from being a dull grey, which a pretty desaturated green. Next, its 43 steps from being pure black, and inversely, 57 steps from being pure white. So, on the darker side.

Make the button lighter on Hover, and darker on Click? It's a snap, just increase and decrease the last value, Lightness. That's all. This is impossible to do with Hex and RGB without a tool or a designers help.

This way, you can build colour schemes with HSL, all by yourself. Hope this answers your question sufficiently.

Answer 2

In my opinion:

HSL(A):

Pro: HSL is convenient when making things lighter or darker, is faster to write, allow you to modify luminosity and saturation without modifying the color itself.

Cons: HSL could be not supported in older browser (like IE < 9).

RGB(A):

Pros: RGBA is well-known and supported even in older browser.

Cons: When making things lighter or darker you need to rewrite the color.

Answer 3

I realize this thread is old, but the debate lingers. I teach Web development and even current textbooks still remain inconsistent on this issue.

There are, however, distinct reasons to choose one format over another.

1. Use the same format the rest of your dev team uses.
2. Use hex if your target visitors use severely outdated browsers to view your sites.
3. Use RGBa if you are already familiar with that format.
4. Use HSLa if the first 3 options don't take you in another direction. HSLa allows you to code for transparency that RGBa does but in a way that is human-accessible and it is supported broadly enough by this time that you're not really excluding many existing devices from viewing your Website.

As with all things, though, stay flexible. Rigidity in approach is a sign of cognitive rigor mortis in a developer.

The reality is that you can get by with any format, though hex has the limitation of not supporting transparency and RGBa has the limitation of not being easily adjusted without using a separate reference or tool. For that reason, my strong recommendation is HSLa. Once you learn the color wheel you should be able to guess the codes for any color you should wish to create and be in the ballpark. Try that with any other format and you'll be flummoxed.

Answer 4

Truth is, there are no advantages or disadvantages to either model. Both models can create the same colors. It depends solely on your mental model of color. Do you find it easier to think of a color as a combination of red, green and blue, or as a certain hue with a lightness and value? If you're used to one model, it's obviously better to use that one.

Personally I prefer RGB because that's what many drawing applications use. I can use HSL and I dislike Hex because I find it hard to read.