6 October 2015

Website Colour Schemes

With the number of eye-catching websites out there forever on the increase, there's more pressure than ever for small businesses to stand out online. One of the most obvious areas involved when designing an online presence for a brand, but also perhaps one of the most misunderstood, is colour schemes.

The Colour Wheel

It's fairly clear that just picking a few colours at random probably won't result in a very appealing colour scheme for a website. So it follows that there must be something more to it - but what exactly is it that makes certain colours look good together?

There are various methods you can use to artificially arrive at a set of colours that you might want to use as a colour scheme. What all of these hinge on is being able to identify one colour in relation to another, or several other colours. For this reason a colour wheel is often used as a starting point.

Colour Wheel

The colour wheel shows the continuity of colour (or hue) around the spectrum. The three primary colours, Red, Blue and Yellow stand out and you can see that these three colours form an equilateral triangle, meaning they are all 'equally different' from one another. All other colours can be derived from combinations of the primary colours, such the secondary colours Green, Purple, and Orange.

So we now have all the most vibrant colours in our palette at our disposal, but where are the other, more subtle colours, such as beige, cream or rust? These are still simply combinations of colours from the wheel but which have been modified in other ways also. This modification is done by either lightening, darkening or adding grey to the colour, which in all cases reduces base colour's vibrance and makes it more subtle. Darkening a colour (or adding shade) gives the effect you see around the outside of the wheel, and lightening (or adding tint) gives the effect you see in the middle, a kind of pastel. Adding both light and dark (grey) creates what are known as 'tones' - these are neither lighter nor darker but are less saturated and more subtle than the original colour.

Pick and Mix

So now with the beginnings of an understanding of colour-wheel theory we can go about trying to pick some colours from the wheel. There are a few tried and tested techniques to choose from depending on the type of colour scheme you're after, which are listed below.

Naturally you'll want your choice of colours to be in-keeping with what type of company it is and it's values and so on. Culturally, some colours tend to feel more appropriate than others in certain cases (think blues for Health Service organisations for example).


ANALOGOUS COLOUR SCHEMES

For this type of scheme simply pick a set of colours - try three to start with - from nearby each other on the twelve-spoke colour wheel. Then adjust some of the colours' vibrances using tints, shades or tones to add interest. This can give quite pleasing results as the base colours originate fairly close to each other on the wheel and are less likely to clash.

Analogous Colour Scheme

This Analogous Colour Scheme takes all it's base colours from the green-yellow part of the colour wheel.

COMPLEMENTARY COLOUR SCHEMES

Complementary colours on a colour wheel are those which are opposite each other. For example, Red and Green, or Blue and Orange. This does not mean that any two such colours will automatically look good together in any colour scheme however! In fact, care must be taken when using pure complimentary colours as they can sometimes produce quite a jarring effect when used side-by-side in a design.

However, with some careful adjustment of tints and shades it's possibly to produce some striking colour schemes with this technique. The trick is to start off with two shades and build out from there.

Complementary Colour Scheme

This scheme takes it's base colours from complementary blue and orange parts of the colour wheel.

Complementary Colour Scheme

This scheme uses shades of red and green as it's complimentary colours.

Laptop with Orange and White Colour Scheme

SPLIT COMPLEMENTARY COLOUR SCHEMES

Very similar to standard complementary schemes. Pick a base colour but then instead of taking its direct opposite on the wheel, take the two hues slightly either side of the opposite. Then adjust tints and shades again to taste.

Split Complementary Colour Scheme

This Split Complementary scheme uses a tint of yellow as its base with a few variations on magenta and blue-purple.

TRIADIC COLOUR SCHEMES

The Triadic colour scheme method takes the Split Complementary pattern one step further - now all three points on the colour wheel are an equal distance apart (so they could be red, yellow and blue). Again, add tint and shade varations of the base colours to the scheme, and experiment to see what works well. A good tip is to use close-to-pure versions of two of your base colours and then adjust the third to make it very pale or dark for balance.

Triadic Colour Scheme

An example Triadic colour scheme centred around green, orange and purple.

MONOCHROMATIC COLOUR SCHEMES

One last very simple way to create a great looking scheme is to use the "less is more" approach. Monochromatic colour schemes are similar to Analogous but rather than taking their base hues from near each other on the colour wheel, they use one single base hue from which all the scheme's colours are derived.

This approach will generally result in a slightly more one-dimension feeling colour scheme but sometimes this might be just what you're looking for, and it's harder to create a scheme with jarring colours using this method.

Monochromatic Colour Scheme

This Monochromatic Colour Scheme derives all it's colours from magenta.

Tips for Designing Colour Schemes

  • You don't need to use the twelve exact hues on the colour wheel as your starting points - colour is continuous so why not choose points in between?
  • Try and try again! As much as you can apply theory to the colour schemes design process the acid test is whether it actually looks good in practice. Experiment and try things that might seem to be unlikely combinations - you might just surprise yourself!
  • There are a multitude of tools available on the web to help you, and while it always pays to have a true understanding when working with colour, some of these clever gadgets can certainly make your life much easier. Check out paletton.com for one example.

Want to see more stuff like this? Enter your email address below to sign-up to our mailing list. We promise we won't spam you!