Getting colour right on your website - Noisegate Media
Experienced web development and design team in Leamington Spa also specialising in web video and content production
50972
post-template-default,single,single-post,postid-50972,single-format-standard,qode-core-1.0.3,ajax_fade,page_not_loaded,,brick-ver-1.5.1, vertical_menu_with_scroll,smooth_scroll,paspartu_enabled,wpb-js-composer js-comp-ver-4.7.4,vc_responsive
 

Getting colour right on your website

Your brand and website design is the front cover to the rest of the content on your site. Effective design and colour will encourage potential clients to want to find out more about you. A large proportion of design is in your colour choices.

Colours are said to be able to instigate certain feelings and can help to create an emotive response within your audience. So the colours you select need to provide a mini insight into your company.

It’s no surprise then that colours can affect the purchases we make if we’re getting all emotional about them.

Colours can induce emotions within your consumers so that they feel a certain way about a product or brand.

“Colour increases brand recognition by 80%!” Kissmetrics 

 

Colours and their connotations

Here’s a list of colours and the feelings they are most commonly associated with:

Yellow

Associated with: optimism, youthful, grabs attention

Red

Associated with: energy, increases heart rate, urgency, often used for sales but also danger

Pink

Associated with: romantic, feminine, products/services for women/females (even now unfortunately)

Violet

Associated with: soothes and calms, seen on anti-ageing product design/packaging and hospitals etc.

Blue

Associated with: Sensation of trust and security, banks and corporate sites

Black

Associated with: powerful sleek sophisticated, markets luxury products

Green

Associated with: wealth and oddly the easiest colour for the eyes to process! Also safety

But these associations differ depending on cultures. For example red in China indicates wealth.

You also need to consider the demographic of your audience; their age, sex and interests. For example if you are a B2B company and your audience work in finance, will they be swayed by a big pink logo featuring a pony? Probably not.

It’s Not All Subjective

Colours that are pleasing to the eye and appear to work well together complement each other. These colours sit opposite each other on the colour wheel providing a lovely cosy balance for the eyes. Like an attractive man or woman or whatever you’re into. Colours that do not complement each other create a sense of chaos and our clever little brains will reject this. So colour combinations and ultimately the colours you select for your web design need to be logical.

Effective Colour Schemes

As we all know some colours just don’t go together. Some colours accent others and some colours clash in the best way. The good news is, there is some logic to it.

Triadic Colour Scheme

Three colours that sit opposite one another equally spaced apart. 

Use an equilateral triangle on your colour wheel like the image below, to find three colours that complement each other. This colour scheme is used to create a balanced and varied pallet.

 

From these colours, you can choose your “Mother Colour” which will be used as the main event on your website whilst the other two colours are used as accent colours.

However you move the triangle, you will find that the three colours selected work together. Depending on whether you pick primary, secondary or tertiary colours, the mood your colours create will vary. For example 3 primary colours will create a very bright and pure colour scheme, whereas three tertiary colours will create a more subtle and complex pallet.

 

 

 

Compound colour scheme (Split Complimentary)

4 colours that complement each other from across the colour wheel. 


Select two colours next to each other on the wheel and then the two colours that sit directly opposite them on the other side of the wheel. Like so:

 

This colour scheme will give your designer a bit of freedom to flex his creative muscles on your website.

Complimentary colours are pleasing to the eye. As they sit next to each other on the colour wheel, they appear more neutral and less visually obtrusive.

 

 

Analogous colour scheme

These colours sit right next to each other like good school chums.

Select them carefully though as some colour combinations won’t work as well as others. Each of the three colours is just a different vibrancy of the same colour so, once you find three that work, you can’t really go wrong with how you use them.

 

 

Exceptions to the colour rules

Of course there are exceptions. Of COURSE there are. Just as you were getting all cosy and comfortable in your bubble of nice and easy rules and regulations I come right back and slap these anomalies in your face.

Garish Clashing colours

Some colour combinations that might at first appear garish and almost as if they might clash terribly can work. A fine example is the Olympic logo. Just look at the state of it. It’s so in your face. But is it really that terrible? Now you’re starting to look at it, you can’t stop looking at it. I mean it certainly does leap out at you and grabs your attention. And before you know it you love the darn thing.

Using all the colours

Well this website has just gone to town with their colour wheel; splashing colour all over the shop. They haven’t read up about colour combinations at all and yet it works. I mean it especially works because their website is called “I love Colors” so I mean fair enough. It also works because they have a plain neutral background that works as a canvas for the rest of the design.

Ilovecolors.com.ar

Taking minimal to a whole other level

Did these guys forget to finish their website? No, no they didn’t. This is it. They used two colours (if you can call them colours) and really . . . stuck to them. Not an ounce of brightness or vibrancy anywhere. However, sometimes this simple approach to design makes more of a statement than say “I love Colors.”

www.justsmith.com

Tools for choosing a colour scheme

If you’re finding it hard to visualise your pallet then there are some great tools on the internet to help you out. And the best part is, they’re all free. Hurray. They’re also fun to play with.

Colour Hail Pixel

Hover anywhere around your screen to find cool colours and note down their colour code.

If ever you have a child to entertain, pop this website in front of them it’ll keep them quiet for a good few minutes.

Colour Combos

If you don’t want to sit around experimenting with colour combinations then check this site out. It picks a whole load of pleasing colour combinations and allows you to browse through them for some inspiration.

Colour Adobe

A colour wheel created by those big dogs at Adobe. Select the colour rule you want to abide by (monochromatic, triad, complementary etc.) and move the dials around to find your colours.

Designspiration

Find images that contain your chosen colours. Sometimes when you choose really interesting and unusual but ever so stylish colour combinations, it can be difficult to find images that don’t clash with your pallet. This website provides an answer to such a calamity. Select your colours and watch hundreds of images load before your very eyes.

Don’t go overboard

Whilst being set loose on all the colours of the rainbow might feel like you’re back at playschool again with trays of paint for making adorable little handprint paintings, it’s good to remind yourself not to get too carried away.

Like everything in life it seems; colours work best in moderation. The most effective colour schemes just use 2-3 colours. But if you STILL haven’t got your colour fix, use a shade of one of your existing colours, either lighter or darker, instead.

Things to watch out for

People that don’t see colour as well as most

Be aware of compromising the legibility of your text for interesting formatting. Using colour inversions or anything other than black on a white background can result in users struggling to read your content leading them to look elsewhere. A foolish way to lose a client you might think.

Negative colour associations

For example bright or garish colours slapped across a website belonging to a company providing funeral services, may be deemed inappropriate.

Colour patterns and combinations a little too similar to another company

You don’t want people to mix you up with some other shmuck so try and be as original as possible. There are a lot of brands out there so this may take some work but a recognisable and distinguishable brand will serve you well.

Ask an expert

After 18 years in the business, we know some super-talented designers so if you need a second opinion and an expert one at that, then let us know.

Call: 01926 330135

Email: contactus@noisegatemedia.com

Tweet: @noisegatemedia

 

Sources:

Color Wheel Artist

Tuts – Web Design

One Extra Pixel

 

No Comments

Sorry, the comment form is closed at this time.