Open In App

CSS hsla() Function

Last Updated : 04 Aug, 2023
Like Article

The hsla() function is an inbuilt function in CSS that is used to define the colors using the Hue Saturation Lightness Alpha (HSLA) model.


hsla( hue, saturation, lightness, alpha )

Parameters: This function accepts four parameters as mentioned above and described below:

  • hue: This parameter is used to define the degree on the color wheel. Its value lies between 0 to 360 where 0 or 360 represents red, 120 represents green and 240 represents blue.
  • saturation: This parameter is used to define saturation where 0% represents a shade of gray and 100% represents a full color.
  • lightness: This parameter is used to define lightness where 0% represents black, 50% represents normal, and 100% represents white.
  • alpha: This parameter is used to define the opacity and the value lies between 0.0 (fully transparent) and 1.0 (fully opaque).

Example: The below program illustrates the hsla() function in CSS: 


<!DOCTYPE html>
    <title>hsla function</title>
        .gfg1 {
                hsla(120, 100%, 40%, 0.3);
            text-align: center;
        .gfg2 {
                hsla(120, 100%, 75%, 0.3);
            text-align: center
        .gfg3 {
                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;
    <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>


Supported Browsers: The browser supported by hsla() function are listed below:

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Opera

Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads