Less.js Color Blending screen() Function

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.

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

lessc styles.less styles.css

HTML Code:

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.

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

lessc styles.less styles.css

HTML Code:

Output:

 

Reference: https://lesscss.org/functions/#color-blending-screen