Less.js Color Blending Functions
Last Updated :
16 Oct, 2022
In this article, we are going to see Color Blending Functions in Less.js.
Less (Leaner Style Sheets) is an extension to normal CSS code which basically enhances the abilities of normal CSS and provides it superpowers.
Color blending functions are provided by Less.js to basically perform blending operations on colors and get the output.
There are 9 Color Blending functions provided by Less.js which are as follows:
1. multiply: This function is used to multiply two colors and return the output. Basically, the corresponding RGB channels of both colors are multiplied and then divided by 255. The output color is a darker color.
Syntax:
multiply(color1, color2)
Parameters:
- color1: A color object. For example: brown, RGB(13, 13, 13) etc
- color2: A color object. For example: brown, RGB(13, 13, 13) etc
2. screen: This function is basically used to do the opposite of the multiply function and hence, the resultant output color is a brighter color.
Syntax:
screen(color1, color2)
Parameters:
- color1: A color object. For example: brown, RGB(13, 13, 13) etc
- color2: A color object. For example: brown, RGB(13, 13, 13) etc
3. overlay: This function is used to basically combine the effects of both the multiply and screen functions. This function makes the light channels lighter and the dark channels darker. The result is determined by the first color argument.
Syntax:
overlay(color1, color2)
Parameters:
- color1: A base color object which determines whether the output color would be lighter or darker.
- color2: A color object to overlay.
4. softlight: This function is basically the same as the overlay function, the difference being that it avoids the resultant on pure black being pure black and on pure white being pure white.
Syntax:
softlight(color1, color2)
Parameters:
- color1: A color object to soft light another. For example: brown, RGB(13, 13, 13) etc.
- color2: A color object to soft and light. For example: brown, RGB(13, 13, 13) etc.
5. hardlight: This function is the same as the overlay function, the difference being that color2 becomes the base color and color1 becomes the color to be overlayed.
Syntax:
hardlight(color1, color2)
Parameters:
- color1: A color object to overlay.
- color2: A base color object which determines whether the output color would be lighter or darker.
6. difference: This function is used to subtract color2 from color1 on a channel-by-channel basis. The negative values are inverted. Subtracting black color results in no difference and white color results in inversion of the color.
Syntax:
difference(color1, color2)
Parameters:
- color1: A color object which acts as the minuend.
- color2: A color object which acts as the subtrahend.
7. exclusion: This function is similar to the different functions, the difference being that the output is having a lower contrast.
Syntax:
exclusion(color1, color2)
Parameters:
- color1: A color object which acts as the minuend.
- color2: A color object which acts as the subtrahend.
8. average: This function is used to find the average of two colors by averaging the corresponding RGB channels and returning the output color.
Syntax:
average(color1, color2)
Parameters:
- color1: A color object. For example: brown, RGB(13, 13, 13) etc.
- color2: A color object. For example: brown, RGB(13, 13, 13) etc.
9. negation: This function does the opposite of the difference function and return a brighter color as the output.
Syntax:
negation(color1, color2)
Parameters:
- color1: A color object which acts as the minuend.
- color2: A color object which acts as the subtrahend.
Example 1: In this example, we have defined two colors namely @primary and @secondary. Now using these two colors we perform different various color blending functions and apply them to the HTML.
HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>GeeksforGeeks |
Color Blending Functions in Less.js</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body style="font-family: sans-serif;">
<h1 style="color: green;">GeeksforGeeks</h1>
<h3><b>Color Blending Functions in Less.js</b></h3>
<p class="multiply">Multiply</p>
<p class="overlay">Overlay</p>
<p class="difference">Difference</p>
<p class="average">Average</p>
<p class="negation">negation</p>
</body>
</html>
styles.less: The LESS code is as follows.
CSS
// styles.less
@primary: springgreen;
@secondary: brown;
.multiply {
color: multiply(@primary, @secondary);
}
.overlay {
color: overlay(@primary, @secondary);
}
.difference {
color: difference(@primary, @secondary);
}
.average {
color: average(@primary, @secondary);
}
.negation {
color: negation(@primary, @secondary);
}
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:
CSS
.multiply {
color: #002a15;
}
.overlay {
color: #00ff2a;
}
.difference {
color: #a5d555;
}
.average {
color: #539455;
}
.negation {
color: #a5d5a9;
}
Output:
the output of color blending functions in less.js example 1
Example 2: In this example, we have two colors namely @color1 which is formed using the screen function on pink and brown colors, and @color2 which is formed using the exclusion function on pink and brown colors. Then we have made 2 classes namely "hardlight" and "softlight" which basically perform hardlight() and softlight() functions respectively on the two colors formed and apply them to the HTML.
HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>GeeksforGeeks |
Color Blending Functions in Less.js</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body style="font-family: sans-serif;">
<h1 style="color: green;">GeeksforGeeks</h1>
<h3><b>Color Blending Functions in Less.js</b></h3>
<p class="hardlight">I am hardlight</p>
<p class="softlight">I am softlight</p>
</body>
</html>
styles.less: The LESS code is as follows.
CSS
// styles.less
@color1: screen(pink, brown);
@color2: exclusion(pink, brown);
.hardlight {
background-color: hardlight(@color1, @color2);
}
.softlight {
background-color: softlight(@color1, @color2);
}
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:
CSS
.hardlight {
background-color: #b4dce5;
}
.softlight {
background-color: #ffd3dc;
}
Output:
output of color blending functions in less.js example 2
Reference: https://lesscss.org/functions/#color-blending
Similar Reads
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 colo
4 min read
Less.js Color Blending overlay() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. CSS is more functional because of this dynamic style sheet language. Cross-browser interoperability is a feature of LESS. A computer language known as the CSS pre-
4 min read
Less.js Color Blending average() Function
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 i
4 min read
Less.js Color Blending multiply() Function
In this article, we will see the Color Blending multiply() Function in LESS.js. Less.js is an extension to the traditional CSS, it comes with additional features that will help us to write CSS code more conveniently. Color blending is a method that takes the intersection of two colors, or generally,
4 min read
Less.js Color Blending negation() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Because it uses a dynamic style sheet language, CSS is more useful. LESS is adaptable enough to function in a variety of browsers. In order for web browsers to use
4 min read
Less.js Color Blending softlight() Function
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 compute
4 min read
Less.js Color Blending hardlight() Function
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
4 min read
Less.js Color Blending exclusion() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Because it uses a dynamic style sheet language, CSS is more useful. LESS is adaptable enough to function in a variety of browsers. In order for web browsers to use
4 min read
Less.js Color Blending difference() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Because it uses a dynamic style sheet language, CSS is more useful. LESS is adaptable enough to function in a variety of browsers. In order for web browsers to use
4 min read
Less.js Color Channel blue() Function
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 compute
3 min read