Understanding LESS Color Functions

Understanding LESS Color Functions:
We have covered quite a lot about LESS, from creating a sleek navigation to tips on how to work more effectively with LESS, but we have not cover all of them just yet. In this post, we are going to look into the LESS Color Functions.

Color is one of the key to making a website look astonishing, just have a look at our showcase of beatiful three-color websites. With LESS, we are able to define and apply colors more consistently with variables, moreover, we are also able to apply Color Functions to tailor and transform the colors without having to rummage through a color picker.
Recommended Reading: LESS CSS – Beginner’s Guide

The Functions

LESS provides several functions with quite descriptive keywords that we can use to manipulate colors: lighten(), darken(), saturate(), desaturate(), fadein(), fadeout(), fade() spin() and mix().
Let’s try some of these functions to see how they work. For the purpose of this post, we are picking green (#7bab2e) as a variable for this demonstration;

@color: #7bab2e;

Darkening & Lightening

Altering colors with LESS Color Function is really strightforward. In this example below, we will darken the @color by 20% of its initial value;

.box.darken {
 background-color: @color;
 border: 3px solid darken(@color, 20%);
}

This code results in the follow output. The border, compared to the color inside the green box, is darker.

The same applies to how we lighten the @color;

.box.lighten {
 border: 3px solid lighten(@color, 20%);
}

Notice that the border is now lighter than the background.

Alternatively, we can also store these functions inside variables and then assign them through the stylesheet later on, like so;

@colorDark: darken(@color, 20%);

.box.darken {
 background-color: @color;
 border: 3px solid @colorDark;
}

Spinning Colors

Let’s try another function, and this time we will try spinning the @color. The spin() function in LESS is used to adjust the hue of the color. If you have played around with the Hue/Saturation feature from Photoshop, this function works quite similar to it.
Let’s take a look at the following code.

.box.hue {
 background-color: spin(@color, 123);
}

The maximum value for Hue spinning is 180 but negative values such as -123 is permitted.

In LESS, we are also not limited to apply only the function but we are able to define two functions at a time. Here is an example:

.box.desaturate {
 background-color: desaturate(spin(@color, 123), 50%);
}

In this code, we first spin the @color by 123 then desaturate the output by 50% . Here are the results.

Mixing Colors

Lastly, we will try mixing the colors with mix(). This function will output a color generated from the mixing of two colors. If you remember how the green comes to be (hint: it’s a combination of blue and yellow) let’s try that in LESS;

.box.mix {
 background-color: mix(@blue, @yellow, 50%);
}

This function needs three parameters actually, the first two are the color combination and the last parameter is the weight of each colors; we have defined it for 50%. This last parameter, however, is a bit strange.
For example, 0% will result in the first color we stated (which in this case @blue) while 100% will do the opposite. The final output is a bit odd as well, it is green but not the green that I’ve expected.

• View Demo
• Download Source

Final Thought

Color functions are definitely very useful. Basically we only need one color and we can alter it with one or a couple of these functions to create a fully applicable color scheme for the site. Below we have compiled some additional references as a complement to our discussion on Colors.

• An Introduction to Color Theory for Web Designers – Webdesigntuts+
• RGBa & HSLa CSS Color – Trent Walton
• HTML Colors – W3Schools

Related posts:

1. Understanding Pseudo-Element :before and :after
2. Basics Behind Color Theory for Web Designer
3. Understanding Typography: 10 Helpful Tools and Resources
4. A Look Into HTML5 Forms Input Types: Date, Color and Range