Creando esquemas y paletas de colores con HSL

Si en el anterior artículo hablamos sobre el código de color HSL, sus significado y diferencias con respecto a HEX y RGB, y porqué es más amigable usarlo en nuestro código CSS, hoy seguimos veremos como trabajar directamente con él para crear esquemas y paletas de colores con nuestros proyectos. Esto lo haremos sin ayuda de ningún tipo de herramienta externa, o eligiendo un poco al azar en la rueda de color cuales son los colores que van a componer nuestra paleta.

Como vimos en el otro artículo, sabemos que HSL se compone de tres valores: matiz, brillo y saturación. Y que conseguíamos al cambiar cada uno de ellos. Nos vamos a valer de este conocimiento para ponerlo en práctica y, con solo modificar algunos de estos valor, empezar a crear esquemas y paletas de color completamente funcionales. En primer lugar, crearemos esquemas de colores al cambiar los valores del brillo y la saturación, muy importante en ciertos elementos de cualquier web. A continuación seguiremos con las paletas de colores, quizás el tema más puntilloso, y del que muchos, entre los que me incluyo, siempre tenemos dudas sobre si las estamos creando de forma correcta o no.

Creando esquemas de colores con HSL

Como hemos comentado, estos esquemas los vamos a crear simplemente modificando los valores de brillo o saturación a partir de un color base. En este ejemplo, vamos a tener tres colores base: un verde con código hsl(92, 50%, 50%), un azul hsl(202, 50%, 50%), y un rosa hsl(327, 50%, 50%). No es casualidad que hayamos escogido siempre un brillo y saturación del 50%. Lo hemos hecho para que, al partir de un punto medio podamos crear colores con más o menos brillo, o con más o menos saturación.

Este tipo de esquemas es muy recurrente en ciertos elementos de una web. Por poner un ejemplo concreto, cuando partimos del color base de un botón, podemos usar un cambio de brillo o saturación al hacer hover sobre él, y otro cambio de brillo o saturación al pulsarlos. Gracias al uso de HSL, podemos saber con exactitud el cambio de estos colores y aplicarlos de forma exacta según nuestras necesidades.

Modificando la saturación del color base

La saturación es el segundo valor de nuestro código de color HSL. Y para crear esta paleta, hemos hecho una escalera de colores, con una diferencia de un 15% de saturación entre un color y otro. Podéis ver el resultado que hemos obtenido a continuación:

Nuestros colores base están justo a la mitad, teniendo a un lado una versión con el mismo matiz pero con colores más vivos, y al otro lado colores más desaturados.

Modificando el brillo del color base

Pasamos a modificar el brillo, que es el tercer valor de nuestro HSL. Al igual que hicimos con la saturación, vamos a modificar nuestro color base añadiendo o quitando un 15% de brillo, quedando algo así:

Estando los colores base en el centro, a la izquierda tienden al blanco, mientras que a la derecha al negro.

Antes hemos puesto hemos mencionado como podemos usar este tipo de esquemas para construir un botón en nuestra web. Y así es como quedaría:

Creando paletas de colores con HSL

Una vez vistos como podemos crear esquemas de colores partiendo de un color base de forma sencilla simplemente modificando los valores de brillo y saturación, entremos en como crear paletas de colores cambiando la otra variables de HSL que nos falta: el matiz. Antes de entrar de lleno en esta parte del texto, es muy recomendable que echéis un vistazo a nuestro artículo sobre combinaciones de colores con ayuda del círculo cromático. En ese texto vimos algunos conceptos de combinaciones de colores que mencionaremos más adelante, y que están explicados de forma más pormenorizada para aquellos que os pueda interesar.

En las cuatro combinaciones que vamos a ver a continuación, siempre vamos a partir del mismo color base, un tono rojizo con código de color hsl(0, 68%, 65%), a partir del cual asignaremos el resto de colores de la paleta. Es decir, nuestro matiz del color base es 0°, ya que veremos más claramente los valores a sumar en nuestro código de color. Por supuesto, vosotros podéis coger el color base que queráis, o el que tengáis en vuestro proyecto.

Combinación complementaria

La combinación complementaria es perfecta para marcar un contraste, ya que vamos a tener matices opuestos en la rueda de color. Si nuestra rueda de color tiene 360°, el matiz opuesto tiene 180° más que el de nuestro color base. Así, nuestra paleta tendrá dos colores: hsl(0, 68%, 65%) / hsl(180, 68%, 65%).

Combinación de colores triádicos

Esta combinación se hace con tres colores repartidos uniformemente por la rueda de color. Mantendremos el contraste, pero con cierta armonía. Como la separación es siempre la misma, el matiz cambia de un color a otro 120°. Por lo que los colores serían hsl(0, 68%, 65%) / hsl(120, 68%, 65%) / hsl(240, 68%, 65%).

Combinación de colores análogos

Los colores análogos son los que están muy cercanos entre sí en la rueda de color, pero lo suficientemente separados para que notemos sus diferencias. En nuestro ejemplo, vamos a dar una separación de 30° entre los matices de cada color, aunque podéis aumentar o disminuir este valor según veáis conveniente en vuestro proyecto. En nuestro caso, la paleta se compone de los siguientes tres colores: hsl(0, 68%, 65%) / hsl(30, 68%, 65%) / hsl(60, 68%, 65%).

Combinación de colores tetradas

Esta combinación se basa en dos pares de colores análogos. Por lo que tenemos al mismo tiempo una armonía muy fuerte por un lado, y un contraste alto por otro. Como pasaba con la combinación de colores análogos, el valor del matiz de los colores armónicos queda un poco a nuestro gusto, pero sin que sea un valor muy alto, ya que perderíamos la armonía. Nuestra combinación de cuatro colores quedaría así: hsl(0, 68%, 65%) / hsl(60, 68%, 65%) / hsl(180, 68%, 65%) / hsl(240, 68%, 65%).

Con esto terminamos estos dos artículos sobre códigos de color, y más en concreto sobre HSL. Como hemos podido ver, HSL es una excelente forma de tener en mente siempre el color que estamos usando en cualquier proyecto simplemente viendo su código y sin necesidad de herramientas externas. Y no solo eso, ya que simplemente sabiendo utilizar ciertas pautas, podemos realizar esquemas y paletas de colores con solo modificar sus valores en el código de color. Esto supone optimizar nuestro flujo de trabajo de manera radical cuando se trate de conseguir ciertos objetivos con el color.

Como siempre, esperamos que os hayan servido de ayuda estos dos artículos sobre HSL, y que lo podáis poner en práctica en vuestros futuros proyectos. Y como es habitual, tenéis disponibles los comentarios para hacernos llegar cualquier duda, sugerencia o experiencias con el uso del código de color HSL.