💅🏾 🐜 👩‍❤️‍👨 Forget about RGB and HEX 👨‍🎤 👨🏻‍🌾 🎦

There are several ways to represent colors in CSS. One of them is the HSL system. In this article I will show you what possibilities it opens up for a layout designer.

What is HSL?

The name of the HSL format is derived from a combination of the first letters Hue (hue), Saturate (saturation) and Lightness (lightness or brightness).

Hue is the color value on the color wheel and is set in degrees. 0 ° corresponds to red, 120 ° to green, and 240 ° to blue. The value of the hue can vary from 0 to 359.

Saturation is the color intensity, measured in percent from 0% to 100%. Determines how far the color is from gray of the same brightness.

Brightness characterizes how bright the color is and is indicated as a percentage from 0% to 100%. Small values make the color darker and high values lighter, extreme values 0% and 100% correspond to black and white.

HSL Benefits ()

The key advantage of HSL is the ability to specify color characteristics independently of each other . This opens up great opportunities for you. You can easily make the color brighter, darker, more saturated or discolor. And while maintaining its shade. Or vice versa - change the shades without changing their saturation or brightness. Often, preprocessors are used to use these features, but you can also do without them.

A few examples

Derived colors of the same hue

One of the most common tasks: to make a component that will take one single basic shade, but consist of several variations of it. In my example, this is a typical alert in which the color of the text, background and stroke have the same hue and saturation but different brightness:

.success {  
  border-color:     hsl(120, 50%, 40%);
  color:            hsl(120, 50%, 20%);
  background-color: hsl(120, 50%, 90%);
}

See how beautiful and clear? It is immediately obvious that this is one “family” of flowers. In other formats, it would look something like this:

/* rgb */
.alert {
  border-color:     rgb(51, 153, 51);
  color:            rgb(25, 77, 25);
  background-color: rgb(217, 242, 217);
}

/* hex */
.alert {
  border-color:     #339933;
  color:            #194d19;
  background-color: #d9f2d9;
}

I don’t know about you, but it’s hard for me to look at such a code to say whether these colors are somehow connected or not.

But these are trifles. True power is revealed when using css custom properties.

As they say, watch your hands. If we make any component of the color, for example, a hue, a variable, then we can easily create an infinite number of variations of our component by changing only the basic hue in it. And all derivatives will be repelled from it.

.alert {
  border-color:     hsl(var(--hue), 50%, 40%);
  color:            hsl(var(--hue), 50%, 20%);
  background-color: hsl(var(--hue), 50%, 90%);
}

Bleaching

In this example, the off button has a reduced saturation. It still has a subtle blue tint, but it is almost gray. And when you hover the button retains hue and saturation, but it becomes darker.

To solve this problem, it is enough to change only one of the three parameters to get a derivative, but similar color. What when using rgb or hex is not so easy to do.

As in the first example, you can easily change the hue without affecting all other color characteristics in your component.

Color inheritance

One of the coolest techniques: creating one shade, starting from another. This is achieved by simple addition in calc ().

:root{
  --hue: 120;
}

header {
  background-color: hsl(var(--hue), 30%, 20%)
}

header button {
  background-color: hsl(calc(var(--hue) + 130), 80%, 50%)
}

In this example, the hue of the button depends (+ 130 ° on the color wheel) on the hue of the container.

So in a simple way, you can create full-fledged flexible color palettes for your sites, setting only one basic shade and starting from it.

And all of your components will retain saturation and brightness, as demonstrated in previous examples.

Future

In the CSS Color Module Level 4 specification , new functions were described: lab () and lch () for specifying colors in the formats of the same name. LCH has the same flexibility as hsl, but brings a number of improvements, with an eye to modern devices. You can read more about this in the article “ LCH colors in CSS: what, why, and how? ".

Total

In my opinion, the hsl format has fantastic flexibility compared to alternatives. In combination with variables, you practically bring all the possibilities for working with colors from preprocessors to native CSS.

PS Sorry for the loud title :)

Forget about RGB and HEX