Why should you use HSL color representation in CSS?

3 min

read

As you style your fronts, it doesn’t matter if you use CSS, Sass, styled-components, emotion, CSS Modules or something else. You often use HEX or RGB to define a color. Is this wrong? No. Can you do it better? Yes, indeed! In the article below, I’ll try to present you why it’s worth using HSL color representation in CSS. 

What is HSL?

HSL (Hue, Saturation, 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.

An image of HSL color wheel
HSL color wheel

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 do you think about frontend development trends? Let us know by filling in the State of Frontend 2020 survey!

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 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. 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 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. So, with that all being said – why wouldn’t you use it in your projects, hmm?

Estimate your project





or contact us directly at [email protected]

This site is protected by reCAPTCHA and the Google
Privacy Policy and Terms of Service apply.

Thanks

Thank you!

Your message has been sent. We’ll get back to you in 24 hours.

Back to page
24h

We’ll get back to you in 24 hours

to address your needs as quick as possible.

Estimation

We’ll prepare an estimation of the project

describing the team compostition, timeline and costs.

Code review

We’ll perform a free code review

if you already have an existing system or a part of it.

Our work was featured in:

Tech Crunch
Forbes
Business Insider

Aplikujesz do

The Software House

CopiedTekst skopiowany!

Nie zapomnij dodać klauzuli:

Kopiuj do schowka

Jakie będą kolejne kroki?

Phone

Rozmowa telefoniczna

Krótka rozmowa o twoim doświadczeniu,
umiejętnościach i oczekiwaniach.

Test task

Zadanie testowe

Praktyczne zadanie sprawdzające dokładnie
poziom twoich umiejętności.

Meeting

Spotkanie w biurze

Rozmowa w biurze The Software House,
pozwalająca nam się lepiej poznać.

Response 200

Response 200

Ostateczna odpowiedź i propozycja
finansowa (w ciągu kilku dni od spotkania).

spinner

State of Frontend 2020

Take part in the survey