Why should you use HSL color representation in CSS?

In the article below, I’ll try to present you why it’s worth using HSL color representation in CSS.

What is HSL (Hue Saturation Lightness)?

HSL (Hue, Saturation and Lightness) is the color representation. It is user-friendly because without a big knowledge, you can imagine how specific color looks like. Hue is one pure pigment — without any tint or shade. Color saturation is about intensity. Lightness is about how light color is.

How to read color code?

To read the color, first you need to take a look at hue (first position in color code). It is from range 0 to 360°. Regarding the color wheel, 0° stands for red, 120° for green, 240° for blue.

Next is saturation, 0% stands for grey, 100% is maximum intensity. The last thing is the lightness. 0% means the color is black because completely no light, 50% color is neutral, 100% color is white. 380° is the same as 20°, and -120° is the same as 240°

What’s so cool about HSL?

Well, one of the biggest advantages of using HSL is its readability. You don’t have to spend many hours to learn how to read HEX code. Also, it’s much easier than imagining RGB.

CSS Variables with HSL

As you can see on the example used below, it’s rather nice and easy to create a color palette.

For secondary color, I added 180 to hue. Why? Because now primary and secondary are complementary colors. It’s basic color theory. Check out the video below. It’s awesome! After watching this, you’ll understand the advantage of HSL over RGB or HEX.

How to use it for toggling between light and dark themes?

Dark themes are pretty hot recently – it’s one of the top functionalities in number of applications. How can you swap between light and dark themes then? Of course with Sass, or even pure CSS (toggling some ‘dark-theme’ class with JavaScript). What is the downside of that solution? Much more CSS code.

So maybe instead of this, you should try the solution below.

You can basically use something like this. Of course, it’s oversimplified, but what I wanted to present is the flexibility of working with HSL colors. This is a huge power to have the opportunity to deal with every property of color separately.

Readability (again… 😉)

Let’s assume you have a button. This button has some text with white color and background in that color: rgb(30, 144, 255). Now, let’s say that you want to make this background darker when  hovering – to increase its contrast.

Which color should you use?

• A. rgb(30, 193, 255) 
• B. rgb(107, 181, 255)
• C. rgb(178, 34, 143)
• D. rgb(0, 105, 209)

It’s difficult to say, right?

Now let’s do the same with HSL. Base color: hsl(210, 100%, 56%).

Which color is the most suitable one?

• A. hsl(197, 100%, 56%)
• B. hsl(210, 100%, 71%)
• C. hsl(315, 68%, 42%)
• D. hsl(210, 100%, 41%)

Now, the percentage of correct answers should be much higher. Obviously, the answer is D.

Color palette

Basically, things you do with Sass can be done with CSS. You need to lighten something? Just add some value to lightness. Need to make it darker? Let’s subtract that. Complement? Add 180 to the hue. And now, where Sass ends – you still have CSS variables. Triada? Just add 120 to the first color and 240 to the second one. Analogous colors? Work with degree variable. 🙃

Let’s take a look at the pen below. You can try changing the color in the picker and see the results.

How to check HSL code for your RGB/HEX?

Chrome DevTools is a wonderful tool. Just inspect the element with a color you need, find the style (color, background-color, etc.) and while holding shift button, click at the square with color picker. It goes in that order HEX -> RGB -> HSL. Really nice feature.

Switching between color codes in Chrome DevTools

If you don’t want to waste time looking for a style for the specific color, you can just open DevTools and add a new color style in an element.style. Then, type whatever color you want (red is the shortest 😉).

After that, open the color picker and click the color which value (or values) you want to know.

HSL transparency

It works exactly the same as with RGB, just add alpha channel with a value from 0 to 1. It’s as simple as the example below.

hsla(220, 70%, 45%, 0.3)

As you can see – HSL is pretty cool. It’s really nice alternative in color representation which makes the whole process way more intuitive. Also, from user perspective, HSL color representation is way easier.

You don’t have to be proficient in color representation and still – you can imagine how specific color looks like thanks to HSL.