La función hsla() es una función incorporada en CSS que se usa para definir los colores usando el modelo Hue Saturation Lightness Alpha (HSLA).
Sintaxis:
hsla( hue, saturation, lightness, alpha )
Parámetros: esta función acepta cuatro 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.
- alfa: este parámetro se utiliza para definir la opacidad y el valor se encuentra entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco).
El siguiente programa ilustra la función hsla() en CSS:
Programa:
<!DOCTYPE html>
<html>
<head>
<title>hsla function</title>
<style>
.gfg1 {
background-color:hsla(120, 100%, 40%, 0.3);
text-align:center;
}
.gfg2 {
background-color:hsla(120, 100%, 75%, 0.3);
text-align:center
}
.gfg3 {
background-color:hsla(120, 100%, 20%, 0.3);
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 hsla() 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 hsla() se enumeran a continuación:
- Chrome 1.0 y superior
- Internet Explorer 9.0 y superior
- Firefox 3.0 y superior
- Safari 3.1 y superior
- Ópera 10.0 y superior