7 tips to manage colour better on the web

We help you to control your colours if you're using Sass (or even if you're not).

Amongst the multitude of problems front end developers encounter during site creation, managing colours is definitely on the very low end of the list, possibly not even on the list. Nevertheless, for those not using website templates, I believe having good colour management during development of your website layout will help stick to a theme and will not only prevent your site looking like a rainbow, but also prevents different shades of the same colour being used (which has happened to me quite a few times).

This article will go through seven things I regularly do to manage colours on my web based projects.

01. Putting all your colours on a style guide

Manage colour better on the web

Create a colour palette to keep you right

First thing's first, before you crate a site you should have a basic style guide or colour palette with all the colours you plan to use. This doesn't mean you can't add colours to the site as you develop it but it will help you keep track of colours you already have so they are not repeated with slightly different shades. Excluding black, grey and white it's best to have no more than five different colours, of course this is a general rule and there can be some exceptions.

02. Use one file just for colours

One of the benefits of using CSS preprocessors is the ability to separate styles into many different files and combine them to output CSS to one file. With that in mind I believe it's best to have one file just for the main colours of your site as well as any variations of them. This not only helps with locating colour variables but can also be a regular reminder of what and how many colours are being used.

03. Colour variables

Manage colour better on the web

Giving your colours variable names is a good tip

It's best to give the main colours of your site variable names that correspond to the colours they actually are or what they look like, (also with custom namespacing if you're that way inclined). So the yellow for a McDonald's site will have the variable name $mc-yellow. For HTML colour names like AliceBlue, DeepPink and the other 140 colours, these don't require custom variable names as they are already easy to remember. If you are using a library for colours that already contain variable name like Colour me Sass, you could make your custom variable equal the library variable, so $mc-yellow = $yellowGold.

04. Using Sass maps for colours

Out of all the tips mentioned in this article, I will consider this one optional as it is dependant on the way you write CSS. Sass maps make it easier to assign different class names to different colours and their relevant CSS property, very similar to looping in most programming languages. For example, if you would like a background colour class for all of the colours that are used on your site, this is the best and most clean way to do it.

$theme-colors: (
  coral: $color-coral,
  orange: $color-orange,
  yellow: $color-yellow,
  green: $color-green,
  teal: $color-teal,
  blue: $color-blue,
  purple: $color-purple,
  gray: $color-gray,
  black: $color-black

@each $theme-color, $color in $theme-colors {
  .bg-#{$theme-color} {
    background-color: $color;
  .#{$theme-color} {
    color: $color;

This method is especially helpful for those who write Atomic CSS.

05. Use Sass for opacity, lightness and darkness

Manage colour better on the web

Utilise the functions that come built-in to Sass

For slight variations to your main website colours like lightness; darkness, and opacity instead of specifying another string if HEX values, it's best to use the functions that come built into Sass along with your custom colour variable. For opacity use rgba, for lightness and darkness use their respective functions.

I am fully aware that Sass also contains functions to mix colours as well as adjust hue and saturation, you are more than welcome to use these but I am yet to find a reason for them on my projects. Of course I recommend you give your colour variations custom variables to make it easy to remember them.

$cool_purple:  mix($red, $blue, 50%);

  background-color: $cool_purple;

  background-color: desaturate($amberDull, 14%);

  background-color: saturate($greenSea, 39%);

06. Using the custom pallets in developer tools

Manage colour better on the web

Custom colour palettes come in very handy

The developer tools in Chrome come with a great eyedropper tool for picking colours. However, for experimenting with colours on background, borders, text and so on, I've found it incredibly useful to place the main site colours from my theme into a dev tools custom colour pallet which allows colours to be updated at the click of a button.

07. Pigments for Atom

Last but not least this fantastic package for Atom (I am unaware if this is available for Sublime Text). Pigments simply highlights a colour string, hex or otherwise, with the actual colour it's representing. This sounds very basic but pigments becomes really useful when it's used with Sass. The plugin also highlights Sass colour variables with it's respective colour wherever it is placed in the code, even in different files. It also changes colours instantly based on the opacity, or whatever sass function that is applied to it.

Manage colour better on the web

Pigments for Atom is a more useful tool than you might think

I can't begin to describe how helpful it is to have instant visual feedback of colour changes being made in the code. If you ignore all my other colour tips and just do this one I will consider this article a success.

Thank you for taking the time to read this and I hope it has helped you're web development and colour management in some way. Don't feel the need to apply every single tip to your workflow, these are just guidelines. I would personally love to know if you have tricks you believe are superior to any of the ones mentioned above.


Richard Bray is a 20-something designer of web products, event organiser, speaker, open source contributor. Currently making private aviation more accessible @Stratajet. Contact him with CSS related questions, to speak at your event, or just to say 'hi'.