Table of contents
HSL significa tono(hue), saturación(saturation) y luminosidad(lightness).
Valor HSL
En CSS, un color se puede especificar utilizando el tono(hue), la saturación(saturation) y la luminosidad(lightness) 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 porcentaje. 0% es negro, 50% no es ni claro ni oscuro, 100% es blanco
Prueba mezclando los valores de HSL a continuación:
Ejemplo:
<h1>Establezca colores usando valores HSL</h1>
<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h2>
<h2 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h2>
<h2 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h2>
<h2 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h2>
<h2 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h2>
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:
<h1>Saturación HSL</h1>
<p>El segundo parámetro de hsl() define la saturación. Menos saturación significa menos color. 0% es completamente gris:</p>
<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h2>
<h2 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h2>
<h2 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h2>
<h2 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h2>
<h2 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h2>
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 luminosidad total (blanco) .
Ejemplo:
<h1>Luminosidad HSL</h1>
<p>El tercer parámetro de hsl() define la luminosidad. 0% significa negro y 100% significa blanco:</p>
<h2 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h2>
<h2 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h2>
<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h2>
<h2 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h2>
<h2 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h2>
Sombras 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:
Ejemplo:
<h1>Sombras de gris</h1>
<p>Con HSL, los tonos de gris se crean estableciendo la saturación en 0 % y ajustando la luminosidad de 0 % al 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>
Valor HSLA
Los valores de color HSLA son una extensión de los valores de color HSL con un canal alpha, que especifica la opacidad de un color.
Un valor de color HSLA se especifica con:
hsla(hue, saturation, lightness, alpha)
El parámetro alpha es un número entre 0.0 (totalmente transparente) y 1.0 (nada transparente):
Prueba mezclando los valores de HSLA a continuación:
Ejemplo:
<h1>Crea colores transparentes con HSLA</h1>
<h2 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h2>
Resumen
El valor HSL en CSS permite especificar un color utilizando tono, saturación y luminosidad. El tono es un grado en la rueda de colores, la saturación es un valor porcentual que describe la intensidad del color y la luminosidad es un porcentaje que describe la cantidad de luz que se desea dar al color. Los valores HSLA son una extensión de los valores HSL con un canal alpha que especifica la opacidad de un color.
Traducido con 💚 desde W3Schools.com