Web designTutorial

Colour theory for the web

Colour theory for the web

Scott Kellum introduces some basic colour theory and practice to help make use of relative colour and make web designs much more flexible.

There are lots of colours available to us, and for the most part, we describe colour in a way that makes it difficult to see the relationships between different colours. Names like red, green, blue, yellow, purple and maroon are great for conversations about colour but provide little insight into the structure of that colour. From the moment we can talk, colour is processed by the language part of our brains and its meaning is tied to the names we give colours.

Dimension, on the other hand, is processed differently by our brains. One foot and three feet aren't called different names. Instead, we measure dimension in a way that's proportional to a constant and well-known increment like inches or centimetres. These ideas of measurement come naturally to us and, while colour can be measured and described in a similar way, it's often very difficult for us to understand and manipulate colour as a measurement of its parts.

It wasn't until Sir Isaac Newton did a series of experiments with prisms in the 1600s before we really started to understand that light was made up of different colours that could be measured independently of one another. Colour wheels were soon adopted by artists so they could better understand and mix colours.

See Scott's demo of everything he discusses in this tutorial here

While most artists use red, yellow and blue as primary colours, and most colour theory classes refer to these as the primary colours, science has evolved since the days of Isaac Newton and so has our understanding of how we see colour. Just about everyone's eyes contain various light receptors. Receptors called rods detect darks and lights, and cones detect three primary colours: red, green and blue.

These three primary colours probably sound familiar to those of us who work on the web because this is how we write colour. Monitors have red, green and blue parts to every pixel. Each colour has 256 variations in brightness resulting in a total of 16,777,216 different colour possibilities. We can describe colour with the RGB colour function rgb(255,115,0) or hex values #FF7300, both of which describe the same colour in a slightly different way.

Thinking about relative colour

To start thinking about colour and its relationships we can start with the CSS colour function hsl(). This function breaks colour down into hue, saturation and lightness. Hue is expressed in a unit-less degree (out of 360) while saturation and lightness are expressed as unit-less percentages (out of 100).

So hue is expressed as a value out of 360. This value is mapped to a colour wheel. As you are spinning through hue values, imagine spinning around a colour wheel. If you have red (0) and you want to make yellow, you would just move hue to 60 . In colour theory there's the concept of complementary colours, which are two colours on opposite sides of the colour wheel. To find a complement of red you would just need to find the value that is 180° around the wheel from red. In this case 0 for red plus 180 and the resulting colour is cyan.

Saturation and lightness is a bit more straightforward. Fully-saturated colour (100) has no grey in it while a saturation of 0 is greyscale. With lightness, 0 is black and 100 is white. Adjusting these values up and down will make your colour lighter or darker. Because our conception of colour is usually tied to the hue of a colour, it's much easier to think about saturation and lightness in terms of scale.

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.

Sass is perfect for colour manipulation techniques that CSS lacks

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:

  1. sass
  2. $primary: #437825;

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

  1. sass
  2. $primary: #437825;
  3. $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.

  1. sass
  2. $primary: #437825;
  3. $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:

  1. sass
  2. @if lightness($color) > 50 {
  3.   color: black; }
  4. @else {
  5.   color: white;
  6. }

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.

Event promotion

site stat collection