CSS Color Management with LESS

Before pre-processors like LESS, managing colors on the web required knowing all the hexadecimal values and jumping between photoshop and your development environment. That is no longer the case, using LESS color functions we can manage color themes based on one value instead of multiples.

In this example i’m going to show you how to use the LESS darken function to drive colors dynamically for theme based designs. Normally the process of setting colors as a designer is to, set a base color and then using that color either lighten or darken the value for the right amount of contrast. Doing this gives you a value that blends gradually and is easy on the eyes.

With LESS we can mimic the same technique, to start lets set up our color variables. We will use these variables throughout our code to make sure the color can be easily updated.

@blue: #2ce3e5;
@yellow: #e5af2c;
@meg: #e52c9d;

Now that we have our color variables, we can now go into our darken function. The darken function accepts two arguments, the first a color and second percent amount to darken. In the example below, we set the background of our element to one of our variables. Then for the text color, we use are darken function and we pass it the same @yellow color and 30%. Which will give us a color 30% darker than our current value.

&.bucket-1 {
    background: @yellow;
    color: darken(@yellow, 30%)
}