Colour theory with LESS

Unless you’ve been living under a rock for the past few months, you will be aware of CSS pre-processors such as SASS and LESS. LESS is of course, my preference here and I would like to share how you can use it to create colour palettes for your design work.

I’m not going to go too deep into colour theory here, however knowing a little about the colour wheel and how it works will hold you in good stead here. Basically, I am going to show you how to find complementary and triad colours using LESS, and then make colour palettes from the results.

If you need a primer on how LESS works, I recommend you take a look at the documentation on the site.

Complementary colours

Right, let’s get down to business. First up, we need a base colour. This could be anything from the colour of the clients logo, background colour or link colour etc. So we define a variable for this in our .less file.

1
@base-colour: #0066cc;

Now, anytime we reference this variable in our stylesheet, we will get the colour specified in this variable. But that’s the easy bit. Now we want to find the complementary colour, but first it might help to know what a complementary colour is.

Put simply, a complementary colour is the value that sits opposite your base colour on the colour wheel, so all we need to do to find this is spin the wheel, like so:

1
@complementary-colour: spin(@base-colour, 180);

So now, whenever we reference the above variable, we will be using the complementary colour, and what’s more, you can change the entire palette by altering nothing more than the base colour. So the finished code will look like this:

1
2
@base-colour: #0066cc;
@complementary-colour: spin(@base-colour, 180);

Triads

Next up, triads. A colour triad is basically three colour values equally spaced on the colour wheel. Again, we need to define a base colour, but this time we shall call it something different:

1
@triad_1: #0066cc;

There’s no need to explain this as we’ve already established what this essentially does. Next up, we need to spin the wheel twice, a third of the way round, to find the other two colour values:

1
2
@triad_2: spin(@triad_1, 120);
@triad_3: spin(@triad_1, 240);

And there we have it. Three colour values that should play together nicely. Here’s the finished code:

1
2
3
@triad_1: #0066cc;
@triad_2: spin(@triad_1, 120);
@triad_3: spin(@triad_1, 240);

Extending the palettes

So now we have a set of colours that work well together but that still might not be enough. The chances are you are going to want to extend these palettes a little. The way I’ve been doing this over the past couple of years is documented in an article by Andy Clarke</a>.

I’m now going to show you how to do this with LESS so don’t go firing up Photoshop or Fireworks just yet.

Again, start with your base colour. This will be no different to the code we used in the first example:

1
@base-colour: #0066cc;

Next up, we want to create four lighter shades and four darker shades of this base colour. First we’re going to create our lighter colours:

1
2
3
4
@colour_1: lighten(@base-colour, 10%);
@colour_2: lighten(@base-colour, 25%);
@colour_3: lighten(@base-colour, 50%);
@colour_4: lighten(@base-colour, 75%);

Now, including the base colour, we have five shades we can use in our design. So now we want to darken the colour:

1
2
3
4
@colour_dark1: darken(@base-colour, 10%);
@colour_dark2: darken(@base-colour, 25%);
@colour_dark3: darken(@base-colour, 50%);
@colour_dark4: darken(@base-colour, 75%);

So, the complete code:

1
2
3
4
5
6
7
8
9
10
11
@base-colour: #0066cc;

@colour_1: lighten(@base-colour, 10%);
@colour_2: lighten(@base-colour, 25%);
@colour_3: lighten(@base-colour, 50%);
@colour_4: lighten(@base-colour, 75%);

@colour_dark1: darken(@base-colour, 10%);
@colour_dark2: darken(@base-colour, 25%);
@colour_dark3: darken(@base-colour, 50%);
@colour_dark4: darken(@base-colour, 75%);

Again, to change the entire palette, all we have to do is alter the value of the base colour. How easy was that?

To do the same with your other colour values (complementary, triad etc.), all you have to do is substitute the @base-colour variable for one of the others, such as @complementary-colour.

So now you know how to use LESS to create a flexible colour palette that works and is easy to maintain. There is still more you can do but for now I will leave that for you to find out.