Why we should use HSL colors ?

Introduction

CSS colors are a powerful tool that developers use to add aesthetics and convey meaning in a website or application. They can be defined in several ways, including by name, hexadecimal, RGB, RGBA, HSL, and HSLA. Each method has its own advantages, but which one should you use?

In this article, I will explain why HSL colors are a great way to define colors in CSS and why you should consider using them in your projects.

But before we dive into the details, let's take a look at the most common ways to define colors in CSS.

HEX codes

This is probably the most common way to define colors in CSS.

A HEX code is a six-digit code that represents a color. It is made up of three pairs of two-digit numbers, each pair uses a 16-digit hexadecimal system which represents the amount of red, green, and blue in the color.

.box {
    color: #ff0000; /* red */
}

But the problem with HEX codes is that they are not very intuitive. It's hard to know what color a HEX code represents without looking it up.

Consider the following example:

.box_1 {
    color: #164863;
}

.box_2 {
    color: #2b8ec4;
}

Which one is darker? Which one is lighter? It's hard to tell that they are both blue with different shades because the hex colors are not related to each other.

I'm sure we once encountered a scenario where we had to change the color of a button or a background, and we had to try different HEX codes to find the right color. It's not very efficient.

RGB

RGB stands for Red, Green, and Blue. It is a color model that defines colors by specifying the amount of red, green, and blue in them. An optional fourth value, called alpha, can also be used to define the color's transparency.

.box {
    color: rgb(255 0 0); /* red */
}

Each value: red, green, and blue is referred to as a channel. The value of each channel can range from 0 to 255. By mixing these three channel, we can create up to 16 million different colors.

The RGB color format also allow us to define the 4th value, the alpha channel, which represents the transparency of the color. It can range from 0 to 1, where 0 is fully transparent and 1 is fully opaque.

.box {
    color: rgba(255, 0, 0, 0.5); /* red with 50% transparency */
}

HSL

Both HEX codes and RBG we have seen so far are different ways to define colors based on the same fundamental idea: passing the amount of red, green, and blue.

HSl is a different way to define colors. It stands for Hue, Saturation, and Lightness, based on the RGB color wheel, each color has an angle from 0 to 360 degrees and a percentage of saturation and lightness.

Hue

Hue is the color itself. It is represented as an angle from 0 to 360 degrees, where 0 is red, 120 is green, and 240 is blue.

.box { 
  background-color: hsl(200, 100%, 50%);
}

Saturation

Saturation is the intensity of the color. It is represented as a percentage from 0% to 100%, where 0% is a shade of gray and 100% is the full color.

Lightness

As for lightness, it controls how light or dark the color is. 0% is is black, and 100% is white.

.box { 
  background-color: hsl(200, 100%, 50%);
}

This is a great way to define colors because it is more intuitive than HEX codes and RGB. Instead of changing the amount of R/G/B value directly, we can use the HSL color as a higher level of abstraction, more related to the way we perceive colors.

Consider the following example:

.box { 
  background-color: hsl(, 73%, 62%);
}

.box { 
  background-color: hsl(, 73%, 62%);
}

.box { 
  background-color: hsl(, 73%, 62%);
}

Do you see how the three colors are related to each other in term of saturation or how the lightness is? Even if we change the color angle, that new color still has the same feeling as the original one. This is what great about HSL colors, it's more human-friendly to use than any color format.

Use cases

1. Changing the color of a element

When a color in a specific element needs to a bit darker or lighter on hover, using HSL colors can be a great way to achieve this:

Noteworthy technology acquisitions 2021

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

.card { 
  background-color: hsl(0, 0%, 0%);
}

This mean we can change the value of the lightness or the saturation of the color itself, without having to open a color picker to find the right HEX code.

2. Creating a color palette

By altering the lightness, we can create a color palette with different shades of the same color. This is a great way to create a consistent color scheme for a website or application.

3. Theme colors

When working on a project with a lot of colors, it can be hard to keep track of all the HEX codes. Using HSL colors can make it easier to manage and maintain the color palette of the project.

Think of a scenario where you have to change the site theme from default to a more corlorful one during special events like Tet holidays or Christmas. HSL colors can be handly when we want to change the primary color just by altering the hue value.

First theme:

Second theme:

Conclusion

HSL colors offer a more intuitive and human-friendly approach to color manipulation in digital design. They allow for easy adjustments of color properties, enabling designers and developers to create more dynamic, responsive, and visually appealing applications. By using HSL, we can better understand and control the color schemes of our projects, leading to improved user experiences and more aesthetically pleasing designs.

So how about using HSL colors today?

Happy coding!