Usar colores HSL en CSS

6 min readJul 22, 2021

¿Qué es HSL? ¿Cómo usarlo?

Los colores HSL son muy poderosos cuando los usamos de la manera correcta. Pueden ahorrarnos tiempo y esfuerzo e incluso ayudarnos a explorar opciones sobre cómo aplicar color al diseño.

En este post te muestro algunos de los casos de uso útiles y ejemplos que puede usar de inmediato en tus proyectos actuales.

La mayoría de los colores que veo que se usan en CSS son hexadecimales y RGB/RGBA. Recientemente, comencé a ver un mayor uso de los colores HSL, y descubrí todo el potencial de HSL.

Si la cámara me sigue, me gustaría mostrarte cómo HSL realmente puede ayudarnos a trabajar mejor con colores en CSS.

Introducción

Por lo general, usamos códigos de color hexadecimales que están bien, pero tienen un par de problemas:

Son limitantes;
Son difíciles de entender al leerlos.

Por “limitado”, me refiero a que no es fácil alterar el color sin abrir una rueda de colores y además no es fácil adivinar qué color es al mirar el código hexadecimal.

Miremos este ejemplo:

Elegí un color hexadecimal para un azul cielo y uno más oscuro. Esto no es fácil en HEXA dado que los nombres de estos colores no están relacionados entre sí. Es difícil decir que ambos son azules pero con diferentes tonos.

En la vida real, es posible que tengas que crear un tono más claro o más oscuro de un color para probar o validar algo rápidamente. Con los colores hexadecimales, esto no es posible hasta que abras el selector de color.

Afortunadamente, los colores HSL pueden ayudarnos a resolver este problema específico y nos abre muchas posibilidades.

¿Qué Es HSL?

HSL significa tono, saturación y luminosidad. Se basa en la rueda de colores RGB. Cada color tiene un ángulo y un valor porcentual para los valores de saturación y luminosidad.

Usemos el ejemplo del color azul cielo que charlamos anteriormente.

Primero, elegimos el color como solemos hacer de un selector de color, y nos aseguramos de obtener el valor HSL para él.

Miremos los valores de HSL. El primero es el ángulo (H), que representa el ángulo del color que tenemos. En este caso, es azul cielo. Una vez que tenemos el ángulo, podemos comenzar a ajustar la saturación(S) y el brillo (L) según nuestras necesidades.

Saturación

La saturación controla qué tan saturado debe estar el color. 0%está completamente insaturado, mientras que 100%está completamente saturado.

Ligereza / Claridad

En cuanto a la claridad, controla qué tan claro u oscuro es el color. 0%es negro y 100%es blanco.

Entonces si utilizamos un ángulo como el de nuestro ejemplo de 196º y agregamos los siguientes datos en saturación y claridad

Con eso, tenemos tres valores que representan color, ángulo, saturación y brillo. Así es como podemos usar el color en CSS:

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

Y a partir de acá es donde la magia comienza. Porque modificando el ángulo de color, podemos obtener colores que son similares en saturación y luminosidad a la base. Esto es muy útil cuando se trabaja en nuevos colores de marca, ya que podemos crear un conjunto consistente de colores de marca secundarios.

¿Sentís que los tres colores están relacionados entre sí en términos de cómo se satura el color y qué tan oscuro o claro es? Eso se ha logrado simplemente cambiando el ángulo de color.

Esto es lo bueno de los colores HSL. Es más fácil de leer y editar que cualquier otro tipo de color.

Casos De Uso Para Colores HSL

Cambio de colores al pasar el mouse

Cuando un color en un componente específico necesita aparecer más oscuro al pasar el mouse, los colores HSL pueden ser perfectos para esto.

.button {
  background-color: hsl(221, 72%, 62%);
}

.button:hover {
  background-color: hsl(221, 72%, 54%);
}

Al pasar el mouse, solo necesito alterar el valor de luminosidad.

Recuerda my little padawan , cuanto mayor sea el valor, más claro. Para un tono más oscuro, necesitamos reducir el valor.

Una combinación de colores

HSL puede ser útil cuando tenemos un diseño que usa el mismo color pero con diferentes tonalidades.

La navegación del encabezado principal tiene el color principal, mientras que la navegación secundaria tiene un tono más claro. Con HSL, podemos obtener el tono más claro fácilmente modificando el valor de luminosidad.

Esto puede resultar extremadamente útil si se tiene una interfaz de usuario con varios temas. Acá hay dos temas como ejemplo y cambiar de uno a otro solo requiere que edite el grado de tono.

Primer tema:

Segundo tema:

¿Cómo podemos crear esta paleta de colores de manera rápida con HSL?

Al alterar la luminosidad, podemos crear un conjunto de tonos para un color que se puede utilizar en toda la interfaz de usuario siempre que sea posible.

Esto es útil para sistemas de diseño donde los diseñadores proporcionan a los desarrolladores los tonos para cada color de la marca.

Dejo por acá una demostración interactiva que muestra eso.

El control deslizante de entrada solo cambia el valor de tono, y el resto de los tonos cambian en función de eso.

Variaciones de un botón

Otro caso de uso útil para los colores HSL es cuando tenemos opciones primarias y secundarias que son del mismo color pero con diferentes tonos. En este ejemplo, el botón secundario tiene un tinte muy claro del color principal. Los colores HSL son perfectos para eso.

.button {
  background-color: hsl(221, 72%, 62%);
}

.button--secondary {
    background-color: hsl(221, 72%, 90%);
    color: #222;
}

.button--ghost {
    background-color: transparent;
    border: 3px solid hsl(221, 72%, 90%); 
}

Ajustar las variaciones del botón principal es rápido.

Conclusión