Less color funtions

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;

1	@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;

1 2 3 4

.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;

1 2 3

.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;

1 2 3 4 5 6

@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. Thespin() 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.

1 2 3

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

The maximum value for Hue spinning is 180 but negative values such as -123is 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:

1 2 3

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

In this code, we first spin the @color by 123 then desaturate the output by50% . 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;

1 2 3

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

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.

Share on Google Plus

About Amit

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.