HSL en diseño: cómo crear buenas paletas de color
Llevo más de 15 años diseñando productos digitales y una de las cosas que más tiempo me quitaba era crear y mantener paletas de color coherentes. Hasta que empecé a usar HSL en lugar de RGB o HEX.
HSL cambió completamente cómo trabajo con color. Y cuando enseño esto a otros diseñadores, la reacción es siempre la misma: «¿Por qué nadie me explicó esto antes?«
En este artículo te voy a enseñar exactamente cómo uso HSL en Figma para crear paletas profesionales en minutos. Paso a paso, con capturas de pantalla y ejemplos visuales.
- RGB es el mal. De verdad.
- Qué es HSL: tono, saturación y luminosidad
- HSL y la rueda de color
- Cómo crear una paleta completa en Figma con HSL
- Apuntes finales
¡Vamos allá!
RGB es el mal. De verdad.
Aunque me he pasado muchos años utilizando RGB (red, green y blue), para mí sigue siendo una representación del color muy poco intuitiva. Ahora verás por qué lo digo.
RGB es aditivo, porque funcionan por emisión de luz. Esto significa que la si sumas los tres colores, (es decir, RGB(255 255 255)), obtienes blanco. Si eliminas los tres (RGB(0 0 0)), negro.
Desde aquí es más o menos fácil deducir el rojo puro (RGB (255 0 0), el verde (RGB(0 255 0)) y el azul (RGB (0 0 255)).
El problema es que a partir de aquí, ¿cómo obtienes un rojo más saturado? ¿cómo obtienes magenta partiendo de rojo, verde y azul —que, recuerda, sumados crean blanco–? ¿y cómo calculas el color complementario del rojo que usa tu marca?
Exacto. Yo qué sé.
Sin utilizar herramientas de terceros (y en consecuencia, invertir más tiempo) es difícil que te sientas seguro de cómo estás construyendo la paleta o si los colores tienen una relación adecuada entre sí.
Qué es HSL: tono, saturación y luminosidad
En esta ocasión las siglas no son colores, sino parámetros: Hue (tono), Saturation (saturación) y Lightness (luminosidad).
Hue (tono)
Determina qué color del espectro es. El valor corresponde con el ángulo de la rueda de color.
Con esto en mente, hacer el color complementario es fácil: si rojo está en 360º (o 0º), el complementario será la mitad de la rueda, es decir, 180º.
Si lo que quieres es hacer una tríada, tengo que añadirle 120º. Así que si mi color base es 0º, los otros dos son 120º y 240º:
Por último, si lo que quieres hacer es definir colores análogos hacia el azul, lo que tengo que hacer es restar, por ejemplo, 30º cada vez.
A modo de resumen y usando la rueda de color como base, esto es lo que acabas de hacer:
Saturation (saturación)
Indica la intensidad de un tono concreto. Los valores van de 0 a 100, siendo 100 el máximo de saturación posible y 0 el mínimo, que dará como resultado gris.
Lightness (luminosidad)
Hace referencia a cómo de claro u obscuro es un color. Me costó un poco de entender hasta que no le encontré un equivalente en los pigmentos: si quiero un color más claro, añadiré blanco (100%, en este caso) y si quiero oscurecerlo, negro (0%).
Cómo crear una paleta completa en Figma con HSL
Ahora que entiendes los tres parámetros y cómo interactúan con la rueda de color, te voy a enseñar el método que uso para crear paletas de color en todos mis proyectos.
La base: debes fijar H (tono) y S (saturación), y solo modificar L (luminosidad). Así consigues varios tonos del mismo color que funcionarán bien juntos.
Primero, crea un rectángulo en Figma y en el color picker cambiar de HEX a HSL. Elige tu color base, en este ejemplo utilizaremos hsl (217, 91, 50). Si vuelves a la rueda de color de más arriba, verás que esto es azul:
Ahora duplica el rectángulo, y en cada uno mantén el tono (H) y la saturación (S), y cambia L. Esto te permitirá tener muy rápido una paleta de color con azul como base que podrás utilizar para los diferentes elementos de la interfaz.
Fíjate que lo único que cambio es la luminosidad. El azul original es el que mantiene la luminosidad al 50. A medida que reduzco, voy obteniendo colores más cercanos a negro que mantienen el tono azul. Y lo mismo al revés, pero hacia el blanco:
Literalmente 2 minutos tienes una paleta cromática bien hecha. Puedes guardarla como Color Styles en Figma y luego convertirlos en variables para tener aún más control. Si quieres aprender a hacerlo, lee mi guía de variables en Figma.
💡 Truco: Si prefieres que IA te ayude a generar paletas más complejas, mira cómo crear paletas de color con IA y Figma.
Apuntes finales
«¿Pero a ver, Cris, por qué tantos números y tantos cálculos?«
En mi opinión las ventajas del uso de HSL son muy claras: te permite controlar mejor el color de tu diseño, las variaciones serán precisas y no una conjetura usando RGB y tocando colores a mano en el espectro.
La mayoría de veces, cuando encuentras un diseño así:
No ha sido realizado con RGB o con rectángulos negros o blancos con la opacidad modificada.
Han sido realizados utilizando un color base al que se le ha ido modificando la saturación y la luminosidad y siempre manteniendo el tono original. En concreto, parte de hsl(354,97,66).
La conclusión, es que, aunque tiene cierta curva de aprendizaje (debes recordar el círculo de color y los ángulos) el HSL es semántico y te va a dar más agilidad y precisión a la hora de crear tus paletas y combinaciones.
Si quieres aprender más en profundidad el funcionamiento y las operaciones matemáticas detrás de HSL te recomiendo el artículo HSL and HSV de la Wikipedia y Designing accessible color systems, en el blog de Stripe.
¿Te ha gustado? ¡Compártelo! 🚀