Less.js Color Definition hsl() Function

Last Updated : 25 Oct, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is better since CSS makes use of a dynamic style sheet language. LESS is flexible enough to work in a wide range of browsers. To create and improve CSS so that web browsers can use it, a computer language known as the CSS pre-processor is used. In addition, it is a CSS language extension that provides tools like variables, functions, mixins, and operations to help with the development of dynamic CSS while preserving backward compatibility.

In this article, we will see the Color Definition hsl() function in Less.js, along with understanding the basic implementation through the illustration. The hsl() function is utilized to generate a transparent color object of hsl types from hex value, RGB value, HSL or HSV value, and decimal values of red, green, blue, and alpha values. So this function takes the hex value, RGB value, HSL or HSV value and it returns a string which is the HSL value. This color format is generally utilized in Android development, Internet Explorer & .NET.

Syntax:

hsl(color);

Parameter value:

color: This is the compulsory parameter which is a color object, it can be a hex value, RGB value, HSL, or HSV value.

Return type: It returns the string as a final value.

Please refer to the How to pre-compile LESS into CSS article for a detailed description.

Example 1: The below code example demonstrates the usage and implementation of the color definition hsl() function.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" type="text/css"
          href="styles.css"/>
</head>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3>Less.js Color Blending hsl() Function</h3>
    <div class="c1">  
        <p>
          <strong>
                hsl(rgba(27, 55%, 40%, 0.6))<br>
               (Color Object)<br>hsl(...)
           </strong>
          </p>  
    </div>
</body>
</html>

styles.less:

CSS

@body-bg-color: #eeeeee;
@color: hsl(rgb(27, 55%, 40%, 0.6));
 
.c1
{  
    width: 250px;  
    height: 150px;  
    margin: 1rem;
    background-color: @color;  
}  
p{  
    padding: 40px 0px 0px 20px;  
}

Now, to compile the above LESS code to CSS code, run the following command:

lessc style.less style.css

The compiled CSS file comes to be:

style.css:

CSS

.c1
{
    width: 250px;
    height: 150px;
    margin: 1rem;
    background-color: hsl(159.73509934, 67.71300448%, 32.79411765%);
}
p
{
    padding: 40px 0px 0px 20px;
}

Output:

Example 2: The below code example demonstrates the usage and implementation of the Color Definition hsl() function with the if() and boolean logical functions and the color type function.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" type="text/css"
          href="styles.css"/>
</head>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3>Less.js Color Blending hsl() Function</h3>
    <div class="c1">  
        <p>
          <strong>
              hsl(#200000)<br>
             (Color Object)<br>hsl(...)
           </strong>
          </p>  
    </div>
</body>
</html>

styles.less:

CSS

@body-bg-color: #eeeeee;
@color: hsl(35, 45%, 56%);
@second: hsl(#200000);
@cond: boolean(iscolor(@second));
 
.c1 {  
    width: 250px;  
    height: 150px;  
    margin: 1rem;
    background-color: if(@cond, @color, @second);  
}  
p{  
    padding: 50px 0px 0px 60px;  
    color: if(@cond, @second, @color);
}

Now, to compile the above LESS code to CSS code, run the following command:

lessc styles.less styles.css

The compiled CSS file comes to be:

styles.css:

CSS

.c1
{
    width: 250px;
    height: 150px;
    margin: 1rem;
    background-color: hsl(35, 45%, 56%);
}
p 
{
    padding: 50px 0px 0px 60px;
    color: hsl(0, 100%, 6.2745098%);
}