What Color functions do in Less?
Less provides different range of Color functions to use, these functions provide functionality to increase or decrease lightness or saturation of colors, increase or decrease fade in, fade out of colors, and to increase or decrease a color by specified number of degrees. Additionally Less provides the fancy functionality of mixing colors, which allows us to mix different colors to generate new colors as we want.

Usage of color functions in Less
Let’s move on and practically see how to use these functions in Less? Let suppose we posses a variable storing a value of color red, it’ll look like shown below:

//variable storing red color
@red: #FF0000;

And now if we want to dark this color, instead of using any further hex value for that color we can simply use darken function to dark our color, the usage is like shown below:

//variable storing red color
@red: #FF0000;
//here we use our darken function and storing that new color in our new variable as well
@darkred: darken(@red, 10%);
//the resulting color will be darker than the actual red color ... we can also use hex value of color instead of //variable if we want to, but i written variable so that you can familiar with variables as much as you can

That’s how we can dark our color just by providing information that how much darken we want. What above function does? Darken function takes color value and applies that provided value and so generates new hex value that is another color.

What’s advantage of using color functions in Less?
Good question, a simple answer is that once you are trying to use one main color as your application color, in that case it becomes really handy if you want to provide different varieties of same color, is not that true? So, understanding color functions and proper usage provides new trend and more colorful results in your development.

Lighten function:
Let suppose you want lighter color than darker, the process is same enough just the function name changes from darken to lighten and you are done. Let’s see in practical example:

//variable storing red color
@red: #FF0000;
@lighterred: lighten(@red, 10%);
//now the resulting color will be lighter one ... that's simple too

You can either make that color lighter and saturated in same time by using below given method:

//variable storing red color
@red: #FF0000;
@lighterred: lighten(desaturate(@red, 25%), 10%);
//now the resulting color will be 25% desaturated first and then 10% lighter ....

Above code snippet looks confusing but it’s not, as the method is same. We’r providing two arguments to the function, first one is color and then 2nd one is the value as 25% in desaturate and 10% in lighten function above. In same way we can provide other colors as well but point to note here is that the method stays same, two arguments for each function 1st color, 2nd points or percentage to apply on that color.

Spin function:
Spin function spins the color by specified number of degrees, that value is provided in digits like 1, 2 etc.
So if we have to produce a midblue color from a blue color it will work like shown below:

//variable storing red color
@blue: #195f88;
@midblue: spin(lighten(desaturate(@blue, 25%), 17%), 1);
//now the resulting color will be midblue color ...

How we got midblue color?
The function is simple enough to understand, fist of all spin function starts and take two arguments as usual, but as this function is taking another function so first argument will become that function name instead of color name, other process is absolutely same. We start from middle as it makes better understanding, blue color is desaturated by 25%, then that new value is lighten by 17% and finally that value spins by degree 1 to produce midblue color.

These are some of the examples to make you familiar with color functions, but once you start using these functions the value adds more and more.

Mix function:
Mix function works in same way to produce new colors by mixing different colors, but it take three arguments. First two arguments are those colors which we are mixing to produce third new color and the third argument is the value which tells that how much of the first color should be there in the new generated color. For example if we use like @thirdcolor: mix(@red, @blue, 20%); it means it takes 20% color from red and 80% from blue and then mix these values to produce new color.

Let’s produce an color by mixing two colors:

//variable storing red color
@red: #FF0000;
@blue: #195f88;
@newcolor: mix(@red, @blue, 50%);
//now the resulting color will be third color which is produced by taking 50% colors from both red and blue

This concludes color functions, Try to grasp the idea in depth. It’s impossible to grasp idea without practice so just do your practice more and more.