HSL significa tono, saturación y luminosidad (hue, saturation, y lightness.)
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 porcentaje, el 0 % es negro, el 50 % no es ni claro ni oscuro, el 100 % es blanco.
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 se puede ver el color.
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) 100 % significa luminosidad total (blanco).
Tonos de gris
Los tonos de gris a menudo se definen estableciendo el tono y la saturación en 0, y ajustando la luminosidad de 0 % a 100 % para obtener tonos más oscuros/claros.
Ejm
<!DOCTYPE html>
<html>
<body>
<h1>Shades of gray</h1>
<p>With HSL, shades of gray are made by setting the saturation to 0%, and adjusting the lightness from 0% to 100%:</p>
<h2 style=»background-color:hsl(0, 0%, 0%);»>hsl(0, 0%, 0%)</h2>
<h2 style=»background-color:hsl(0, 0%, 24%);»>hsl(0, 0%, 24%)</h2>
<h2 style=»background-color:hsl(0, 0%, 47%);»>hsl(0, 0%, 47%)</h2>
<h2 style=»background-color:hsl(0, 0%, 71%);»>hsl(0, 0%, 71%)</h2>
<h2 style=»background-color:hsl(0, 0%, 94%);»>hsl(0, 0%, 94%)</h2>
<h2 style=»background-color:hsl(0, 0%, 100%);»>hsl(0, 0%, 100%)</h2>
</body>
</html>
Valores 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 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):