Less.js Color Blending softlight() Function

Last Updated : 11 Oct, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Because of this dynamic style sheet language, CSS is more useful. Interoperability between browsers is a characteristic of LESS. The CSS pre-processor is a computer language that is used to augment and compile CSS so that web browsers may use it. In addition, it is an extension to the CSS language that offers features like variables, functions, mixins, and operations that enable us to develop dynamic CSS while maintaining backward compatibility.

Less.js Color Blending softlight() function performs what the overlay function does but this function takes only a part of the color and softens or highlights the other color. That means if the base color is on the light side the overlay one will be softened and if the base color is on the dark side the overlay one will be highlighted. So the base color object determines what the resultant color will be.

Syntax:

softlight(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. This first color object is the primary determinant for the making of the resultant color that is whether the second color will be softened or highlighted.
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 softlight() 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 softlight() Function</b></h3> 
    <div class="flex-container"> 
        <div class="c1">   
            <p>(Base color)<br>rgb(0, 153, 200)</p>   
        </div><br>   
        <div class="c2">   
            <p>(Overlay)<br>rgb(240, 36, 60)</p>   
        </div><br> 
        <div class="result">   
            <p>(Resultant) <br> #e23060</p>   
           </div> 
    </div>     
</body> 
  
</html>

styles.less

@body-bg-color: #eeeeee; 
@color2: rgb(0, 153, 200); 
@color1: 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: softlight(@color1, @color2);   
}   
p 
{   
    padding: 40px 0px 0px 20px;   
}

style.css

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

Output:

Example 2: The code below demonstrates the usage and implementation of the color blending hardlight() function with the if() and boolean logical functions.

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 hardlight() Function</b></h3> 
    <div class="flex-container"> 
        <div class="c1">   
            <p>(Overlay)<br>rgb(220, 43, 55)</p>   
        </div><br>   
        <div class="c2">   
            <p>(Base color)<br>rgb(0, 200, 100)</p>   
        </div><br> 
        <div class="result">   
            <p>(Resultant)<br>#be4e2e</p>   
        </div>   
    </div>   
</body> 
  
</html>

styles.less

@body-bg-color: #eeeeee; 
@color2: rgb(0, 200, 100); 
@color1: rgb(220, 43, 55); 
@resultant: softlight(@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, @resultant, @color2);   
}   
p{   
    padding: 50px 0px 0px 20px;   
}

style.css

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