HTML Colores HSL y HSLA
HSL significa hue/tono, saturation/saturación y lightness/luminosidad.
Los valores de color HSLA son una extensión de HSL con un canal Alfa (opacidad).
HSL Valores de color
En HTML, se puede especificar un color usando tono, saturación y luminosidad (HSL) en la forma:
hsl(hue, saturation, lightness)
El tono es un grado en la rueda de colores 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 valor porcentual, 0% es negro y 100% es blanco.
Experimente mezclando los valores HSL a continuación:
HUE
SATURATION
LIGHTNESS
Ejemplo
Inténtalo tú mismo »
Saturation/Saturación
La saturación se puede describir como la intensidad de un color.
100% es color puro, sin sombras de grises
El 50% es 50% gris, pero aún puedes ver el color.
0% es completamente gris, ya no se puede ver el color.
Ejemplo
Inténtalo tú mismo »
Lightness/Luminosidad
La luminosidad de un color se puede describir como cuánta luz quieres 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
Inténtalo tú mismo »
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/claros:
Ejemplo
Inténtalo tú mismo »
HSLA Valores de color
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 (completamente transparente) y 1,0 (nada transparente):
Experimente mezclando los valores de HSLA siguientes:
HUE
SATURATION
LIGHTNESS
ALPHA
Ejemplo
Inténtalo tú mismo »
