Free eBook: Increase traffic to your website
Sign up to the free NETT Weekly Newsletter and receive a free eBook detailing how to get more traffic to your website. The newsletter contains all the latest news, feature articles, and how-to guides for growing your business.
.

Choosing colour in web design

Colour is an important tool for any online business. Your core ‘offline’ brand may centre around an impulsive red or reassuring blue, but it is a slightly different story online. It’s not enough to simply daub your existing brand and its palette around a webpage; you need to find secondary colours that will strengthen and complement your business’s identity.

Choosing colours

If a brand presents well online, it’s usually because it’s based on a simple combination of basic colours.

“The most common colours are your primary colours: reds, oranges, yellows, greens and blues,” says Simon Rowell, founder of Brand Intellect. “They’re the most popular because those colours tend not to really go completely out of fashion.”

The first step in taking a brand online is to look at the colours it uses as a basis. The colours used on your website should work to support these without diluting their impact.

“There should be some sort of clear story told through the website that actually links what they’re saying online to their offline brand,” says Rowell. “It’s really about having one colour, having a consistent story, and not having any confusion. The colours used in the website really should back up the positioning that the organisation is trying to take.”

The key is to not get too carried away with supporting colours, as the focus should be kept squarely on the brand itself.

“With too many colours, you end up creating a bit of a circus effect, which ends up being no good for anybody,” says Rowell. “You just end up looking a bit like you’ve created the website at home.”

He uses the Australian website for financial services company Goldman Sachs as an example of secondary web colours trying to do too much.

“To differentiate the various sections, they’ve used alternate colours. That in itself isn’t a bad idea, but when you look at the site, it becomes a bit of a mess because they’re using primary colours against one another,” Rowell explains. “Even if they were using those colours and they were muted right down, it would look like quite a different experience; but this website looks reasonably dated, even though it’s probably not.”

Rowell singles Westpac out as a sound example of a business that has managed to strengthen its existing brand through careful selection and use of sympathetic colours online.

“Westpac uses a great deal of red through their site, but they also use a grey or platinum colour– which tends to give it a little bit more of a premium edge – as well as a light purple,” he explains. “It’s a very diluted purple that’s designed to give it a little bit more life, because the grey brings it down a bit. They’re using colours that are slightly muted, but are still getting across a mood without really competing too much with the primary brand.”

Michelle Allen, director of Webstuff.biz, encourages businesses to be highly critical when choosing online colours, and to not simply settle for a colour because they might be fond of it.

“The colour you choose will have to go with your logo. It will have to match straight away,” she says. “If you’ve got a really outdated logo, I’d look at changing that straight away.”

To give her clients a better idea of what might work to complement their logo online, Allen directs them to do some of their own colour research using an online colour wheel, such as the one found at ColorSchemeDesigner.com.

Find your brand’s core colour on the wheel to the left of the page, and you’ll be presented with an array of complementary and sympathetic colours, along with their hex codes (a unique code used by designers to identify colours).

The best way to understand how to use a colour wheel is to take use it to look at how existing brands might have used such a tool to arrive at their online colour palettes. The following is a concise look at some of the more common colours used in branding, and what secondary colours might support them best in an online context.

Blue

Blue is very commonly used online, as it’s associated with trust and credibility, especially in western cultures.

“There’s a natural inclination to look at the colour blue and feel a bit safe,” says Brand Intellect’s Rowell. “This is why you quite often find banks, legal companies, or insurance companies tending towards blue if they can.”

Applied colour psychology specialist Karen Haller also points out that blue is common among social network brands.

“The social media giants – Facebook, Twitter and LinkedIn – have all chosen blue to represent their brand, all using different tones that in themselves have their own subtle meanings,” she says. “Blue is the colour of the intellect, the mind, making it the colour of communication, and when you think about social media, it’s all about communicating.”

According to Anthony Bologna, design director at Trout Creative Thinking, blue is particularly useful for companies that need to elicit the customer’s trust.

“It’s really about decisions which are fairly high involvement – where there’s a high penalty to pay through making the wrong decision – as opposed to low involvement like buying toothpaste,” he says. “Choosing a lawyer or choosing a bank or an insurance company is pretty important, so those sort of companies tend towards the blues.”

Entering the ‘Facebook blue’ hex code (3B5998) into the ‘triad’ setting of the colour wheel, and adjusting the white colour points will show you how the social media service arrived at the subtle shade of green currently used in the Facebook Mobile illustration and ‘sign up’ button on its landing page.

Red

Red is a colour most commonly used to drive customer impulses.

“Red is very much a retail colour,” says Brand Intellect’s Rowell. “It’s about passion and excitement, and impulse and now.”

He singles out fast food companies like McDonalds and Red Rooster, as well as phone companies like Vodafone, as good examples of brands that use the colour to stand out and encourage impulse buying.

It’s interesting to note that Westpac, a company in an industry that traditionally aligns itself with the trusted overtones of blue, has built its entire brand around the colour red.

“The red colour is generally associated with excitement, desire and passion in a western context,” says Rowell. “Really, what Westpac is trying to do is add a little bit of professionalism and trust by using the light purple and the grey/platinum, to give themselves a sense of stability, and make them look quite a serious company, as they are.”

Entering the approximate hex code of FF0000 into the ‘triad’ setting of the colour wheel shows how Westpac came to find its muted purple. Repeating the process with that colour’s hex code (420042) will reveal the dark grey used by in the bank’s header and text.

For businesses planning on targeting international markets, it’s wise to note that some colours have different cultural connotations in other countries.

“In China, it means good luck. In Russia, it’s a bit old fashioned, because it’s associated with communism,” says Rowell.

Orange/Yellow

Given that a white background is the best drawing board for any business creating an online presence, the use of highlight colours like orange and yellow on a new website is a bit risky. Trout Creative’s Bologna still insists that it has merit as a highlight colour, noting that it’s particularly effective when used on a black background.

“It creates a little bit of excitement and an air of innovation. It’s bold,” he says. “It’s probably the strongest highlight colour that’s used all around the world. In Europe, for example, basically every street sign is yellow.”

One of the most famous examples of a consumer-facing yellow brand is that of the Yellow Pages. Note that the directory’s eye-catching brand is heavily anchored by its use of black. Similar to this is the Australian no frills label Black and Gold.

Placing the hex code of the yellow used on the Yellow Pages Australian homepage (FFDD22) into the color wheel gives a clear indication of what led the company’s designer to settle on the green and light blue of its online palette.

As with red, both yellow and orange have pointed cultural connotations in other parts of the world.

“In Ireland, orange is a religiously-charged colour, because it’s aligned with Protestantism. Being a predominantly catholic country, there’s issues there,” says Rowell.

“Yellow in the old fashioned sense in western culture, is associated with cowardice in some respects, but in Japan it’s associated with courage,” he continues. “In Egypt, it’s associated with mourning.”

Green

The colour green is most commonly used in western branding among ecologically-inclined companies. Whether or not a business is ‘green friendly’ the use of green as a basic brand colour will summon that type of connotation for most people that encounter it.

It’s no surprise that oil company BP should have built its brand around green. A quick look at the colour wheel spectrum for its basic colour (009900) demonstrates the rationale behind the varying shades of green and dusty yellow used to underline headings and copy at BP.com

“Green’s a colour that’s become much more popular in recent years, because of the growth of environmentalism in Australia,” says Rowell. “It’s very much associated with Islam, in predominantly Hindu countries. In China green is associated with infidelity. Those sort of things need to be thought about from the point of view of a website.”

Image credit: Thinkstock

Have Your Say

Your email address will not be published. All fields are mandatory

To leave your comment, please click the submit button below. By doing so you acknowledge that you have read and accept the privacy policy and terms and conditions for use of this site.


  1. Graham Austin says:

    I was intrigued by your article on web colour choices, realising you could only touch the surface. I was indeed surprised black as a background ‘colour’ didn’t get a mention. I use black on my own website and believe the effect to be quite dramatic without negative results. My web address is http://www.grahamaustin.com.au

    • Simon Rowell says:

      Hi Graham

      Although I agree that a black background does look dramatic, in my opinion there are significant issues with people easily digesting/comprehending large sections of reverse type (ie white text against a dark background).

      The brain does not ‘compute’ the information as easily when reversed, therefore negating what you are trying to achieve (communicating information).

      So although it may look great, it may not be as effective in getting your message across.

      Best Regards
      Simon Rowell
      Founder
      Brand Intellect

  2. Graham Austin says:

    Hi Simon and Thank you.
    You are quite right, however, the main purpose of my website is to promote my paintings. The body copy is a support for those who really are into it and interested enough to read it. Most ads etc are lucky to achieve 5% readership of the body copy anyway, unless the product has sufficient benefits/interest to capture the reader. With paintings one may love or hate them whether they read the words or not. Most people who visit my website are usually other artists and ‘tyre kickers’. I have noticed many websites use very small type in pale colours which I believe is harder to read than my white, yellow and cyan on black. I must say I have thoroughly appreciated your feed back and I am equally appreciative of the many visitors to my website activated by the NETT article, my short letter and your reaction. I thank you once again. Best wishes,
    Graham Austin

  3. Matthew Newton says:

    Graham

    Someone has to tell you because evidently noone has done it so far. Sometimes one has to be harsh to be kind.

    Your website doesn’t look good at all.. it looks like it’s from the year 2000. For an artist the lack of artistic sense in the website is a bit.. well.. unusual.

    http://themeforest.net/item/fotofolio-premium-photography-portfolio-template/full_screen_preview/77470

    Check out this themeforest theme for an idea of what looks a bit more appealing.

    • Graham Austin says:

      Matthew
      How astute are you, an incredible genius no doubt. I did build my website in 2000, you must be an intuitive giant and possibly wearing nappies in those days. My, how your arrogance has maintained a parallel to your developing ego during that decade. I must confess the menu bars [very fashionable for the olden days] have given it a dated look. There is very good reason because I am a seventy year old dabbling in technology, too laid back to update my website on a regular basis to participate in the fashion race. Too busy painting I guess and enjoying real values. ‘Sometimes one has to be harsh to be kind’, unquote. All this aside I really have to say thank you for making the effort to communicate with me. I really have appreciated your constructive criticsm and I am indeed humbly grateful.
      Kindest regards
      Graham Austin

  4. fiverrr23Jz says:

    Very good article.Really looking forward to read more. Cool.
    fiverrr23Jz

  5. elo boosting says:

    357006 317623Wow What great information. Thank you for the time you spent on this post. 187996

  6. 9208 824951Hi my loved 1! I want to say that this post is remarkable, wonderful written and incorporate almost all vital infos. I would like to peer far more posts like this . 834013

metin2 pvp serverler pvp serverler mt2 pvp metin2 pvp

Articles, ‘How To’ pieces, interviews and news, these small business web design ideas and advice will help ensure your company has a website to rival all others. From colour palettes to branding, right through to technical applications and coding, NETT offers mixtures of articles guiding and inspiring you through every step of web design for small business.