Open In App

CSS hsl() Function

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The hsl() function is an inbuilt function in CSS that is used to define the colors using the Hue-saturation-lightness model (HSL).

Syntax: 

hsl( hue, saturation, lightness )

Parameters: This function accepts three 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.

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

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>


Output: 

Supported Browsers: The browser supported by hsl() 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