Less.js Color Operation desaturate() Function

Last Updated : 06 Oct, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. CSS is more beneficial because it makes use of a dynamic style sheet language. LESS is flexible enough to work in a wide range of browsers. The CSS pre-processor is a computer language that is used to augment and produce CSS so that web browsers may use it. Additionally, it is an extension to the CSS language that provides tools like variables, functions, mixins, and operations to support the development of dynamic CSS while preserving backward compatibility.

In this article, we are going to discuss the Color Operation desaturate() function is used to reduce the saturation value of a color object. It takes values in hex codes, RGB values, HSL values, and HSV values.

Syntax:

saturate(value, amount);

Parameters:

value: This is the parameter that is compulsory for the alpha function. It takes values in hex codes, RGB values, HSL values, and HSV values.
amount: This parameter is also compulsory and this parameter is used to specify the amount of saturation you want to add.

Compile LESS code into CSS code

Example 1: The code below demonstrates the usage and implementation of the Color Channel desaturate() function.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" type="text/css" href="style.css"/> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3>Less.js Color Operation desaturate() Function</h3> 
    <div class="box"> 
        <div class="container1"> 
            <p class="text"> 
                Base Color<br>hsl(60, 50%, 52%) 
            </p> 
        </div> 
        <div class="container2"> 
            <p class="text"> 
                Desaturated Color<br>hsl(60, 30%, 52%) 
            </p> 
        </div> 
    </div> 
</body> 
  
</html>

styles.less

@body-bg-color: #eeeeee; 
@text-color: hsl(250, 90%, 19%); 
@container-bg: hsl(60, 50%, 52%); 
@color: desaturate(@container-bg, 20%); 
  
body { 
    background: @body-bg-color; 
} 
  
.box { 
    display: flex; 
  
} 
  
.container1 { 
    height: 100px; 
    width: 150px; 
    padding: 20px; 
    background-color: @container-bg; 
    margin-right: 2rem; 
} 
  
.container2 { 
    height: 100px; 
    width: 150px; 
    padding: 20px; 
    background-color: @color; 
} 
  
.text { 
    color: @text-color; 
}

Syntax: To compile the above LESS code to CSS code, run the following command.

lessc styles.less styles.css

styles.css

body { 
    background: #eeeeee; 
} 
  
.box { 
    display: flex; 
} 
  
.container1 { 
    height: 100px; 
    width: 150px; 
    padding: 20px; 
    background-color: hsl(60, 50%, 52%); 
    margin-right: 2rem; 
} 
  
.container2 { 
    height: 100px; 
    width: 150px; 
    padding: 20px; 
    background-color: hsl(60, 30%, 52%); 
} 
  
.text { 
    color: hsl(250, 90%, 19%); 
}

Output:

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" type="text/css" href="style.css"/> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3>Less.js Color Operation desaturate() Function</h3> 
    <div class="box"> 
        <div class="container1"> 
            <p class="text"> 
                Base Color<br>hsl(230, 50%, 52%) 
            </p> 
        </div> 
        <div class="container2"> 
            <p class="text"> 
                Desaturated Color<br>hsl(230, 70%, 52%) 
            </p> 
        </div> 
    </div> 
</body> 
  
</html>

styles.less

@body-bg-color: #eeeeee; 
@text-color: hsl(62, 49%, 72%); 
@container-bg: hsl(230, 50%, 52%); 
@color: desaturate(@container-bg, 20%); 
@cond: boolean(saturation(@container-bg) < 60%); 
  
body { 
    background: @body-bg-color; 
} 
  
.box { 
    display: flex; 
  
} 
  
.container1 { 
    height: 100px; 
    width: 150px; 
    padding: 20px; 
    background-color: if(@cond, @container-bg, @color); 
    margin-right: 2rem; 
} 
  
.container2 { 
    height: 100px; 
    width: 150px; 
    padding: 20px; 
    background-color: if(@cond, @color, @container-bg); 
} 
  
.text { 
    color: @text-color; 
}

Syntax: To compile the above LESS code to CSS code, run the following command.

lessc styles.less styles.css

styles.css: The compiled CSS file is as follows.

styles.css

body { 
    background: #eeeeee; 
} 
  
.box { 
    display: flex; 
} 
  
.container1 { 
    height: 100px; 
    width: 150px; 
    padding: 20px; 
    background-color: hsl(230, 50%, 52%); 
    margin-right: 2rem; 
} 
  
.container2 { 
    height: 100px; 
    width: 150px; 
    padding: 20px; 
    background-color: hsl(230, 30%, 52%); 
} 
  
.text { 
    color: hsl(62, 49%, 72%); 
}