{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

Choosing the right colours when designing a website is something that requires a lot of patience and experimentation, and – ideally – a minimum of guesswork.

Thankfully there are some useful rules of thumb to follow when it comes to working with colours, as well as some truly excellent sources of inspiration out there to help you make the right colour choices for your brand, website, and audience.

Let's start off by considering why colour matters, then I’ll list 20 colour recommendations for web professionals, followed by some pointers to my favourite tools at the end of this article.

Why is colour so important?

Psychologists have for many years studied the effects of colour on the brain / emotions. There don't seem to be any absolutes truths here. People’s perception of colour is largely subjective so I don’t think we can be too instructive in this area. Red doesn’t always mean danger, and blue doesn’t always mean calm.

Yellow is pretty much bi-polar, as far as I can tell. Somebody I used to work with once told me that it was ‘the colour of suicide’ and steadfastly refused to have our office painted yellow. Yet it is also said that yellow conveys optimism, confidence and emotional strength. So which is it?

There are also cultural considerations to factor in, something of particular importance to global brands: green may be lucky in Ireland, but it’s apparently not so lucky in England, while Islam venerates the colour. On top of that green is also the colour of envy, and of money. And it is also every eco-warrior’s colour of choice, and – more recently – has been adopted by a number of those wool-pulling energy companies. Wah!

So what on earth do you do? And where to start?

Well, it turns out that it’s not so much about choosing one colour as choosing a bunch of them, and making them sit comfortably alongside one another. The psychology of colour is less about individual colour washes, but rather an understanding of how people respond emotionally to multiple colours.

Ultimately, factoring in colour theory and pscyhology, colour choices for your website should only be made once the designer has a firm grasp on a) audience / market, b) geotargeting / cultural considerations, and c) brand / product and related guidelines.

Oh, there is another thing to think about, and it's important: d) usability / accessibility.

Usability and colour

Considerations relating to the psychology of colour, your brand, and your audience may help you narrow your colour choices. Now, there are some very important functional issues to think about.

Usability professionals have consistently warned us about the danger of making poor colour choices, for largely practical - as opposed to strictly aesthetic or psychological - reasons. Certain colour combinations are a non-starter. Poor colour choices can induce eye strain and headaches, forcing users to leave your site. Crazy page layouts can make matters even worse.

Yet this isn’t all about colour as such, but about contrast. Contrast is hugely important for accessibility reasons. Strong contrast is required to ensure legibility, so make sure the background is substantially different from the text colour.

Keep in mind that around one in 10 people are vision-impaired. Try printing out early prototype web designs in greyscale, to determine whether the eye can see differing shades of colour.

Ok, let's get to some recommendations...

20 colour tips for web pros

Here are some things to keep in mind when planning the colour scheme for your website. Remember that there are always some superb exceptions to the rule (see 13), so don't be afraid to experiment...

1.    Contrast. Background colour should be a single wash and have plenty of contrast with the text. Black - or dark grey – text against a white background remains the most sensible option.

2.    Avoid patterns behind text. This is the main problem with many of those user-customised MySpace profiles.

3.    Links. I firmly believe that links should be coloured blue, largely because the web’s most popular websites typically use blue (Google, Yahoo, BBC, New York Times, eBay, etc). Why reinvent the wheel?

4.    Clicked links. The vast majority of websites change the colour of a visited link to help users navigate. So should you. Maroon is a common choice for clicked links. Avoid applying these settings to your primary navigation.

5.    Limit your colour choices. The consensus opinion with regards to colour and web design seems to be one of ‘the fewer the better’. Use colour sparingly if you want it to grab the eye. Colour can be persuasive, but not if it is lost among a rainbow.

6.    Shades. Many websites use a blend of neutral colours and a range of shades of their main colour choice/s. This is easier on the eye than trying to work with multiple primary colours. I’m currently a big fan of grey. Note that some people struggle to pick out differing shades of blue.

7.    Add 30% more white space. By spacing out content units and blocks of colour you’ll help guide the eye to key areas. I’d wager that lightly-coloured landing pages with one brightly coloured ‘buy now’ button will convert better than a page featuring a mess of colour. Make that button stand out! Go on, try it…

8.    Be ‘web safe’. Macs and PCs both render colours differently, as do browsers. You should use ‘web smart’ colours to minimise issues.

9.    Clashing colours. Nobody wants to read green text on a bright red background. Avoid bad colour combinations.

10.    Branding. Make sure you consider brand guidelines and use matching or complementary colours throughout your website.

11.    Take extra care when using light text on dark backgrounds. Not recommended for publishers, but it works for some websites. Here, you should increase the leading, tracking and decrease the font weight. Why? Because there is greater contrast with white on black, compared to black on white. But for news sites and blogs with lots of content, this doesn’t work so well.

12.    Use gradients and shadows. Ok, this is a bit Web 2.0-ish, but it works. I’ve seen websites relaunch with barely anything changed except the addition of some sexy gradients, or a drop shadow below the logo. This can add a lot of depth to a site, making it appear less 2D.

13.    Consider some colour coding. I love the brashness of colour in the navigation of the new Guardian website – they have ripped up the rulebook somewhat, but then we don’t do rules, do we? The typography works, and there’s plenty of white space on these colour-coded channels. It is a stand-out example, and shows how well this can work. It’s not just about colouring up channels: note how Techcrunch authors have their comments colour-coded when replying to reader comments.

14.    Try a little opacity. If you insist on using patterns, or placing text in front of images, try reducing the opacity of the background pattern (or part of the image where the text is placed) to lighten the colours. This will achieve greater contrast for the text in the foreground.

15.    Use richer colours for prominent items. My favourite buy-it-now button is bright red, placed against a white background.

16.    Avoid fluorescent craziness. This is the web, dammit, not a Stabilo Boss catalogue.

17.    Remember the role of images. Pictures can add a lot of colour and depth to web pages. Keep this in mind when working on the wireframes / early designs of a website, as if you’re using test content (‘Lorem Ipsum’) you won’t necessarily factor in images. Don’t overcompensate with colour at this early stage.

18.    Going global? Where do your existing and prospective customers live? Which market are you targeting? There are plenty of cultural considerations to factor in when choosing colours.

19.    Demographics. If your audience is elderly then some usability experts suggest that brighter colours may be a good idea. On the other hand, if your website is mainly used by children then you could introduce lighter shades and pastels.

20.    Does it fit? Green is for the environment. Pink is for maternity leave. Blue is for corporate sites, etc. I’m not sure these observations are anything more than generalisations, but an eco-friendly site heavy on hot pink might look a little bit odd.


Seven superb colour tools

Here are my favourite tools for experimenting with colour. Get stuck in!

COLOURlovers
A superbly immersive resource with great social tools.

Kuler
Adobe’s excellent playground for colourheads.

Colour Wheel
Includes a useful ‘web smart’ colour identifier.

ColorJack
Includes various filters, including the likes of ‘achromatopsia’ for accessibility.

Color Hunter
Create and find palettes made from images, pretty cool.

Daily Colour Scheme
Does what it says on the tin.

I Like Your Colors
Insert URL to reveal another website’s colours.

Chris Lake

Published 4 August, 2008 by Chris Lake

Chris Lake is CEO at EmpiricalProof, and former Director of Content at Econsultancy. Follow him on Twitter, Google+ or connect via Linkedin.

582 more posts from this author

Comments (17)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Sam B

Whether green is the colour of envy depends on what language you speak. In German you can also be "yellow from envy" (gelb vor Neid) or even "green and yellow from envy" (grün und gelb vor Neid). At school I was told it was always 'yellow from envy' in German, but Googling and use of a dictionary suggests both green and yellow are possible.

Yellow being the colour of suicide seems to relate to an anti-suicide movement's choice of yellow ribbon to represent themselves.

almost 8 years ago

Avatar-blank-50x50

neil

imo every website should start with a template from a designer who is aware of topics such as this!

almost 8 years ago

Avatar-blank-50x50

Jon

"I firmly believe that links should be coloured blue"

"The vast majority of websites change the colour of a visited link to help users navigate. So should you. Maroon is a common choice for clicked links."

"Macs and PCs both render colours differently, as do browsers. You should use ‘web smart’ colours to minimise issues. "

Who stole the web design tips from 1995?

Seriously, is this the kind of "expert opinion" we can expect from e-consultancy these days?

almost 8 years ago

Chris Lake

Chris Lake, CEO at Empirical Proof

Hi Jon, yes it is. Seriously.

"Stole"? It's assimilated knowledge Jon.

I can see that you don't bother colouring links / clicked links on your own website, so I assume you beg to differ, not that you've explained yourself very well. Maybe you know something we don't? Or then again, maybe not.

almost 8 years ago

Avatar-blank-50x50

Jon

Chris,

I guessed from the article that you weren't a designer and your biography concurs.

The problem I have is that lots of people trust the opinions of e-consultancy and I hate to see people pretending to be experts on subjects they are not and giving out bad advice which some will take as gospel.

I'm always having to deal with clients that think flash intros, scrolling marquues, Comic Sans fonts and yes ... you guessed it ... default blue and maroon links, are a good idea. Articles like this don't help.

Seriously, there are ways of drawing attention to links (underlining, subtle rollovers, other visual cues etc) which aid usability and don't make your site look like it was designed 10 years ago.

I also took issue with the web-safe colours because all combinations of modern computers/operating systems/browsers are capable of handling the full range of hex colours. It really isn't relevant advice any more.

almost 8 years ago

Chris Lake

Chris Lake, CEO at Empirical Proof

Jon,

There's no 'pretending' to be one thing or another - these are my views, take them or leave them. I stand by all of these tips and stated right at the start of the article that these aren't hard rules, and later on that people should experiment.

Clearly you didn't read the article properly because nowhere did I mention 'Flash intros', 'scrolling marquees' or 'comic sans', all of which I loathe. It's bizarre. If you're going to argue then at least keep it on topic.

So what exactly is wrong with a blue link? Maybe you'd like to explain, because you still haven't bothered to explain yourself. Apart from the fact that you like to bill clients for 'subtle rollovers', when a blue link seems to work perfectly well?

Maybe you'd like to show the world some of the sites your design company creates? Show us a few pointers perhaps? You're the expert, and I can see that you do things a bit differently.

almost 8 years ago

Avatar-blank-50x50

Ami

Thanks for this insightful article. It is absolutely true that the colours on your pages can make a significant difference to your conversions. I think that as a rule of thumb, the background should not distract from the content of your pages. I have noticed recently that I tend to spend more time on websites with pale and plain backgrounds than the colourful jungle that for some reason is becoming more and more popular with affiliate marketers
With regard to text colour and link colour, i stay strictly traditional. People are used to clicking on blue text. So give them blue text to click on

Webmaster
http://www.AffiliateMarketingIntro.com

almost 8 years ago

Avatar-blank-50x50

Dmacmedia

"I also took issue with the web-safe colours because all combinations of modern computers/operating systems/browsers are capable of handling the full range of hex colours. It really isn't relevant advice any more.
Posted 20:36 4 Aug 2008 by Jon"

Jon I cant really agree with the above. Not everybody has this "modern combination" that your reffering to. There is an incredible amount of variation in the browsers people use (not to mention OS) A designers job is to make a site look great regardless of the browser. Web safe is is one way to ensure you are getting it right for everybody.

In regards to blue links All of the available SEO research shows that people are far more likely to click on a blue text link than any other. A good designer can intergrate blue links into a website and have them look good.

And last but not least Great article, Covers the basics and some of those tools are great. I will be using them in future. Keep up the good work.

almost 8 years ago

Avatar-blank-50x50

Andrew Rogoff

I have to agree with Jon I'm afraid. Some of these tips seem extremely outdated. Blue links on the BBC? Thankfully they have moved on and some of their links are actually white (shock, horror) :) And, as for using the web safe palette in this day and age - are you serious?

almost 8 years ago

Chris Lake

Chris Lake, CEO at Empirical Proof

The BBC has started using different colours for links but the majority are still blue. I'm not sure why you are 'thankful' that it has moved on in this regard, as if blue links are a terrible idea?

It's interesting that you take issue with this checklist as like Jon, you have designed / approved a website with a bright red background, something that I personally find too harsh on the eye, but each to their own.

Point taken on the web safe colours but many of these tips may be old but they're still relevant today.

almost 8 years ago

Avatar-blank-50x50

web development

This was an awesome post man!!Thanks for giving the scientific angle of the effect of colours on brains/emotions.I specially like the last part where you have given the 20 colour tips of web pros.

almost 7 years ago

Avatar-blank-50x50

Neo

The color of a website should not bring headche to the visitors. Also one main thing is readability that should be taken care of.

Thanks nice tips.

almost 7 years ago

Avatar-blank-50x50

shovan

Cool 20 tips, should write a post on what each colours mean

over 5 years ago

Avatar-blank-50x50

web design

Really nice and informative sharing.Thanks for the share.Choosing the right color scheme for a web design is extremely important.There are many ways color helps communicate a message.Color can convey meaning, express personality, differentiate,frame and highlight content.

almost 4 years ago

Avatar-blank-50x50

Parol

thanks for your tips for the colors. Im new with web designing. and still looking and how to combine and choose color for a site. any tips how do you get the color combination?

over 3 years ago

Avatar-blank-50x50

ben stiller, Business Analyst at Joomkb

Its very difficult to choose exact color for website design. But your tips giving some easy way to choose right choice....http://www.joomkb.com

almost 3 years ago

Avatar-blank-50x50

Mike Lee, Sales at Lemur Graphics

Im a big fan on whites website designs. Dont really like dark colours on a website

about 2 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.