Less.js Color Operation grayscale() Function

Last Updated : 31 Oct, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Since CSS uses a dynamic style sheet language, it is superior. LESS is adaptable enough to function in a variety of browsers. Web browsers can only use CSS if it is built and developed using a computer language called the CSS pre-processor. While keeping backward compatibility and providing capabilities like variables, functions, mixins, and operations, it helps with the development of dynamic CSS. It is a development in the CSS language.

In this article, we are going to discuss the color operation grayscale() function in Less.js, along with knowing their basic implementation through the illustration.

The grayscale() function is used to remove all the saturation of the given color. So this function takes the hex value, RGB value, HSL, or HSV value and it returns a value.

Syntax:

grayscale(color)

Parameter values:

color: This is the first parameter that is compulsory and it is the color object which is desaturated. It can be a hex value, RGB value, HSL, or HSV 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 Operation grayscale() function in Less.js.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" type="text/css"
          href="style.css"/>
</head>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3><b>Less.js Color Operation grayscale() Function</b></h3>
    <div class="c1">  
        <p>grayscale(hsl(148, 100%, 50%), 65%)
          <br>(Tinted Result)<br>hsl(0, 0%, 50%)</p>  
    </div>
</body>
 
</html>

style.less:

CSS

@body-bg-color: #eeeeee;
 
body {
    background-color: @body-bg-color;
}
.c1 {
    width: 350px;
    height: 150px;
    margin: 1rem;
    background-color: grayscale(hsl(148, 100%, 50%), 65%);
}
p {
    padding: 40px 0px 0px 20px;
    color: #ffffff;
}

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

body {
    background-color: #eeeeee;
}
.c1 {
    width: 350px;
    height: 150px;
    margin: 1rem;
    background-color: hsl(0, 0%, 50%);
}
p {
    padding: 40px 0px 0px 20px;
    color: #ffffff;
}

Output:

Example 2: The below code example demonstrates the usage and implementation of the Color Operation grayscale() function with the if() and boolean logical functions and the saturation() function.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" type="text/css"
          href="style.css"/>
</head>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3><b>Less.js Color Operation grayscale() Function</b></h3>
    <div class="c1">  
        <p>grayscale(#ff0000)
          <br>(Tinted Result)<br>#808080</p>  
    </div>
</body>
 
</html>

style.less:

CSS

@body-bg-color: #eeeeee;
@color: hsl(177, 100%, 39%);
@second: rgb(58, 21, 11);
@hex: grayscale(#ff0000);
@cond: boolean(saturation(@hex) = 0%);
body {
    background-color: @body-bg-color;
}
.c1 {
    width: 250px;
    height: 150px;
    margin: 1rem;
    background-color: if(@cond, @hex, @color);
}
p {
    padding: 40px 0px 0px 15px;
    color: if(@cond, @color, @second);
}

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:

style.css:

CSS

body {
    background-color: #eeeeee;
}
.c1 {
    width: 250px;
    height: 150px;
    margin: 1rem;
    background-color: #808080;
}
p {
    padding: 40px 0px 0px 15px;
    color: hsl(177, 100%, 39%);
}