Open In App
Related Articles

CSS hsl() Function

Improve Article
Save Article
Like Article

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


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:


<!DOCTYPE html>
    <title>hsl() function</title>
        .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;
    <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>


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

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Opera

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 04 Aug, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials