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

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

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