Less.js Color Blending multiply() Function

Last Updated : 27 Sep, 2022

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, we can say that when we mix two colors to obtain a different color value it is referred to as color blending. In Less, we use different methods to blend the color, one of them we are covering in this article is the multiply() Function. When we use this method, as a result, we get a slightly darker range of colors, this function is explained below.

The multiply() function work as a simple mathematics multiply operation. This function is used to multiply the 2 colors & then corresponding RGB channels for both the colors will be multiplied & will be divided by 255. The resultant color will be a darker color.

The black color works as 0 and the white color work as 1. So any color multiplied by black or 0, it will be black, for example, multiply(red, black) the result will be black, on the other hand when any color or its value is multiplied by white or 1 it will be the same color, so any color multiplies with white it will the same color, and if any color between white and black is multiplied with some color then we will get a different shade of color.

Syntax:

multiply(<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.

Example 1: In this example, we will see the working of the multiply function, we will use completely black to multiply with green color, and we can see that the output is also black color.

Style.less:

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

To compile the Style.less code into style.css, use the following command:

lessc stye.less style.css

Style.css:

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

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>Multiply</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 the 2nd color as white in the multiply function and we can see there is no change in the output color.

Style.less:

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

To compile the Style.less code into style.css, use the following command:

lessc stye.less style.css

Style.css:

.container1 {
  height: 200px;
  width: 600px;
  border: 1px solid black;
  border-radius: 10px;
  background-color: #313131;
  color: white;
}
.function {
  text-align: center;
}
.firstColor,
.secondColor,
.thirdColor {
  height: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: 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: #ffffff;
  color: black;
}
.thirdColor {
  background-color: #008000;
  color: white;
}

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>Multiply</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>