Open In App

CSS hsla() Function

Improve
Improve
Like Article
Like
Save
Share
Report

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

Syntax:

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: 

html




<!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>


Output: 

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

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Opera


Last Updated : 04 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads