Less.js Color Blending hardlight() 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 practical as a result of its dynamic style sheet language. LESS has the flexibility to work with different browsers. A computer language called the CSS pre-processor is used to enhance and generate CSS so that web browsers may use it. Additionally, it is a CSS language extension that provides features like variables, functions, mixins, and operations that let us create dynamic CSS while keeping backward compatibility.

Less.js Color Blending hardlight() function is the combination of the multiply function and the screen functions and works like the overlay() function just in reverse. This function conditionally makes light channels lighter and darker channels darker but the second color object determines what the resultant color will be.

Syntax:

hardlight(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. This second color object is the primary determinant for the making of the resultant color if it will be lighter or darker.

Compile LESS code into CSS code.

Example 1: The code below demonstrates the usage and implementation of the Color Blending hardlight() 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 Blending hardlight() Function</h3> 
      
    <div class="flex-container"> 
        <div class="c1"> 
            <p>(Overlay)<br>rgb(0, 153, 200)</p> 
        </div><br> 
  
        <div class="c2"> 
            <p>(Base color)<br>rgb(240, 36, 60)</p> 
        </div><br> 
    </div> 
      
    <div class="result"> 
        <p>(Resultant)<br>#b9432b</p> 
    </div> 
</body> 
  
</html>

styles.less: This is compiled into a CSS file which is given further below.

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: hardlight(@color1, @color2); 
} 
  
p { 
    padding: 50px 0px 0px 20px; 
}

style.css: The CSS output of the above less file was compiled.

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: #e12b5e; 
} 
  
p { 
    padding: 50px 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.

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

styles.less: This is compiled into a CSS file which is given further below.

styles.less

/* styles.less */
@body-bg-color: #eeeeee; 
@color1: rgb(0, 200, 100); 
@color2: rgb(220, 43, 55); 
@resultant: hardlight(@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; 
}

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

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: #b9432b; 
} 
  
p { 
    padding: 50px 0px 0px 20px; 
}