Códigos de color en la web, o porqué deberías usar HSL en tu CSS

Una de los parámetros fundamentales cuando estamos trabajando con CSS son los colores. Ya sea por un aspecto puramente estético, o por accesibilidad, el uso del color al crear una web es de una importancia tremenda. En la gran mayoría de los casos, lo más común es usar alguno de estos tres código de color (y sus variantes con transparencias): RBG/RGBA, HEX o HSL/HSLA. Si has visto o trabajas con CSS de forma habitual, habrás notado que el uso de RGB y HEX es bastante mayoritario con respecto a HSL. Y en este artículo vamos a intentar comprender como se construyen estos tres código de color, y por qué deberías utilizar HSL en tu flujo de trabajo.

En primer lugar, vamos a ver como se construyen los códigos de color RGB y HEX, ya que somos muchos los que muchas veces los utilizamos sin saber muy bien de donde vienen. Y una vez sepamos esto, explicaremos como funciona HSL, y porque es un código mucho más fácil de entender, y de construir paletas de colores simplemente cambiando sus números, aunque no veamos directamente el color.

Cómo funcionan los códigos HEX y RGB

Las tres cifras que se ven en un código RGB representan los valores del rojo, verde y azul en una escala de 0 a 255, donde el 0 es la ausencia de ese color, y el 255 es su máximo. Y con la mezcla de estos tres colores obtenemos nuestro color final. Pero, ¿sabríais decirme que color es el rgb(10, 117, 173)?. Porque si podría decir que si mezclo rojo a 255 con verde a 255 voy a obtener un tono amarillo. Pero ya mezclar tres colores se vuelve algo más complejo.

Si os pongo el código HEX #0A75AD, ¿qué color diríais que es?. ¿Es un tipo de verde, de rojo, de azul o de amarillo?. Sinceramente, yo no lo sé, y tendría que irme a un software de dibujo o buscar en Google para conocer exactamente que color es. Si, es cierto que por ejemplo, en VS Code, si escribimos el código, al lado tendremos un cuadradito con el color. Pero tenemos un problema, y es que muchos no sabremos ni acercarnos al color que representa ese código HEX. Por resumir, el código de color HEX se basa en un sistema hexadecimal, que va del 0 al 9, y sigue de la A a la F. Y las seis cifras del código se dividen en tres, siendo las dos primeras la que definen el rojo, la tercera y cuarta el verde, y la quinta y sexta cifra el azul. Muy parecido a como funciona el RGB.

Una vez sabemos esto, el problema es claro. No son códigos intuitivos. Es verdad que se suelen saber ciertos código, como el blanco puro, el negro puro, o algún otro que usamos habitualmente. Pero los sabemos más por memoria que por intuición. Y esto es un problema, porque no saber reconocer un color mediante su código hace que siempre necesitemos herramientas externas, tanto para saber con que estamos trabajando, como para crear paletas de colores, o tonalidades complementarias. Por suerte, esto lo soluciona el código de color HSL.

Entendiendo el significado de HSL

El código de color HSL se basa en tres variables: hue o matiz, saturation o saturación, y lightness o brillo. La primera se mide de grados de 0° a 360°, y los otros dos en porcentajes de 0% a 100%. Al principio, puede parecer que es igual de complejo que los código RGB y HEX, pero una vez entendamos como funciona cada una de estas tres variables, no solo vamos a reconocer el color inmediatamente, sino que crear cualquier tipo de paleta, o gradaciones de un mismo color será tremendamente sencillo.

Matiz / Hue

Con hue o matiz nos referimos al color. El rojo está a 0°, el verde a 120° y el azul a 270°. En esta imagen podemos ver más claramente donde se situaría cada color.

Como vemos, simplemente sabiendo la posición de ciertos colores básicos, reconoceremos casi instantáneamente el color de nuestro HSL. Sabiendo que el rojo son 0° y el amarillo 60°, cualquier valor intermedio va a tener una tonalidad anarajanda, mas rojiza o amarillenta según sea un valor mas cercano a 0° o 60°, respectivamente. Si entramos en el código CSS, decir que no es necesario usar el símbolo de grado para el matiz. Podemos poner la cifra directamente.

Saturación / Saturation

La saturación nos indica el colorido o la pureza de un color. Si este valor es del 100%, obtenemos el color más puro del matiz que tengamos. Si es un 0%, tendremos un tono grisáceo, es decir, estamos desaturando el color.

Brillo / Lightness

El brillo, como su nombre indica, es el brillo del color. Un brillo del 0% es negro, un brillo del 100% es blanco.

Ahora que sabemos esto, vamos a ponernos a prueba. Imaginemos que tenemos el siguiente color en nuestro CSS:

.font {
    color: hsl(201, 89%, 36%);
}

El matiz es 201, por lo que estará entre el cyan (180°) y el azul (240°). Podemos decir que es un tono azulado. Su saturación es del 89%, por lo que es casi un color puro. Y su brillo es del 36%, por lo que será más oscuro. Veamos que color es.

Creo que hemos dado en el clavo. Es tremendamente sencillo saber con que color estamos trabajando simplemente sabiendo el significado de las tres variables del código HSL. Si queremos ir un paso más allá, podemos añadir una cuarta cifra para la transparencia, que como en RGBA, va desde el 0 al 1, siendo 0 completamente transparente, y 1 sin transparencia.

Con esto damos por concluida esta primera parte sobre códigos de color y HSL. Próximamente publicaremos otro artículo sobre como crear paletas y esquemas de color de forma sencilla e intuitiva con HSL, simplemente modificando ciertos valores de sus variables. Algo tremendamente útil para, por ejemplo, modificar el color de un botón al hacer hover sobre él. Pero no adelantemos acontecimientos, ya que lo veremos todo de forma más detallada en ese artículo.

Como siempre, está a vuestra disposición los comentarios para que nos hagáis llegar vuestras sugerencias dudas y experiencias sobre este tema. Seguro que muchos hace tiempo que estáis usando HSL en vuestros proyectos, y podéis compartir algunos trucos que hayáis descubierto.