Learning Less.js

Color blending

So far, we've seen how we can define a color space, extract one of its constituent elements out of it (such as hue or level of green) and that we can transform the color through fading or spinning the original. There's one more way we can change a color using Less—blending.

The principle works in the same way, in that we require two colors, but the effects are quite different. Let's have a quick look at the three functions you will likely use the most:

Function	Purpose of function	Example value
multiply	This function multiplies two colors.	multiply(#9ec1ef, #091d37);
screen	This does the opposite of multiply. The result is a brighter color.	screen (#9ec1ef, #091d37);
overlay	Conditionally make light channels lighter ...