color - Tips for using poor colours well

This is less of a question with a definitive answer and more of a request for some tips. I am hoping that some of you may had had this problem yourself and can offer some advice.

I have been designing for myself and occasionally freelance for a number of years and I have always gravitated towards a monochromatic/muted approach, reserving colour for information, link/rollover colours etc.

I started working as a web/UI developer around 6 months ago and am now designing a new web front end. Layout is nailed - I have zero problem with that - but I am having some trouble with the colours that I have to use - 2 shades of blue.

I feel these shades really cheapen the whole look of the site; replacing this colour with a more metallic colour or subtle shade instantly changes the site for the better.

There is something about blue that really bothers me.

So I suppose what I am asking is: How can I practice using colours that I would never choose myself? Are there some techniques I can use to make it less about the colour and more about how the colour has been used?

I apologise if this is a vague question; I am genuinely concerned that my inability to use colours that have been given to me well is going to cause a problem.

Answer

Don't despair: the perception of colours is influenced heavily by contrast with surrounding colour and by context cues, so, even when you have to work with colours you hate, there are always ways of influencing how they are perceived.

Here's a few things you can potentially work with:

Contrast. Where different shades collide, they are perceived as more different. For example, here's a strong blue against an even stronger blue. The weaker blue below left works more like a subtle tint when paired with the stronger blue compared to when presented on its own or against grey, even though objectively it's a strong blue - while the overall feel of the unit is stronger.

The physiology of this is pretty interesting. There's a layer of cells (horizontal cells) in the eye itself, just past the light-detecting rods and cones of the retina, that do pre-processing a bit like a modern camera lens: if adjacent cells are different above a threshold, they ramp up the difference. If they're different below the threshold, they dampen it down. It makes edges stronger, and a side effect is that you can use it to alter how colours are perceived. You may have seen optical illusions highlighting this, like this one: the "greys" in the top row are actually identical to the lower row on the opposite side:

A more 'real world' example:

Also, see how against the yellow tint above, the blue seems a touch more vibrant and more 'blue'. Yellow and blue, and red and green, are defined in the brain in 'opposition' to each other: three channels, black versus white, yellow versus blue, red versus green. Contrast is particularly strong from one colour to its opposite. In the far right blue blobs above, the completely neutral grey through contrast with the blues takes on a very very slightly yellowy character - it doesn't look yellow, but contrast pushes it a little nudge in that direction. It's a touch warmer and livelier than that grey would be on its own.

Context. Here's another optical illusion. The squares marked '1' and '2' are identical colours, but perceived differently because what is interpreted as shadow is being counterbalanced. You probably wouldn't want to use an affect like this, but it showcases how much variation context can create in how colours are perceived.

There's also the hugely subjective area of the character that colours are perceived to have, driven by cultural cues which you have plenty of control over. It's very subjective, (there are some resources on some very crude simplistic patterns but while interesting they're not so useful in practice), but the bottom line is, you can change a lot about what character a colour is perceived as having with the context you create around it.

Here's that identical shade of blue again, and using styles with cultural associations (thrown together in a few minutes), we're bringing out a different side of its character in each case:

Bottom line is, with almost any colour scheme, there are things you can do to turn it around. Not all of the way, but some of the way at least. As well as tricks like the above, use curves and shapes, thick and thin lines, whitespace, and if possible, interplay with some subtle shades of grey.

Also, usual design principles still apply. Often, when something looks awful because of the colours, it's not the colours themselves causing the immediate damage - they might, for example, through drabness or overbearingness not create any kind of clear or pleasing visual hierarchy, and it's the lack of visual hierarchy that causes the actual damage. Find a way to force it in.

For example, a little injection of some 10% or 20% grey into an otherwise drab colour scheme, bringing in a little dash of contrast and emphasis, can make all the difference.