La función hsl() es una función incorporada en CSS que se usa para definir los colores usando el modelo Hue-saturation-lightness (HSL).
Sintaxis:
hsl( hue, saturation, lightness )
Parámetros: esta función acepta tres parámetros, como se mencionó anteriormente y se describe a continuación:
- matiz: este parámetro se utiliza para definir el grado en la rueda de colores. Su valor se encuentra entre 0 y 360, donde 0 o 360 representa rojo, 120 representa verde y 240 representa azul.
- saturación: Este parámetro se usa para definir la saturación donde 0% representa sombra de gris y 100% representa todo color.
- luminosidad: Este parámetro se usa para definir la luminosidad donde 0% representa negro, 50% representa normal y 100% representa blanco.
El siguiente programa ilustra la función hsl() en CSS:
Programa:
html
<!DOCTYPE html>
<html>
<head>
<title>hsl() function</title>
<style>
.gfg1 {
background-color:hsl(120, 100%, 40%);
text-align:center;
}
.gfg2 {
background-color:hsl(120, 100%, 75%);
text-align:center
}
.gfg3 {
background-color:hsl(120, 100%, 20%);
text-align:center
}
.gfg {
font-size:40px;
font-weight:bold;
color:green;
text-align:center;
}
h1 {
text-align:center;
}
</style>
</head>
<body>
<div class = "gfg">GeeksforGeeks</div>
<h1>The hsl() Function</h1>
<p class = "gfg1">Green</p>
<p class = "gfg2">Light green</p>
<p class = "gfg3">Dark green</p>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la función hsl() se enumeran a continuación:
- Chrome 1.0 y superior
- Internet Explorer 9.0 y superior
- Firefox 1.0 y superior
- Safari 3.1 y superior
- Ópera 9.5 y superior