Colourful charity websites


There’s so much choice now when it comes to colour on the web. There were days when you had just 256 to choose from, blue was blue and green was green. Now countless tints, shades and combinations can make for a more uniquely defined identity but greater choice rarely makes for easy decisions.

What part does colour have to play in a dynamic, easy to navigate, well-structured charity website? Here are a few charity websites we’ve researched with my thoughts on how they use colour.

It’s not the colour it’s what you do with it

Amnesty website homepage

Colours quite often become associated with certain industries, services, products or concepts. The very word ‘green’ conjures environmentally friendly thoughts. Amnesty International breaks the charity mould somewhat with their rather stark and edgy yellow and black palette, a style you might expect to find on a sports car or in a comic book.

Yellow is considered the most dominant of all colours. Try it out, draw some squares of equal size and various different colours. Squint and see which stands out most. Amnesty has been brave using such a bold colour but it works really well against the black background, especially in the right hand column.

Warm colours (red, orange, yellow) all work really well when combined with black and white but they do give a harsh feel. Because yellow is so dominant it must be used very sparingly.

Yellow works brilliantly here as a natural highlight colour. The rollover style for links turns the background yellow, as if you’d just gone in with a highlighter pen yourself. It is a shame however that the yellow and black theme has not been carried through the sub pages very much. Possibly suffering from the ‘all the design work goes on the home page’ syndrome.

If you’re considering using yellow think about what colour(s) you’re using it with. Black helps the yellow come alive while other colours may get lost in its presence.

Green is the new black

We’ve already mentioned green, and it has always been a popular colour on charity websites, automatically communicating a sense of peace, calm and friendliness. Green is fairly safe, it’s very hard to make a ‘fresh spring green’ look sinister and imposing. Here are two well-known sites that use almost exactly the same green but in different ways:


Barnardos website homepage

Barnardo’s use one simple, fresh green throughout the entire site. They’ve even gone to the effort of creating greyscale social media links so as not to disrupt the aesthetics. Green is used very sparingly on most pages (aside from the footer which is a bit overpowering given its secondary purpose).

Macmillan Cancer Support

Macmillan website homepage

Macmillan use almost exactly the same green as Barnardo’s as their base colour but their approach is to layer in lots of other greens in an attempt to draw distinction and pack more information onto each page. It’s not a displeasing visual experience but I do find myself drawn to trying to decipher the rules. “Is that green for headings or silhouettes? Is that a different type of heading from this one? How can I understand this sites structure based on the colours given to me?”

Macmillan have created an excellent and well-known brand through their use of colour and they have an enormous amount of information on their site. The difficulty here is conveying such a myriad of things with, essentially, just one colour.

A bit of everything

Some of the most powerful brands on the internet are multicoloured; what’s that one beginning with G again? Think also of eBay, MSN, Picassa? One of the great benefits of employing such a strategy, aside (hopefully) from looking like a children’s toy shop, is the ability to draw easy distinctions through the use of colour. Our responses to colour are often subconscious and various charity websites use a broad colour palette, colour coding certain sections to help guide the users journey. This can work well if you have various discreet sections to profile that are not connected together. Be careful though as the site can very quickly become a melting pot of colour spilling out onto every page through signposts and related links, with no real definition.

Café Sci

Cafe Sci website homepage

This is an interesting and creative charity website with a large colour palette. I love the logo, the dark theme and header and footer graphics (which do seem relevant to the nature of the charity if you have a read). It’s certainly quite unique. The colour coding is clear, it’s easy to see the sections in the top nav and the colours are consistently represented on the sub pages themselves with very little ‘cross pollination’ of colour shall we say. Purple stays in the news section and orange in the about page for example.

So the structure is great, though the purple is perhaps a bit dark to be presented on black. This shows the challenge of finding synergy within the palette, making sure they work together and with a neutral base colour.

Scottish SPCA

SPCA website homepage

Here’s another site doing the same thing with a clearly colour coded top navigation on a simple white background. This colour palette has good synergy, each has a similar tone and all are bold enough to work on white. The three persistent links on the right of the banner give clear calls to action. Their presence however, does slightly undermine the colour coding of the sections. Each section seems only to adopt the relevant colour for the heading. All links remain pink and there are different heading colours in the left hand signposts too. All in all this is not a strong, confident use of colour and the result is a multicoloured site with little distinction.

Both these sites use grey for the top navigation selected style. Of course, what colours are there left? This does however demote the item rather than promote it. A better approach might be the use of shapes, borders or background styles to lift the item. Colour never resides alone, it must be used well in conjunction with all the other graphical tools at your disposal. A common temptation is to try and do everything with colour.

British Heart Foundation

BHF website homepage

The British Heart Foundation is clearly a much larger site with a bigger budget. The site demonstrates a strong brand identity, well structured colour and good use of other graphical devices. So lets learn from them.

Their core brand colour is red and this colour dominates the site in one consistent strong shade. They have some blue buttons (which if I were to be picky don’t seem to fit very well) but other than that the section colours are not carried through to the page content at all. They have large rollover styles for the main navigation and large easy to access menu’s that appear underneath that indicate the different sections with a varied colour palette. Arguably this is all the user needs to distinguish the different sections. There’s no need to carry the styling through to the page once you’re there. The top navigation is always present and does the job of distinguishing the sections wherever you are. Good work!

Something of interest

Here’s an interesting infographic showing the spectrum of colours used by the biggest names online. Given the popularity of green in the charity sector, it takes a surprisingly small chunk of this diagram with blue dominating the corporate and social realm.

The colours of the web


25 October 2011
Owen Roseblade