HSL en CSS: qué es y por qué es mejor que HEX y RGB
Aunque a la hora de diseñar para web CSS nos permite usar múltiples modelos de color, lo cierto es que la mayoría de las veces los colores que se utilizan se expresan con valores hexadecimales. Sin embargo, hay modelos de colores que resultan más prácticos y cómodos a la hora de trabajar que el hexadecimal, como es el caso del HSL, del que vamos a hablar en este artículo.
¿Qué es el HSL?
El HSL es un modelo de color. Al igual que los modelos de color CMYK (de ‘cyan’, ‘magenta’, ‘yellow’ y ‘key’, es decir ‘cian’, ‘magenta’, ‘amarillo’ y ‘negro’) y RGB (de ‘red’, ‘green’ y ‘blue’, o ‘rojo’, ‘verde’ y ‘azul’), el nombre del modelo HSL también proviene de una sigla, en este caso la que forman las palabras ‘hue’, ‘saturation’ y ‘lightness’ (‘tono’, ‘saturación’ y ‘luminosidad’), ya que en lugar de jugar con pigmentos —como el CMYK— o luces —como el RGB—, el HSL juega con los componentes constituyentes del color.
Por lo tanto, un color en HSL se expresa con la sucesión de tres valores, por ejemplo:
div {background-color: hsl(7, 80%, 64%)}
Como se puede apreciar, el primer valor es un número entero (aunque en realidad hace referencia a un ángulo, como ahora veremos) y los dos restantes son porcentajes. Pero analicemos detenidamente cada uno de estos valores:
El primer valor con el que nos encontramos es el matiz, que básicamente es lo que define el color. Como decíamos representa el ángulo de un círculo cromático que va progresivamente del rojo al naranja, al amarillo, al verde, al azul, al añil, al morado, al fucsia y finalmente de nuevo al rojo. Así, un valor de 0º se corresponde con un color rojo, el 60º es un amarillo, el 120º es un verde, el 180º es un color azul, el 240º es un color añil, el 300º es el fucsia y el 360º volvería a ser el rojo.
La saturación se refiere a la pureza del color y se controla con el segundo valor. Al 0% de saturación un color no tiene ningún matiz (se ve gris), mientras que al 100% se muestra totalmente saturado, es decir, muy vívido.
Finalmente, con el último valor (la luminosidad) controlamos lo claro u oscuro que será el color. Los porcentajes bajos dan lugar a colores más oscuros (sin ir más lejos al 0% todo color es negro puro), mientras que los altos dan lugar a colores claros.
¿Qué ventajas tiene el HSL?
Los códigos de color hexadecimales (por ejemplo #000000 o #FFFFFF para el negro y blanco puros, respectivamente) tienen un punto a favor, y es que son cortos y, por lo tanto, fáciles de recordar. Pero si trabajas con procesadores de CSS como SASS —algo que seguramente hagas— y almacenas los colores en variables, esta ventaja tampoco supone tanto.
Por el contrario, el modelo de color hexadecimal presenta varios problemas. Si por ejemplo te preguntamos qué tipo de color es el #ED6A5A, ¿sabrías decirlo? Pues se trata de un color terracota, pero seguramente no lo habrás acertado. No pasa nada: no es nada fácil adivinar de qué color se trata tan solo leyendo seis caracteres. Tampoco es intuitivo generar una escala cromática a partir de un código hexadecimal, algo que sin duda necesitas para crear tu Design System. Por ejemplo un color terracota oscuro en hexadecimal es #CA2B16, así que la relación que guarda con #ED6A5A te parecerá un misterio… Finalmente, tampoco puedes añadir opacidad a tus colores si usas el modelo hexadecimal.
Afortunadamente, los colores en formato HSL pueden ayudarnos a resolver todos estos problemas.
Los valores HSL son más intuitivos
Como hemos visto, solo fijándote en el primer valor HSL (el del matiz) sabrás si el color ante el que te encuentras es un añil, un verde, un amarillo… Con el segundo intuirás si es un color saturado o poco saturado. Y con el último podrás deducir si es un color oscuro o claro. En definitiva, comprenderás mejor los colores y trabajarás mejor con ellos.
El HSL facilita crear paletas coherentes
A la hora de generar paletas cromáticas para una web es muy importante que todos los colores guarden cierta armonía entre ellos. Digamos que tienen que ser distintos, pero a la vez tienen que tener algo en común que los una, que les haga parecer una familia. Y esto lo conseguimos con la saturación y la luminosidad. Los colores similares en saturación y luminosidad casan bien unos con otros. Así que puedes crear un conjunto coherente de colores secundarios modificando solo el tono del color primario. En el ejemplo que encontrarás justo debajo hay armonía porque sus colores tienen la prácticamente la misma luminosidad y la saturación es muy similar:
El HSL facilita la creación de variantes cromáticas
Todo Design System necesita variaciones de los colores de la paleta cromática. Estas variaciones de color se utilizan por ejemplo cuando colocamos el cursor del ratón sobre algún elemento de nuestra web —como un botón— o para indicar que un elemento está temporalmente deshabilitado. Generalmente el efecto que se suele aplicar en el primer caso es el de oscurecer ligeramente el color, mientras que en el segundo lo que se hace es aclararlo. Para esto solo hay que jugar con el último valor de cada color: la luminosidad. Estas variantes de color también son útiles para generar degradados de color.
El HSL puede generar transparencias
En realidad el HSL como tal no, pero si a este modelo de color le añadimos un cuarto valor, entonces tendremos el HSLA, en el que ‘A’ hace referencia a la transparencia (o canal alpha). Se utiliza así:
div {background-color: hsla(7, 80%, 64%, 0.5)}
Este color es el mismo color terracota que veíamos anteriormente aunque con un 50% de opacidad.
Como conclusión, podemos decir que los colores en modelo HSL pueden ahorrarnos mucho tiempo y esfuerzo a la hora de trabajar con Design Systems. Incluso pueden ayudarnos a comprender mejor el funcionamiento del color y explotar todas sus opciones. ¿Y tú? ¿Ya trabajas con HSL o prefieres el modelo hexadecimal?
¿Te ha parecido interesante? ¡Compártelo!
Seguro que a tus contactos le gusta leerlo.
