HSLa, Are You Using It? Here is Why I Think You Should Be

I’m con­fid­ent that most of you have heard of rgba col­ors being used in CSS, and I’m hop­ing that you have also heard of hsla col­ors. Are you actu­ally using hsla though?

I star­ted out using rgba but as soon as I heard about hsla I did a little research and made the switch. I haven’t looked back since. Now this isn’t about which one is bet­ter or why, it is about why I think hsla is much more intu­it­ive and easi­er to use. For those of you that haven’t heard about hsla, or are unsure about using it, I hope that this clears things up.

So what actu­ally is hsla, oth­er than stand­ing for hue, sat­ur­a­tion, light­ness and alpha (let’s ignore the alpha chan­nel, or opa­city, for now)?[1] Put simply, HSL is a rearrange­ment of the RGB col­or mod­el aimed at being more intu­it­ive. The RGB col­or mod­el is an addit­ive col­or mod­el in which red, green, and blue light is added togeth­er in vari­ous ways to repro­duce a broad array of col­ors. The name of the mod­el comes from the ini­tials of the three addit­ive primary col­ors, red, green, and blue.[2]

As a quick aside, you are all famil­i­ar with hexa­decim­al col­or codes? Well hexa­decim­al nota­tion is actu­ally a form of RGB, writ­ten as #rgb or #rrggbb.[3]

Let’s get back into it! The main prob­lem with using RGB is that it can be tricky to work out col­ors and shades. This is where HSL comes in. Now there are oth­er col­or schemes avail­able such as HSV (also known as HSB, as used by Photoshop) but HSL is sym­met­ric­al to light­ness and dark­ness and is eas­ily con­ver­ted to RGB.[4]

Why is HSL so much easi­er to use than RGB? Mainly due to the use of hue. The hue is determ­ined from a value on a col­or wheel where 0 and 360 are red, 120 is green and 240 is blue. Remembering that isn’t too dif­fi­cult, here is how I do it:

It’s not hard to remem­ber that RGB stands for red, green and blue, and we all know that a circle (or col­or wheel) has 360 degrees. Well if you divide 360 by the three col­ors you get 120. So start­ing out at 0 for red, add 120 to get to green and anoth­er 120 to get to blue! Simple right?

Now that we can eas­ily work out the hue, the oth­er two val­ues are a piece of cake. Saturation is a per­cent­age with 0% being gray­scale (no col­or) and 100% being full sat­ur­a­tion (full col­or). Lightness is also a per­cent­age with 0% being com­pletely dark (black) and 100% being com­pletely light (white). This means that once we have worked out our col­or value we can adjust the sat­ur­a­tion and light­ness in a way that makes sense. How much easi­er is work­ing out shades of col­ors now? If you want a light­er shade of that red then you only need to change one value!

Browser sup­port for hsla is the same as for rgba, they work on basic­ally everything that isn’t IE8 or below. This means that if you do decide to start using hsla (I highly recom­mend that you do!) you will still need to have a fall­back col­or declared in hex first. But you should be used to doing this when using rgba right?

Addendum:

Those of you that use Photoshop (or an equi­val­ent) to do your design work may not bene­fit from chan­ging to hsla. RGB col­ors are eas­ily copied from Photoshop into your stylesheet, where­as the HSV col­or mod­el used by Photoshop does not trans­late to HSL.