Less.js Color Blending average() Function

Last Updated : 25 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 our article, we will learn the Color Blending average() function, which takes the average of two colors on a per-channel (RGB) basis. The average of the RGB values produces a new output which is the output color.

Syntax:

average(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 average() function.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" type="text/css" 
          href="styles.css"/> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1>   
    <h3><b>Less.js Color Blending average() 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 class="result">   
            <p>(Resultant)<br>#785e82</p>   
        </div>   
    </div>   
</body> 
</html>

styles.less:

CSS

@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: 1rem; 
    background-color: average(@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:

styles.css: The CSS output of the above Less file was compiled.

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: 1rem; 
    background-color: #785e82; 
} 
p { 
    padding: 50px 0px 0px 20px; 
}

Output:

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" type="text/css" 
          href="styles.css"/> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1>   
    <h3><b>Less.js Color Blending average() 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 class="result">   
            <p>(Resultant)<br>#6e7a4e</p>   
        </div>   
    </div>   
</body> 
  
</html>

styles.less:

CSS

@body-bg-color: #eeeeee; 
@color1: rgb(0, 200, 100); 
@color2: rgb(220, 43, 55); 
@resultant: average(@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: 1rem; 
    background-color: if(@cond1, @color2, @resultant);   
}   
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:

styles.css: The CSS output of the above Less file was compiled.

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: 1rem; 
    background-color: #6e7a4e; 
} 
p { 
    padding: 50px 0px 0px 20px; 
}