Less.js Color Blending screen() Function

Last Updated : 28 Sep, 2022

In this article, we will see the Color Blending screen() Function in LESS.js, along with understanding its basic implementation through the illustrations.

Less.js is basically a CSS tool that provides additional features to traditional CSS. Color blending means when we blend or mix two separate color ranges, we get a variety of different output colors as a result which depends on which color blending method is being used. The screen() method generally gives a bright color as result.

Screen() Function: The working principle of screen() functions is quite similar to the mathematical multiplication operation. The white color works as 0 and the black color works as 1. When we put the second color with white, the result color is also white because as we know everything multiplies with 0 becomes 0, and when we put the first color with black color, then we get the same color in the resultant color because everything multiplied with 1 remains the same.

Syntax:

<css property> : screen(first color, second color);

Parameter values:

first color: it accepts a color value, that could be HEX value, RGB value, or absolute color name.
Second color: it also accepts a color value, which could be a HEX value, RGB value, or absolute color name.

Return type: The return type for this function will be the color.

Example 1: In this example, we will use the green color as the first color and white as a 2nd color and we can see the white color in the output.

Style.less

.container1 { 
    height: 200px; 
    width: 600px; 
    border: 1px solid black; 
    border-radius: 10px; 
    background-color: #313131; 
    color: white; 
} 
  
.function { 
    text-align: center; 
} 
  
.colors { 
    height: 150px; 
    width: 100%; 
    display: flex; 
    flex-direction: row; 
    justify-content: space-evenly; 
    align-items: center; 
} 
  
.firstColor, 
.secondColor, 
.thirdColor { 
    height: 100px; 
    width: 100px; 
} 
  
.firstColor { 
    background-color: #008000; 
    color: white; 
} 
  
.secondColor { 
    background-color: #ffffff; 
    color: black; 
} 
  
.thirdColor { 
    background-color: screen(#008000, #ffffff); 
    color: black; 
} 

To compile the Less.js code to CSS, use the following command:

lessc styles.less styles.css

Style.css

.container1 { 
    height: 200px; 
    width: 600px; 
    border: 1px solid black; 
    border-radius: 10px; 
    background-color: #313131; 
    color: white; 
} 
  
.function { 
    text-align: center; 
} 
  
.colors { 
    height: 150px; 
    width: 100%; 
    display: flex; 
    flex-direction: row; 
    justify-content: space-evenly; 
    align-items: center; 
} 
  
.firstColor, 
.secondColor, 
.thirdColor { 
    height: 100px; 
    width: 100px; 
} 
  
.firstColor { 
    background-color: #008000; 
    color: white; 
} 
  
.secondColor { 
    background-color: #ffffff; 
    color: black; 
} 
  
.thirdColor { 
    background-color: #ffffff; 
    color: black; 
} 

HTML Code:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>LESS.js Color Blending Function</title> 
    <link rel="stylesheet" href="Style.css"> 
</head> 
  
<body> 
    <h2 style="color: green;">GeeksforGeeks</h2> 
    <div class="container1"> 
        <div class="function"> 
            <h3>Screen</h3> 
        </div> 
        <div class="colors"> 
            <div class="firstColor">1st color</div> 
            <div class="secondColor">2nd color</div> 
            <div class="thirdColor">Result</div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will use green as the first color and black as a second color and we can see the output color is also green.

Style.less

.container1 { 
    height: 200px; 
    width: 600px; 
    border: 1px solid black; 
    border-radius: 10px; 
    background-color: #313131; 
    color: white; 
} 
  
.firstColor, 
.secondColor, 
.thirdColor { 
    height: 100px; 
    width: 100px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
  
.function { 
    text-align: center; 
} 
  
.colors { 
    height: 150px; 
    width: 100%; 
    display: flex; 
    flex-direction: row; 
    justify-content: space-evenly; 
    align-items: center; 
} 
  
.firstColor { 
    background-color: #008000; 
    color: white; 
} 
  
.secondColor { 
    background-color: #000000; 
    color: white; 
} 
  
.thirdColor { 
    background-color: screen(#008000, #000000); 
    color: black; 
} 

To compile the Less.js code to CSS, use the following command:

lessc styles.less styles.css

Style.css

.container1 { 
    height: 200px; 
    width: 600px; 
    border: 1px solid black; 
    border-radius: 10px; 
    background-color: #313131; 
    color: white; 
} 
  
.firstColor, 
.secondColor, 
.thirdColor { 
    height: 100px; 
    width: 100px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
  
.function { 
    text-align: center; 
} 
  
.colors { 
    height: 150px; 
    width: 100%; 
    display: flex; 
    flex-direction: row; 
    justify-content: space-evenly; 
    align-items: center; 
} 
  
.firstColor { 
    background-color: #008000; 
    color: white; 
} 
  
.secondColor { 
    background-color: #000000; 
    color: white; 
} 
  
.thirdColor { 
    background-color: #008000; 
    color: black; 
} 

HTML Code:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>LESS.js Color Blending Function</title> 
    <link rel="stylesheet" href="Style.css"> 
</head> 
  
<body> 
    <h2 style="color: green;">GeeksforGeeks</h2> 
    <div class="container1"> 
        <div class="function"> 
            <h3>Screen</h3> 
        </div> 
        <div class="colors"> 
            <div class="firstColor">1st color</div> 
            <div class="secondColor">2nd color</div> 
            <div class="thirdColor">Result</div> 
        </div> 
    </div> 
</body> 
  
</html>