Creando esquemas y paletas de colores con HSL • Silo Creativo

Si en el previo 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 cálido 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 aparejo 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 títulos: matiz, brillo y saturación. Y que conseguíamos al cambiar cada uno de ellos. Nos vamos a regir de este conocimiento para ponerlo en destreza y, con solo modificar algunos de estos valía, entablar a crear esquemas y paletas de color completamente funcionales. En primer oportunidad, crearemos esquemas de colores al cambiar los títulos del brillo y la saturación, muy importante en ciertos utensilios 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 títulos de brillo o saturación a partir de un color colchoneta. En este ejemplo, vamos a tener tres colores colchoneta: un verde con código hsl(92, 50%, 50%), un zarco 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 utensilios de una web. Por poner un ejemplo concreto, cuando partimos del color colchoneta de un timbre, 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 memorizar con exactitud el cambio de estos colores y aplicarlos de forma exacta según nuestras micción.

Modificando la saturación del color colchoneta

La saturación es el segundo valía 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 colchoneta están exacto a la porción, teniendo a un costado una traducción con el mismo matiz pero con colores más vivos, y al otro costado colores más desaturados.

Modificando el brillo del color colchoneta

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

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

Antes hemos puesto hemos mencionado como podemos usar este tipo de esquemas para construir un timbre 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 colchoneta de forma sencilla simplemente modificando los títulos de brillo y saturación, entremos en como crear paletas de colores cambiando la otra variables de HSL que nos descuido: el matiz. Antes de entrar de empachado 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 delante, 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 colchoneta, 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 asegurar, nuestro matiz del color colchoneta es 0°, ya que veremos más claramente los títulos a sumar en nuestro código de color. Por supuesto, vosotros podéis coger el color colchoneta que queráis, o el que tengáis en vuestro esquema.

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 colchoneta. 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 amistad. 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 valía según veáis conveniente en vuestro esquema. 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 apoyo en dos pares de colores análogos. Por lo que tenemos al mismo tiempo una armonía muy fuerte por un costado, y un contraste parada por otro. Como pasaba con la combinación de colores análogos, el valía del matiz de los colores armónicos queda un poco a nuestro complacencia, pero sin que sea un valía muy parada, ya que perderíamos la amistad. 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 esquema simplemente viendo su código y sin penuria 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 títulos en el código de color. Esto supone optimizar nuestro flujo de trabajo de forma 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 destreza en vuestros futuros proyectos. Y como es habitual, tenéis disponibles los comentarios para hacernos montar cualquier duda, sugerencia o experiencias con el uso del código de color HSL.