Insights
Why is the HSL model better for working with colors on the web?
While designing for the web, CSS allows us to use multiple color models, but the truth is that most of the time, colors are expressed using hexadecimal values. However, there are color models that are more practical and convenient to work with than hexadecimal, such as the HSL (Hue, Saturation, Lightness) model, which we are going to discuss in this article.
What is HSL?
HSL is a color model. Like the CMYK (Cyan, Magenta, Yellow, and Key) and RGB (Red, Green, and Blue) color models, the name “HSL” is an acronym derived from the words “Hue, Saturation, and Lightness.” Unlike CMYK (which deals with pigments) or RGB (which deals with light), HSL operates on the constituent components of color.
Therefore, a color in HSL is expressed with three values, for example:
div {background-color: hsl(7, 80%, 64%)}
Como se puede apreciar, el primer valor es un número entero (aunque en realidad hace referencia a un ángulo, como ahora veremos) y los dos restantes son porcentajes. Pero analicemos detenidamente cada uno de estos valores:
El primer valor con el que nos encontramos es el matiz, que básicamente es lo que define el color. Como decíamos representa el ángulo de un círculo cromático que va progresivamente del rojo al naranja, al amarillo, al verde, al azul, al añil, al morado, al fucsia y finalmente de nuevo al rojo. Así, un valor de 0º se corresponde con un color rojo, el 60º es un amarillo, el 120º es un verde, el 180º es un color azul, el 240º es un color añil, el 300º es el fucsia y el 360º volvería a ser el rojo.
<div class="post-img-xxxxl">
<picture>
<img class="media-cover" srcset="/assets/images/posts/por-que-es-mejor-usar-hsl-para-trabajar-con-colores-02.jpg" alt="Why is the HSL model better for working with colors on the web?">
</picture>
</div>
La saturación se refiere a la pureza del color y se controla con el segundo valor. Al 0% de saturación un color no tiene ningún matiz (se ve gris), mientras que al 100% se muestra totalmente saturado, es decir, muy vívido.
<div class="post-img-xxxxl">
<picture>
<img class="media-cover" srcset="/assets/images/posts/por-que-es-mejor-usar-hsl-para-trabajar-con-colores-03.jpg" alt="¿Why is the HSL model better for working with colors on the web?">
</picture>
</div>
Finalmente, con el último valor (la luminosidad) controlamos lo claro u oscuro que será el color. Los porcentajes bajos dan lugar a colores más oscuros (sin ir más lejos al 0% todo color es negro puro), mientras que los altos dan lugar a colores claros.
<div class="post-img-xxxxl">
<picture>
<img class="media-cover" srcset="/assets/images/posts/por-que-es-mejor-usar-hsl-para-trabajar-con-colores-04.jpg" alt="¿Why is the HSL model better for working with colors on the web?">
</picture>
</div>
## What are the advantages of HSL?
Hexadecimal color codes (e.g., #000000 or #FFFFFF for pure black and white, respectively) have one advantage: they are short and, therefore, easy to remember. But if you work with CSS preprocessors like SASS — which is likely — and store colors in variables, this advantage is not that significant.
On the contrary, the hexadecimal color model presents several issues. For example, if we ask you what type of color #ED6A5A represents, would you know? Well, it's terracotta, but you probably wouldn't have guessed. It's not easy to guess the color just by reading six characters. It's also not intuitive to generate a chromatic scale based on a hexadecimal code, which is undoubtedly needed to create your Design System. For instance, a dark terracotta color in hexadecimal is #CA2B16, so the relationship it has with #ED6A5A would seem like a mystery... Lastly, you cannot add opacity to your colors when using the hexadecimal model.
Fortunately, colors in HSL format can help us solve all these problems.
### HSL values are more intuitive
As we have seen, just by looking at the first HSL value (the hue), you will know whether the color you are facing is indigo, green, yellow, etc. With the second value, you can deduce if it's a highly saturated or desaturated color. And with the last value, you can determine if it's a dark or light color. In short, you will understand colors better and work with them more effectively.
### HSL makes it easier to create coherent palettes
When generating color palettes for a website, it's essential that all the colors maintain a certain harmony among them. They should be different, yet share something in common that unifies them, making them appear as a family. This cohesion is achieved through saturation and lightness. Colors with similar saturation and lightness blend well together. Thus, you can create a coherent set of secondary colors by modifying only the hue of the primary color. In the example just below, there is harmony because the colors have nearly the same lightness and very similar saturation:
<div class="post-img-xxxxl">
<picture>
<img class="media-cover" srcset="/assets/images/posts/por-que-es-mejor-usar-hsl-para-trabajar-con-colores-01.jpg" alt="¿Why is the HSL model better for working with colors on the web?">
</picture>
</div>
### HSL makes it easier to create chromatic variations
Every Design System needs variations of the color palette. These color variations are used, for example, when hovering over an element on our website, such as a button, or to indicate that an element is temporarily disabled. Generally, the effect applied in the first case is to slightly darken the color, while in the second case, it is lightened. For this, you only need to adjust the last value of each color: the lightness. These color variations are also useful for creating color gradients.
### HSL can generate transparencies
Actually, HSL itself cannot do this, but if we add a fourth value to this color model, then we have HSLA, where 'A' refers to transparency (or alpha channel). It is used like this:
```css
div {background-color: hsla(7, 80%, 64%, 0.5)}
This color is the same terracotta color that we saw earlier but with 50% opacity. ___
As a conclusion, we can say that colors in the HSL model can save us a lot of time and effort when working with Design Systems. They can even help us better understand color behavior and explore all its options. What about you? Do you already work with HSL, or do you prefer the hexadecimal model?
Did you find this post interesting? Share it!
Your contacts will like to read it, for sure!
