Web Design Colour - Oct 2011

Website design Sunshine Coast

Choosing colour in web design

Colour is an important web design tool for any online business. Some Sunshine Coast business's use the cool blue of the Pacific Ocean or the pale yellow of the golden sands. Some on the Sunshine Coast choose for their web design the vibrant green of the hinterland. 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. Web design identity from November 2009.

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. They’re the most popular because those colours tend not to really go completely out of fashion.

The first step in taking a brand into web design 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 your offline brand. 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. You just end up looking a bit like you’ve created the website at home and not used a professional.

Westpac is 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. 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.

We encourage businesses to be highly critical when choosing online colours, and to not simply settle for a colour because you might be fond of it.

The colour you choose will have to go with your logo. It will have to match straight away. If you’ve got a really outdated logo, we’d look at changing that straight away. Read more on logos, images and graphics.

Logo and web design in 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. 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.

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.

Blue is particularly useful for companies that need to elicit the customer’s trust. Web design trust from January 2008.

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. 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.

Logo and web design in Red

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

Red is very much a retail colour. It’s about passion and excitement, and impulse and now.

Fast food companies like McDonalds and Red Rooster, as well as phone companies like Vodafone, are 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. 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.

Logo and web design in 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 very risky.

It has merit as a highlight colour, noting that it’s particularly effective when used on a black background (not recommended). We would encourage some web design testing.

It creates a little bit of excitement and an air of innovation. It’s bold. 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.

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

Web design in 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.

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. Web design essentials is also good reading.

Black is not recommended

There are significant issues with people easily digesting and 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. Research has shown that it is difficult to read white copy against a dark background.

Frequent Questions Web design homepage Get in touch


12website.com has prepared the supplied information as a voluntary service to the online community. The information is necessarily web design and small business in nature and is not intended to be relied upon other than as general background material. This should not be used as specific advice, recommendations or guidance, and specialist assistance should be sought by anyone in need of such help. 12website.com accepts no liability under any circumstances for any loss, expense, damages or costs whether direct or indirect (including loss of profits / damage to business) which may be incurred by any person as a result of relying on or using in whole or in part any of the supplied information.