There are so many things to consider: How do my colour choices reflect my brand? Do my colour choices reflect the brand's ecosystem? Will these colours "convert"?
In this article, we'll take a closer look at colour from the perspectives of neuroscience, business, and psychology. We'll also discuss how to use colour to capture user attention and increase conversions.
How We See and Perceive Colour
Let's start at the beginning: colour is a construction of our minds. Isaac Newton was perhaps the first person to observe that colour is not inherent to all objects; rather, an object either reflects or absorbs coloured light, and what is reflected is what our brains will process as a specific colour.
The colour spectrum is made up of three primary colours: red, yellow and blue. By combining these three colours, secondary colours – green, violet, and orange – are produced. Mixing any primary or secondary colour produces a tertiary colour – blue-green, blue-violet, red-violet, orange-red, yellow-orange and yellow-green.
The Colour Wheel
Goethe came up with the common representation of the symmetrical colour wheel. His Theory of Colours, published in 1810, experientially and conceptually explored the effects of colour on humans. The common colour wheel represents the three primary colours, the three secondary colours, and the six tertiary colours so that the "complementary" colours are always opposite each other: red is opposite green, purple is opposite yellow, blue is opposite orange, etc.
Complementary colours are the pairs that will allow for the most contrast.
Colour and Visual Attention
Human visual attention is for an important part bottom-up driven by the saliency of image details. An image detail appears salient when one or more of its low-level features (e.g., size, shape, luminance, color, texture, binocular disparity, or motion) differs significantly from its variation in the background.
Much of the visual attention we pay to specific regions of a scene depends on bottom-up (i.e. motivated by stimulus, rather than task-driven) attention. This describes why colour choices affect the way a user will interact with a website when they first arrive. Human visual attention, in other words, first responds to contrasts in colour and light, then to the emotional and cultural value of a specific colour.
Our perception of colour has evolved over thousands of years to help us "discriminate edible fruits and young leaves from their natural background" (Koenig).
Professor of Neurobiopsychology (and EyeQuant co-founder) Dr Peter Koenig and his fellow researchers found that the axis of Red-Green colour contrast plays the largest role in attracting our overt attention in natural scenes, while the effects of a Blue-Yellow colour contrast are much less influential.
Colour saturation is another possible predictor of attention. Colour saturation is the intensity of a colour, expressed as the degree to which it differs from white. Crucially, the more saturated an element is in comparison to its surroundings, the more quickly it is likely to be noticed.
Colour and Semiotics
What do certain colours symbolise? Green symbolises trustworthiness, youth, and energy. But wait, so does yellow… and orange, and blue!
In semiotics – or the study of signs – the use of colour as a substitute, or sign, for information is frequently broken down by Peirce's Trichotomy of Signs:
- Iconicity measures the resemblance to something. For example, red and orange are perceived as "warm" colours, while dark colours are perceived as "heavy".
- Indexicality is the measure of how a sign is linked. For example, a green banana is understood as under-ripe, a yellow banana is understood as ripe to eat, and a brown banana is understood as over-ripe.
- Symbolicity is far more elusive as it lacks the logical connections to meaning. Green means go and red means stop, but the symbolism of colours remains dependent on a specific context.
Colour and Branding
You can only paint your living room walls once they have been built, sanded and prepared, and the same principle goes for your website: a basic global framework of decisions must be made before aesthetic choices such as colour can be made.
There are no secret formulas involved in choosing a colour scheme, nor is there one colour or colour combination that is guaranteed to attract your users to your product. To make this crucial aesthetic decision, you must first understand what it is that you want to achieve, and most importantly, who you want to achieve it for.
Colour and Conversion (Or the Story of the Big Orange Button)
One example of using colour to "fill in the blanks" is the notorious "BOB" (Big Orange Button). The BOB has become a symbol of colour's role in conversion rate optimisation.
"Safety orange", or a bright orange (Pantone Number 152) is used to differentiate important information from its surroundings, especially in contexts that require quick decisions and immediate attention such as in traffic, hunting and disaster relief.
A Big Orange Button works best when it stands out like a hunter's safety vest in the forest: it needs contrast – often in the form of complementary colours – to attract and direct attention.
Best Practices
Contrast and Balance
A popular design model for creating balance within a colour scheme is to adopt the basic 60-30-10 rule. Here, the rule dictates that your most dominant colour should be used 60% of the time, your secondary colour 30% of the time, and an accent colour 10% of the time.
Whitespace
Whitespace is crucial to drawing user attention to key areas and to balancing and directing the flow of information across a page.
A huge ad, such as Gap's "50% OFF EVERYTHING", might seem as if it would capture our attention immediately. Using EyeQuant's Attention Map analysis, we can see that the ad is actually largely ignored!
Know Your EcoSystem
In all likelihood, an emotional framework of colours has already been established by your competitors and the brand ecosystem you work within.
Test, Test, Test
Neil Patel once wrote that the person responsible for A/B testing at Gmail ran tests on 50 shades of blue before deciding on the hue that worked the best for their users.
Performable tested a green CTA button against a red CTA button. The red CTA button outperformed the green by a whopping 21%.
Key Takeaways
- Our attention is first grabbed by what is salient (through a combination of colour contrast, space, and size), then by the semiotic value attached to certain colours and colour combinations.
- Use saturated colours selectively: Bright and bold colours are excellent at attracting attention to select regions of a page, but soon become overwhelming if overused.
- The best way to draw attention to your most important elements is to create a balance between whitespace and contrast.
- Understanding other brands in your ecosystem is crucial.
- A/B testing is the best way to see how your colour choices affect your branding and design. Predictive Eye-Tracking, meanwhile, will help you to better understand how colour is affecting user attention.