Less.js Color Operation Functions

Less (Leaner Style Sheets) is an extension to normal CSS which basically enhances the abilities of normal CSS and gives it superpowers.

Color operation functions are built in Less.js to perform various operations such as saturation, de-saturation, lighten, darken, etc on a color object and return the new output color as the result.

In color operation functions, percentages are handled as absolutes and not relatives. For example, if we saturate a color object with 10% saturation by 20%, the resultant saturation will be 30%. Optionally, we can set the “method” parameter of the function to “relative” and in that case, the resultant saturation will be 12% as the saturation is increased relative to the original saturation which is 10%.

There are 13 Color Operation Functions in Less.js, which are as follows:

1. saturate() Function: This function is used to increase the saturation of a color object in HSL color space by an absolute amount.

Syntax:

saturate(color, amount, method)

Parameters:

• color: A color object. For example: brown, hsl (10, 10%, 20%) etc.
• amount: A percentage value between 0-100% . 
• method: It is an optional parameter. If you want to increase in relative amount, set the method parameter equal to the relative.

2. desaturate() Function: This function is used to decrease the saturation of a color object in HSL color space by an absolute amount.

Syntax:

desaturate(color, amount, method)

Parameters:

• color: A color object. For example, brown, hsl(10, 10%, 20%) etc.
• amount: A percentage value between 0-100% . 
• method: It is an optional parameter. If you want to decrease in relative amount, set the method parameter equal to the relative.

3. lighten() Function: This function is used to increase the lightness of a color object in HSL color space by an absolute amount.

Syntax:

lighten(color, amount, method)

Parameters:

• color: A color object. For example, brown, hsl(10, 10%, 20%) etc
• amount: A percentage value between 0-100%. 
• method: It is an optional parameter. If you want to increase in relative amount, set the method parameter equal to the relative.

4. darken() Function: This function is used to decrease the lightness of a color object in HSL color space by an absolute amount.

Syntax:

darken(color, amount, method)

Parameters:

• color: A color object. For example, brown, hsl(10, 10%, 20%) etc.
• amount: A percentage value between 0-100%. 
• method: It is an optional parameter. If you want to decrease in relative amount, set the method parameter equal to the relative.

5. fadein() Function: This function is used to decrease the transparency or increase the opacity of a color object by an absolute amount. This function has no effect on opaque color objects.

Syntax:

fadein(color, amount, method)

Parameters:

• color: A color object. For example: brown, hsl(10, 10%, 20%) etc
• amount: A percentage value between 0-100% . 
• method: It is an optional parameter. If you want to change in relative amount, set the method parameter equal to the relative.

6. fadeout() Function: This function is used to increase the transparency or decrease the opacity of a color object by an absolute amount.

Syntax:

fadeout(color, amount, method)

Parameters:

• color: A color object. For example: brown, hsl(10, 10%, 20%) etc
• amount: A percentage value between 0-100% . 
• method: It is an optional parameter. If you want to change in relative amount, set the method parameter equal to the relative.

7. fade() Function: This function is used to set the absolute opacity of a color object. It can even be used if the color object is already having an opacity value set and changes the opacity to the given amount.

Syntax:

fade(color, amount)

Parameters:

• color: A color object. For example: brown, hsl(10, 10%, 20%) etc
• amount: A percentage value between 0-100%. 

8. spin() Function: This function is used to rotate the hue angle of a color object in either direction. While the angle range to rotate is between 0-360, as the function applies a mod 360 operation, so you can pass in larger and even negative values as well.

For example, the output of 360 and 720, spins will be the same.

Note: The colors are passed through an RGB conversion which does not retain the hue value of greys (as there is no meaning of hue when there is no saturation). Make sure to use the function in such a way that preserves hue. 

Syntax:

spin(color, angle)

Parameters:

• color: A color object. For example, brown, hsl (10, 10%, 20%), etc
• angle: The number of degrees to spin by. For example: 90, -30, 500 etc

9. mix() Function: This function is used to mix two colors in variable proportions (opacity of the colors is included in the solution).

Syntax:

mix(color1, color2, weight)

Parameters:

• color1: A color object. For example, brown, hsl(10, 10%, 20%) etc
• color2: A color object. For example, brown, hsl(10, 10%, 20%), etc
• weight: It is an optional parameter. A percentage value is used to specify the balance point of the two colors. By default, the value is 50%.

10. tint() Function: This function is used to mix the given color with white color in variable proportions.

Syntax:

tint(color, weight)

Parameters:

• color: A color object. For example, brown, hsl(10, 10%, 20%), etc
• weight: It is an optional parameter. A percentage value is used to specify the balance point of the two colors. By default,  the value is 50%.

11. shade() Function: This function is used to mix the given color with black color in variable proportions.

Syntax:

shade(color, weight)

Parameters:

• color: A color object. For example, brown, hsl (10, 10%, 20%), etc
• weight:  It is an optional parameter. A percentage value is used to specify the balance point of the two colors. By default, the value is 50%.

12. grayscale() Function: This function is used to remove all the saturation of the given color in the HSL color space.

Syntax:

grayscale(color)

Parameters:

• color: A color object. For example, brown, hsl(10, 10%, 20%) etc

13. contrast() Function: This function is used to choose and get the color that provides the greatest contrast with the given color. The function is provided with the main color (to contrast with) and, one light and one dark color, along with a threshold property to act as a bias between the lighter and darker color. 

Syntax:

contrast(color, dark, light, threshold)

Parameters:

• color: A color object to compare against. For example, brown, hsl(10, 10%, 20%) etc.
• dark: It is an optional parameter. A designated dark color. By default, the value is black.
• white:  It is an optional parameter. A designated light color. By default, the value is white.
• threshold: It is an optional parameter. A percentage value between 0-100% that is used to bias between the light and dark colors and provide the output. By default, the value is 43%.

Example 1: In this example, at first we have defined the @main color. We applied various color operation functions on this @main color in the HTML file.

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>
        Color Operation 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>Color Operation Functions in Less.js</h3>

    <p class="saturate">I am saturated</p>
    <p class="desaturate">I am desaturated</p>
    <p class="fade">I am faded</p>
    <p class="spin">I am spinned</p>
    <p class="mix">I am mixed</p>
    <p class="tint">I am tinted</p>
</body>

</html>

styles.less: The LESS code is as follows.

CSS

// styles.less
@main: green;

.saturate {
    color: saturate(@main, 10%);
}

.desaturate {
    color: desaturate(@main, 10%);
}

.fade {
    color: fade(@main, 40%);
}

.spin {
    color: spin(@main, 30)
}

.mix {
    color: mix(@main, yellow, 60%);
}

.tint {
    color: tint(@main);
}

Syntax: To compile the above code into normal CSS, run the following command.

lessc styles.less styles.css

styles.css: The output CSS file is as follows.

CSS

.saturate {
    color: #008000;
}

.desaturate {
    color: #067a06;
}

.fade {
    color: rgba(0, 128, 0, 0.4);
}

.spin {
    color: #008040;
}

.mix {
    color: #66b300;
}

.tint {
    color: #80c080;
}

Output:

output of color operation functions in Less.js example 1

Example 2: In this example, we have set the background color of the “main” class to @bg. We have 2 colors @light which is a lightened version of the “yellow” color and @dark which is darkened version of the yellow color. We have used the contrast() function to choose between @light and @dark colors. Choose the color which is more contrasting to the @bg background color. The example shows the @light color and @dark color by applying the colors to the elements of 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>Color Operation 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>Color Operation Functions in Less.js</h3>

    <p class="light">Lighter color</p>
    <p class="dark">Darker color</p>
    <p class="main">
        Darker background and
        contrasting text color
    </p>
</body>

</html>

styles.less: The LESS code is as follows.

CSS

// styles.less
@bg: hsl(198, 12%, 16%);

@light: lighten(yellow, 20%);
@dark: darken(yellow, 20%);

.light {
    color: @light;
}

.dark {
    color: @dark;
}

.main {
    background-color: @bg;
    color: contrast(@bg, @dark, @light);
}

Syntax: To compile the above LESS code to normal CSS, run the following command.

lessc styles.less styles.css

styles.css: The output CSS file looks like the following.

CSS

.light {
    color: #ffff66;
}

.dark {
    color: #999900;
}

.main {
    background-color: hsl(198, 12%, 16%);
    color: #ffff66;
}

Output:

Output of color operation functions in Less.js example 2

Reference: https://lesscss.org/functions/#color-operations