What Colour Should I Use on my Site? The Answer Isn’t as Clear as You May Think…

Color_WheelWe’ve talked about photography use in site design and how it visually aligns a business to its’ end-user and can visually establish a narrative of the firm and how it operates and works with clients. But that’s only the beginning of the story…

As designers, we’re looking to craft cohesive messaging through multiple channels and the next consideration we should explore is colour. How we select it, what purpose it serves and how to properly implement it to drive site performance.

It’s Not ‘All About the Pretty’ Anymore

I tend to joke on calls with clients about how my job really isn’t about just making a pretty site anymore. When the internet was less saturated with lawyer sites, we had a little more leeway to just craft something that was visually appealing, but that’s all changed and our job has become more about ensuring a site’s usability (UI), establishing a positive end-user experience (UX) and not wasting valuable conversion opportunities. And the strategic use of colour plays a vital role in this shift.

We want to ensure that our clients’ objectives are met through the effective integration of all of the visual elements at our disposal, that in addition to a site having a strong and clear visual message that we remember that the site design serves a function – it’s not just a piece of art.

How Does Colour Function in Design?

I’m going to apologise in advance if you know the answer to this question – but I feel it’s an important one to address at the start to quell the idea that designers just open up a colour-wheel and toss a proverbial dart at it to see what to use. There are several considerations we address when we start to look at colour options for a particular project:

  1. Are there marketing materials already in place that need to be carried over into the web environment?

Businesses can spend thousands of dollars in developing a creative / branding guide that establishes very specific usage guidelines for their logo and supporting elements, which also includes the use of colour. In these cases, designers will advise that the website should be an extension of these other marketing materials and will craft site visuals to work in tandem with the business’ established brand.

  1. What is the business’ practice focus, target market and end-goal?

I will advise a firm practicing in criminal law differently than a firm practicing securities arbitration as the expectation for fast contact is diminished for a firm whose goal is to inform and validate rather than assist with an immediate need for bail or an arraignment hearing.

Colour sets the mood for the site’s overall impression and establishes the action (or inaction) and level of engagement we are asking an end-user to take. Aggressive colour triggers action, while passive colour encourages a slower and more deliberate perusal of a site’s content. Is my client looking to inform or to convert end-users into paying clients? If the answer is conversion I will recommend employing high contrast or aggressive colour to trigger action on the part of the end-user.

  1. What does the body copy or content-supplied value proposition tell me?

All other factors being null, or even in addition to the above information, I can look to the body copy supplied by my project writer to help inform colour choice – ensuring that the mood of the site’s colour fits the mood of the text within the page, which provides additional context for content.

The Psychology of Colour – The Myth That Keeps on Giving

PrintThere are millions of sites (3.96 million, to be exact!) out there that address the psychology of colour and the emotional associations people supposedly place on a specific hue. But what is often neglected is the data (or lack thereof) behind these claims. Like trying to quantify why one site converts better than another, there are just too many factors that come into play when discussing a specific colour that universally and always evokes the same emotion in all users.

Personal preference, upbringing, cultural differences, context, religion and life experience all factor into how an individual reacts to a specific colour. And so in the words of a very worldly-wise and closet philosopher co-worker of mine, I present to you a philosophy degree in three sentences:

‘The user creates the context. Nothing I write means what I mean it to. It only means something to the person reading it.’

Now, this not only applies to my co-worker’s word-based content, but to other forms of content as well – and this includes the use of colour. I can place blue on a design knowing the basic psychology of this colour is dependability, strength and trust. But I can never know the experiences of the end-user coming to the site – do they hate blue because they work for Best Buy and are forced to wear that darned icky blue shirt every single day? Or is there a deeper and more serious trauma there that I can never anticipate?

So what do I do? I know that judgment of the product I am representing in this web presence is going to happen, I know that there are too many personal factors to be able to accurately translate the colour I choose into a specific emotion I want my end-user to feel. I want to then accurately represent the brand I am promoting through the use of percieved appropriateness. In other words, does the colour I select fit what I’m selling?

‘When it comes to picking the “right” color, research has found that predicting consumer reaction to color appropriateness in relation to the product is far more important than the individual color itself.’

– Gregory Ciotti for HelpScout Blog

If the answer to the above question is yes, then I’ve done my job from a colour standpoint. So, at the end of the day, my general rule for colour is this:

I want to accurately represent the brand I’m designing for and include a secondary colour that visually associates a desired action I want the site’s end-user to take.

Which brings me to the final point, colour for conversion.

Can Colour Affect Site Performance?

If we’re just looking for a hard and fast answer, then I’d have to go with a definite ‘yes, absolutely it does’. However, like in all things web design, there are some caveats and outlaying factors we should, as designers, consider.

As I mentioned above, what are the business goals of the site we’re designing? Is it pure conversion? Is there an immediate and time-sensitive need that warrants selecting a colour that will evoke that immediate action by the end-user? If this is the case, then I will generally recommend a highly saturated, direct compliment of whatever the site’s base colour is to trigger that action I’m looking for.

Complimentary colours are any two colours that are positioned directly opposite one another on the colour wheel (for example: blue to orange).

The value and saturation of these tones can lighten or darken dependent upon the overall feel of a site or the mood I’m trying to set, but the general principle remains – the abrupt visual change to highlight a specific or actionable feature will pull the end-user’s eye and can trigger action.

For sites where conversion may not be the mitigating factor (and this is in rare cases), we can recommend pulling back from that strategy and design something that is more monochromatic (a single base hue that uses shades, tones and tints to lighten/darken the base colour) or analogous (a group of three colours that appear next to each other on the colour wheel) to help trigger action on the part of our end-users. But we never want to get too far away from a visual prompt that site visitors will associate with increased importance, such as a contact number or important link button.


Of course, there are also several other factors that come into play when it comes to colour usage, especially visual impairments that may affect the way our colours appear in a site, such as red/green colour-blindness, but that is a discussion for another time, and besides, who wants a site that looks like Christmas exploded all over it, unless you’re Santa, of course!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s