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

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

This post will take 3 minutes to read.

I’m confident that most of you have heard of rgba colors being used in CSS, and I’m hoping that you have also heard of hsla colors. Are you actually using hsla though?

I started 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 better or why, it is about why I think hsla is much more intuitive and easier 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 actually is hsla, other than standing for hue, saturation, lightness and alpha (let’s ignore the alpha channel, or opacity, for now)?[1] Put simply, HSL is a rearrangement of the RGB color model aimed at being more intuitive. The RGB color model is an additive color model in which red, green, and blue light is added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green, and blue.[2]

As a quick aside, you are all familiar with hexadecimal color codes? Well hexadecimal notation is actually a form of RGB, written as #rgb or #rrggbb.[3]

Let’s get back into it! The main problem with using RGB is that it can be tricky to work out colors and shades. This is where HSL comes in. Now there are other color schemes available such as HSV (also known as HSB, as used by Photoshop) but HSL is symmetrical to lightness and darkness and is easily converted to RGB.[4]

Why is HSL so much easier to use than RGB? Mainly due to the use of hue. The hue is determined from a value on a color wheel where 0 and 360 are red, 120 is green and 240 is blue. Remembering that isn’t too difficult, here is how I do it:

It’s not hard to remember that RGB stands for red, green and blue, and we all know that a circle (or color wheel) has 360 degrees. Well if you divide 360 by the three colors you get 120. So starting out at 0 for red, add 120 to get to green and another 120 to get to blue! Simple right?

Now that we can easily work out the hue, the other two values are a piece of cake. Saturation is a percentage with 0% being grayscale (no color) and 100% being full saturation (full color). Lightness is also a percentage with 0% being completely dark (black) and 100% being completely light (white). This means that once we have worked out our color value we can adjust the saturation and lightness in a way that makes sense. How much easier is working out shades of colors now? If you want a lighter shade of that red then you only need to change one value!

Browser support for hsla is the same as for rgba, they work on basically everything that isn’t IE8 or below. This means that if you do decide to start using hsla (I highly recommend that you do!) you will still need to have a fallback color declared in hex first. But you should be used to doing this when using rgba right?

Here are a few of the common colors in hsla:

black  - hsla(0, 0%, 0%, 1)
gray   - hsla(0, 0%, 50%, 1)
white  - hsla(0, 0%, 100%, 1)
red    - hsla(0, 50%, 50%, 1)
yellow - hsla(60, 50%, 50%, 1)
green  - hsla(120, 50%, 50%, 1)
aqua   - hsla(180, 50%, 50%, 1)
blue   - hsla(240, 50%, 50%, 1)
pink   - hsla(300, 50%, 50%, 1)

Addendum:

Those of you that use Photoshop (or an equivalent) to do your design work may not benefit from changing to hsla. RGB colors are easily copied from Photoshop into your stylesheet, whereas the HSV color model used by Photoshop does not translate to HSL.

References:

  1. The format of the HSL Value
  2. RGB color model
  3. RGB color values
  4. HSL color values

Tweet this