HSL significa tono, saturación y luminosidad.
En CSS un color se puede especificar utilizando el tono, la saturación y la luminosidad (HSL) de esta forma:
hsl( tono , saturación , luminosidad )
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 ligereza también es un porcentaje. 0% es negro, 50% no es ni claro ni oscuro, 100% es blanco
Ejemplo
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
...
Saturación
La saturación se puede describir como la intensidad de un color.
100% es color puro, sin tonos de gris.
50% es 50% gris, pero aún se puede ver el color.
0% es completamente gris; ya no puedes ver el color.
Ejemplo
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
luminosidad
La luminosidad de un color se puede describir como la cantidad de luz que desea darle al color, donde 0 % significa que no hay luz (negro), 50 % significa 50 % luz (ni oscuro ni claro) y 100% significa total luminosidad (blanco).
Ejemplo
hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
Sombras de gris
Los tonos de gris a menudo se definen estableciendo el tono y la saturación en 0, y ajusta la luminosidad del 0 % al 100 % para obtener tonos más oscuros/claros:
Ejemplo
hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)
Valor HSLA
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 es especificado con:
hsla( tono, saturación , luminosidad, alfa )
El parámetro alfa es un número. entre 0.0 (totalmente transparente) y 1.0 (nada transparente):
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias