Webweaver WebDesign

Websites that Work: Colour for websites – a quick guide.

I read a fascinating article last year on Melissa McCracken who has an interesting form of synesthesia, causing her to associate music with colours. She is able to listen to a song and paint the colours she sees – so, painting what she hears. It’s not something she can control, it’s like a reflex. And the result is mesmerising.

In her interview, she explains that as she grew up, she thought everyone had this ability and it was only in her mid-teens that she discovered she was unique in this way. She says, “I used to think my synesthesia was normal and that asking anyone about it would be like asking them if they could smell the coffee in a coffee shop. At 16, I found out that it wasn’t when I was trying to choose a ringtone. My phone was blue and I told my friend I was going to pick an “orange” song to match it because they’re complementary colors. He seemed really confused and I thought there was something wrong with him. It finally clicked in a high school psychology class. It was shocking because I’d never thought it was unusual.”

What do clients ‘hear’ when they see the colours you use on your site, I wonder? Colour is a complicated aspect of design. The more I work with it, the more I realise how vast and varied our reactions are to colour. Choosing colours for your website may seem involved, but here’s a little basic guidance for you:

Choose your main colour

Your main colour ties in with your logo, and because colour is strongly associated with feelings, you need to apply some thought here. What colour will people remember when they think of your business? Colour has personality. But all of this is also largely determined by culture, gender or age, even. Let’s talk about RED. In the West, it is associated with passion, but in the East it’s the colour of happiness or luck. Chinese brides wear red wedding dresses on their special day. And in the Middle East, it’s the colour for danger. Consider what your target audience will feel about your colour choice.

Tips on where to use your main colour:

  • Logo
  • Menu items
  • CTA buttons
  • To highlight important info
  • Titles & Headlines

Choose your accent colours

You need a little contrast for your main colour. Forget colour theory, there’s not always consensus there. What you can do, for suggestions on what may work, is use an online tool. First, you’re going to need the hex number of your main colour. Digital colours work with codes – for eg, black is #000000. Once you’ve got that, visit the Adobe Color site and drop your hex into the search box. Adobe will display your main colour, along with some others that might go with it. Neat.

(If you’re not sure how to find the hex for your main colour, email me and I’ll give you some suggestions, based on what you’re working with.)

Tips on where to use your accent colour:

  • Current menu item
  • Subtitles
  • To highlight secondary information

Choose your background colour

When in doubt, go with white. When choosing a background colour, ALWAYS opt for high contrast. Your text, above all, must always be legible. There’s been a trend in modern website design over the past few years that I personally think is utterly daft – to have light-coloured or grey text on a white or light background. That’s a reading nightmare. Always go for dark text on light backgrounds, or vice versa.

Want to receive these posts directly to your inbox?