Matt Lambert

Check out my blog, or sign up to receive articles by email.

Creating a Colour Palette with LESS

By admin on September 12th, 2014 in LESS

One of the most useful ways you can use LESS is to create a reusable colour palette for your website. Using variables, we can avoid the use of hex values and rely on colour names which are much easier to keep track of when coding up your stylesheets. In this post I’ll show you how to setup a LESS library of colours, how to use the colour variables in your stylesheet, and how to create colour CSS classes you can use in your HTML templates.

Setting up the LESS file

First things first, let’s choose a range of colours we want to use for our palette. If you’re looking for some inspiration, check out flatuicolorpicker.com or flatuicolors.com. For this post, I’ll use the second option to define my palette. Let’s create a less file called colours.less and setup the variables we’re going to use in our base stylesheet.

@blue1: #3498db; /* peter river */
@blue2: #2980b9; /* belize hole */
@red1: #e74c3c; /* alizarin */
@red2: #c0392b; /* pomegranate */
@light-grey: #bdc3c7; /* silver */
@medium-grey: #95a5a6; /* concrete */
@white: #ffffff;
@black: #000000;

I’ve decided to include 8 colours but feel free to add more. It’s a good idea to create a large colour palette, especially if you’re working on a premium theme. It’s nice to have this setup for your customer when they purchase your template. Remember, just because you setup a bunch of colours, doesn’t mean you have to use them all. By creating a large palette, you can reuse it in different templates which will speed up your theming process.

Using variables in your stylesheet

Using the variables in your CSS is really easy. Simply insert the variable keyword in place of where you would normally place the hex value. Create a new file called theme.css and first import your LESS colour file in. Following that, start using the variables in theme.css where you are going to write the majority of your CSS.

@import "colours.less";

body {
  background-color: @white;
  color: @black;
}

a, a:link, a:visited {
  color: @blue;
}

a:hover {
  color: @blue2;
}

h1 {
  color: @red1;
}

h2 {
  color: @medium-grey;
}

That should be a good enough example for how you can apply your variables. Are you starting to see how this is a better practice? For one, what if you want to change the value of @red1? With LESS you just need to change the variable value and it will inherit to everywhere there is an instance. In the past, you would’ve had to update ever property to the new hex number. In a really long stylesheet this can be a major pain in the butt. It’s also much easier to consistently apply colour throughout your stylesheet using real world words compared to hex values.

Creating colour classes

Let’s take this one step further and make it more modular. In some instances you may want to control the colour of an element on the HTML level. For example, you may want to highlight some text in red. Yes, you could create a custom class to do this but a better way would be to use a class colour name. The class colour name is more reusable and it’s also easier to see how colour is applied if someone else is reviewing your code. In many cases, it’s not up to one person to maintain a larger website so you need a solid system that is easy to understand. Next create a new section in theme.css and insert the following code. You could also a create a new LESS file for this code and then import it into theme.css if you want to keep that file lighter.

.blue1 {
  color: @blue1;
}

.blue1-bg {
  background: @blue1;
}

.blue2 {
  color: @blue2;
}

.blue2-bg {
  background: @blue2;
}

.red1 {
  color: @red1;
}

.red1-bg {
  background: @red1;
}

.red2 {
  color: @red2;
}

.red2-bg {
  background: @red2;
}

.light-grey {
  color: @light-grey;
}

.light-grey-bg {
  background: @light-grey;
}

.medium-grey {
  color: @medium-grey;
}

.medium-grey-bg {
  background: @medium-grey;
}

.white {
  color: @white;
}

.white-bg {
  background: @white;
}

.black {
  color: @black;
}

.black-bg {
  background: @black;
}

Now that our colours are all setup, let’s show a couple examples of how you could apply these classes.

<p>What you're saying there is really a large <span class="red1">error</span></p>

<div class="blue1-bg">
  <p>this box would look much better with a blue background</p>
</div>

<p class="light-grey">I want this text to be lighter than my regular copy.</p>

That’s all I have for colours and LESS. I hope you can see how these techniques are reusable and should be considered a best practice for making your code modular. If you’re interested in learning more about LESS, you should check out my eBook Mastering Bootstrap. In the book, I dedicate a whole chapter that explains the best ways to use LESS in a Bootstrap theme.

Like what you read? Check out my store over at Creative Market to support the blog and help keep the lights on. Files starting from only $2.