Colour theory for the web

Manipulating colour with Sass

By now you should have a solid understanding of how colour manipulation works. However, with pure CSS there's no way to adjust one colour relative to another without doing it by hand. Sass includes a huge range of colour functions that enable you to manipulate various aspects of a colour.

For the most part, the most valuable functions are the HSL functions for darken, lighten, saturate, desaturate, and adjust-hue. Each one of these functions does simple mathematics on the original HSL values of the colour. For example, let's define a primary colour in a blank file:

sass
$primary: #437825;

Let's find another value for $secondary that's lighter and complementary to our primary colour.

sass
$primary: #437825;
$secondary: adjust-hue( lighten( $primary, 10% ), 180);

We could also have used the function complement($colour) as a shorthand for adjust-hue($colour, 180) as the complement of a colour is the same as 180° opposite the reference colour. These basic functions will handle just about every colour adjustment you may need, but there are some things that may be confusing if this is your first time using them. For example, 50% darken or lighten don't take you half way to black or white. Instead, they add to the existing lightness value. So, if you darken a colour with a L value of 52 by 50 , the resulting colour will be black. To get around this you can use the mix function that simply mixes two colours together. If you mix you base colour with either black or white you may achieve a result much closer to what you expect.

sass
$primary: #437825;
$primary-dark: mix(black, $primary, 20%);

Now that we have all the tools to manipulate colours in our colour palette, we can use logic to make decisions as to how those colours are applied. Let's say we have buttons on our sites and, if the colour is dark, the text should be white but sometimes the colour is light so the text colour should be black. You can query each value of a colour with the hue, saturation and lightness functions. To figure out how light our button is going to be, use the lightness function:

sass
@if lightness($color) > 50 {
  color: black; }
@else {
  color: white;
}

Putting relative colour to practical use

So far this has all been fairly abstract, but these techniques can be put to practical use. Themes can change colour with ease. When a client complains about the colour, it can be adjusted in one place, or you can create a single design for multiple sites that looks different by changing up the colour scheme. Simply adding some of this colour logic into mixins can help make them a bit more flexible.

At VOX Media we worked on the SB Nation redesign of over 300 websites. These are sports sites so team colours are incredibly important. We worked it so every colour was relative to a distinctive team colour. There are still lots of different colour values on the sites, some darker and some lighter, but simply changing one colour can transform the site from looking like The Phin Sider to looking like The Nunes Magician. Hopefully the use of relative colour will be useful in your next project as well as helping to make designing much more flexible.

Words: Scott Kellum

This article originally appeared in net magazine issue 252.

Like this? Read these!

• A fantastic free ebook about adaptive web design
• Brilliant Wordpress tutorial selection
• Our favourite web fonts – and they don't cost a penny