Less greyscale()

The Less Greyscale function is used to discard the saturation from a color in the selected elements. The parameters used for greyscale function are:

Color: It is used to specify the color object.

Greyscale Function Example

Let's take an example to demonstrate the usage of greyscale color operation in Less file.

Create a HTML file named "simple.html", having the following data.

HTML file: simple.html

<!DOCTYPE html>
<html>
<head>
   <title>Greyscale Example</title>
   <link rel="stylesheet" type="text/css" href="simple.css"/>
</head>
<body>
   <h2>Example of Greyscale Color Operation</h2>
   <div class="myclass1">
   <p>color :<br>#426105</p>
   </div><br>
   <div class="myclass2">
      <p>result :<br>#333333</p>
   </div>
</body>
</html>

Now create a file named "simple.less". It is similar to CSS file. The only one difference is that it is saved with ".less" extension.

LESS file: simple.less

.myclass1{
   height:100px;
   width:100px;
   padding: 30px 0px 0px 25px;
   background-color: hsl(80, 90%, 20%);
   color:white;
}
.myclass2{
   height:100px;
   width:100px;
   padding: 30px 0px 0px 25px;
   background-color: greyscale(hsl(80, 90%, 20%));
   color:white;
}

Put the both file "simple.html" and "simple.less" inside the root folder of Node.js

Now, execute the following code: lessc simple.less simple.css

This will compile the "simple.less" file. A CSS file named "simple.css" will be generated.

For example:

The generated CSS "simple.css", has the following code:

.myclass1 {
  height: 100px;
  width: 100px;
  padding: 30px 0px 0px 25px;
  background-color: #426105;
  color: white;
}
.myclass2 {
  height: 100px;
  width: 100px;
  padding: 30px 0px 0px 25px;
  background-color: #333333;
  color: white;
}

Output: