Less.js Color Blending exclusion() Function

Last Updated : 17 Jul, 2024

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 learn about the Less.js color blending exclusion() function, with a different function. That is to subtract the second input color from the first input color channel by channel. The negative values that come from the subtraction are inverted into positive. When we subtract complete black then there is no change in the resultant color and it is basically the first color. On subtracting the complete white color from the first color, the resultant color is the complete inverse of the first color object. The main contrast in this function is that the results produced by this function are of lower contrast.

Syntax:

difference(color1, color2)

Parameters:

color1: This is the first compulsory parameter which is a base color object, it can be a hex value, RGB value, HSL, or HSV value.
color2: This is the second compulsory parameter which is an overlay color object, it can be a hex value, RGB value, HSL, or HSV value.

Compile LESS code into CSS code.

Example 1: The code below demonstrates the usage and implementation of the color blending difference() function.

index.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 Blending 
      exclusion() Function</b></h3>
    <div class="flex-container">
        <div class="c1">  
            <p>(1st Color)<br>rgb(0, 153, 200)</p>  
        </div><br>  
        <div class="c2">  
            <p>(2nd Color)<br>rgb(240, 36, 60)</p>  
        </div><br>
    </div>  
    <div class="result">  
        <p>(Resultant)<br>#f092a6</p>  
    </div>  
</body>

</html>

styles.less

@body-bg-color: #eeeeee;
@color1: rgb(0, 153, 200);
@color2: rgb(240, 36, 60); 

.flex-container{
    display: flex;
    flex-direction: row;
}

.c1 {  
    width: 150px;  
    height: 150px;  
    margin: 1rem;
    background-color: @color1;  
}  
.c2 {  
    width: 150px;  
    height: 150px;  
    margin: 1rem;
    background-color: @color2;  
}  
.result {  
    width: 250px;  
    height: 150px;  
    margin: 3rem;
    background-color: exclusion(@color1, @color2);  
}  
p{  
    padding: 50px 0px 0px 20px;  
}

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

.flex-container {
  display: flex;
  flex-direction: row;
}
.c1 {
  width: 150px;
  height: 150px;
  margin: 1rem;
  background-color: #0099c8;
}
.c2 {
  width: 150px;
  height: 150px;
  margin: 1rem;
  background-color: #f0243c;
}
.result {
  width: 250px;
  height: 150px;
  margin: 3rem;
  background-color: #f092a6;
}
p {
  padding: 50px 0px 0px 20px;
}

Output:

Example 2: The code below demonstrates the usage and implementation of the Color Blending difference() function with the if and boolean logical functions and saturation color channel function.

index.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 Blending 
      exclusion() Function</b></h3>
    <div class="flex-container">
        <div class="c1">  
            <p>(1st Color)<br>rgb(0, 200, 100)</p>  
        </div><br>  
        <div class="c2">  
            <p>(2nd Color)<br>rgb(220, 43, 55)</p>  
        </div><br>
    </div>  
    <div class="result">  
        <p>(Resultant)<br>#dcb070</p>  
    </div>  
</body>

</html>

styles.less

@body-bg-color: #eeeeee;
@color1: rgb(0, 200, 100);
@color2: rgb(220, 43, 55);
@resultant: exclusion(@color1, @color2);
@cond1: boolean(saturation(@resultant) > 50%);

.flex-container {
    display: flex;
    flex-direction: row;
}

.c1 {
    width: 150px;
    height: 150px;
    margin: 1rem;
    background-color: @color1;
}
.c2 {
    width: 150px;
    height: 150px;
    margin: 1rem;
    background-color: @color2;
}
.result {
    width: 250px;
    height: 150px;
    margin: 3rem;
    background-color: if(@cond1, @resultant, @color2);
}
p {
    padding: 50px 0px 0px 20px;
}

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

.flex-container {
    display: flex;
    flex-direction: row;
}
.c1 {
    width: 150px;
    height: 150px;
    margin: 1rem;
    background-color: #00c864;
}
.c2 {
    width: 150px;
    height: 150px;
    margin: 1rem;
    background-color: #dc2b37;
}
.result {
    width: 250px;
    height: 150px;
    margin: 3rem;
    background-color: #dcb070;
}
p {
    padding: 50px 0px 0px 20px;
}