Hay varias formas de representar colores en CSS. Uno de ellos es el sistema HSL. En este artículo, le mostraré las posibilidades que abre para un diseñador de maquetación.¿Qué es el HSL?
El nombre del formato HSL se deriva de una combinación de las primeras letras Hue (matiz), Saturate (saturación) y Lightness (luminosidad o brillo).El tono es el valor de color en la rueda de color y se establece en grados. 0 ° corresponde al rojo, 120 ° al verde y 240 ° al azul. El valor del tono puede variar de 0 a 359. La
saturación es la intensidad del color, medida en porcentaje del 0% al 100%. Determina qué tan lejos está el color del gris con el mismo brillo.El brillo caracteriza el brillo del color y se indica como un porcentaje del 0% al 100%. Los valores pequeños hacen que el color sea más oscuro y los valores altos más claros, los valores extremos 0% y 100% corresponden al blanco y negro.
Beneficios de HSL ()
La ventaja clave de HSL es la capacidad de especificar características de color independientemente el uno del otro . Esto te abre grandes oportunidades. Puede hacer que el color sea más brillante, más oscuro, más saturado o descolorido. Y manteniendo su sombra. O viceversa: cambie los tonos sin cambiar su saturación o brillo. A menudo, los preprocesadores se utilizan para usar estas funciones, pero también puede prescindir de ellas.Algunos ejemplos
Colores derivados del mismo tono.
Una de las tareas más comunes: hacer un componente que tome un solo tono básico, pero que consista en varias variaciones del mismo. En mi ejemplo, esta es una alerta típica en la que el color del texto, el fondo y el trazo tienen el mismo tono y saturación pero un brillo diferente:.success {
border-color: hsl(120, 50%, 40%);
color: hsl(120, 50%, 20%);
background-color: hsl(120, 50%, 90%);
}
¿Ves qué hermoso y claro? Es inmediatamente obvio que esta es una "familia" de flores. En otros formatos, se vería así:
.alert {
border-color: rgb(51, 153, 51);
color: rgb(25, 77, 25);
background-color: rgb(217, 242, 217);
}
.alert {
border-color: #339933;
color: #194d19;
background-color: #d9f2d9;
}
No sé sobre ti, pero es difícil para mí mirar ese código para decir si estos colores están de alguna manera conectados o no.Pero estos son pequeños. El verdadero poder se revela cuando se utilizan propiedades personalizadas de CSS.Como dicen, cuida tus manos. Si hacemos cualquier componente del color, por ejemplo, un tono, una variable, entonces podemos crear fácilmente un número infinito de variaciones de nuestro componente cambiando solo el tono básico en él. Y todos los derivados serán rechazados..alert {
border-color: hsl(var(--hue), 50%, 40%);
color: hsl(var(--hue), 50%, 20%);
background-color: hsl(var(--hue), 50%, 90%);
}
Blanqueamiento
En este ejemplo, el botón de apagado tiene una saturación reducida. Todavía tiene un sutil tinte azul, pero es casi gris. Y cuando pasas el botón, el tono conserva el tono y la saturación, pero se vuelve más oscuro.Para resolver este problema, es suficiente cambiar solo uno de los tres parámetros para obtener una derivada, pero un color similar. Lo que al usar rgb o hex no es tan fácil de hacer.Como en el primer ejemplo, puede cambiar fácilmente el tono sin afectar todas las demás características de color en su componente.Herencia de color
Una de las mejores técnicas: crear un tono, a partir de otro. Esto se logra mediante la simple adición en calc ().:root{
--hue: 120;
}
header {
background-color: hsl(var(--hue), 30%, 20%)
}
header button {
background-color: hsl(calc(var(--hue) + 130), 80%, 50%)
}
En este ejemplo, el tono del botón depende (+ 130 ° de la rueda de colores) del tono del contenedor.Entonces, de una manera simple, puede crear paletas de colores flexibles completas para sus sitios, configurando solo un tono básico y comenzando desde él.Y todos sus componentes conservarán la saturación y el brillo, como se demostró en ejemplos anteriores.
Futuro
En la especificación Nivel 4 del Módulo de color CSS , se describieron nuevas funciones: lab () y lch () para especificar colores en los formatos del mismo nombre. LCH tiene la misma flexibilidad que hsl, pero trae una serie de mejoras, teniendo en cuenta los dispositivos modernos. Puede leer más sobre esto en el artículo “ Colores LCH en CSS: ¿qué, por qué y cómo? ".Total
En mi opinión, el formato hsl tiene una flexibilidad fantástica en comparación con las alternativas. En combinación con variables, prácticamente ofrece todas las posibilidades para trabajar con colores desde preprocesadores hasta CSS nativo.PD Perdón por el fuerte título :)