CSS HSL Colores
HSL representa hue (tono), saturation (saturación) y lightness (luminosidad).
HSL Valor
En CSS, un color se puede especificar utilizando tono, saturación y luminosidad (HSL) en la forma:
hsl(hue, saturation, lightness)
El tono es un grado en la rueda de color de 0 a 360. 0 es rojo, 120 es verde y 240 es azul.
La saturación es un valor porcentual, 0% significa un tono de gris y 100% es el color completo.
La luminosidad también es un porcentaje, 0% es negro, 50% no es ni claro ni oscuro, 100% es blanco.
Experimente mezclando los valores HSL a continuación:
HUE
SATURATION
LIGHTNESS
Ejemplo
Try it Yourself »
Saturation (Saturación)
La saturación se puede describir como la intensidad de un color.
100% es color puro, sin matices de gris.
El 50% es 50% gris, pero aún puedes ver el color.
0% es completamente gris, ya no se puede ver el color.
Ejemplo
Try it Yourself »
Lightness (Ligereza)
La luminosidad de un color se puede describir como la cantidad de luz que desea darle al color, donde 0% significa sin luz (negro), 50% significa 50% de luz (ni oscuro ni claro) y 100% significa luminosidad total (blanco).
Ejemplo
Try it Yourself »
Tonos de gris
Los tonos de gris a menudo se definen estableciendo el tono y la saturación en 0, y ajustando la luminosidad del 0 % al 100 % para obtener tonos más oscuros o más claros:
Ejemplo
Try it Yourself »
HSLA Valor
Los valores de color HSLA son una extensión de los valores de color HSL con un canal alfa, que especifica la opacidad de un color.
Un valor de color HSLA se especifica con:
hsla(hue, saturation, lightness, alpha)
El parámetro alfa es un número entre 0,0 (totalmente transparente) y 1,0 (nada transparente):
Experimente mezclando los valores HSLA a continuación:
HUE
SATURATION
LIGHTNESS
ALPHA
Ejemplo
Try it Yourself »
CSS — Colores HSL — Vídeo de W3Schools
Este vídeo es una introducción a los colores HSL en CSS.
¡Parte de una serie de videotutoriales para aprender CSS para principiantes!
