Less.js Color Operation saturate() 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. Because it uses a dynamic style sheet language, CSS is more useful. LESS is adaptable enough to function in a variety of browsers. In order for web browsers to use CSS, it must be enhanced and generated using a computer language known as the CSS pre-processor. It is also a CSS language extension that offers features like variables, functions, mixins, and operations to enable the creation of dynamic CSS while maintaining backward compatibility.

In this article, we are going to discuss the Color Operation saturate() function used to extract the alpha channel of the color object. It returns a positive decimal value (0-1). 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 saturate() 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 saturate() Function</h3> 
    <div class="box"> 
        <div class="container1"> 
            <p class="text"> 
                Base Color<br>hsl(60, 72%, 61%) 
            </p> 
        </div> 
        <div class="container2"> 
            <p class="text"> 
                Saturated Color<br>hsl(250, 90%, 19%) 
            </p> 
        </div> 
    </div> 
</body> 
  
</html>

styles.less

@body-bg-color: #eeeeee; 
@text-color: hsl(250, 90%, 19%); 
@container-bg: hsl(60, 50%, 52%); 
@color: saturate(@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, 70%, 52%); 
} 
  
.text { 
    color: hsl(250, 90%, 19%); 
}

Output:

Example 2: The code below demonstrates the usage and implementation of the Color Operation saturate() 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 saturate() 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"> 
                Saturated 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: saturate(@container-bg, 20%); 
@cond: boolean(saturation(@color) > 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, 70%, 52%); 
} 
  
.text { 
    color: hsl(62, 49%, 72%); 
}