Effectively use color to capture user attention and increase conversions.

Color permeates our actions and reactions to everything we do; it plays into our sense of identity, into our choices, into our relationship with the world around us.

To conversion optimizers, marketers, designers, and advertisers, choosing a branded color scheme that sells can easily become a lengthy and complicated problem. So many considerations are at stake: How do my color choices reflect my brand? Do my color choices reflect the brand’s ecosystem? Will these colors “convert”?

In this article, we’ll take a closer look at color from the perspectives of neuroscience, business, and psychology. In particular, we’ll talk about:

• How humans see and perceive color.
• What colors and combinations of color garner visual attention.
• The real story behind the emotional language of color.
• Best practices when choosing and using color in branding and design.

But Really, How Do We See color?

Let’s start at the beginning: color is a construction of our minds.

Isaac Newton was perhaps the first person to observe that color is not inherent to all objects; rather, an object either reflects or absorbs colored light, and what is reflected is in turn what our brains will process as a specific color.

The color spectrum is made up of three primary colors: red, yellow, and blue. By combining these three colors, secondary colors – green, violet, and orange – are produced. Mixing any primary or secondary color produces a tertiary color – blue-green, blue-violet, red-violet, orange-red, yellow-orange and yellow-green.

The Color Wheel

Goethe came up with the common representation of the symmetrical color wheel. His Theory of Color, published in 1810, experientially and conceptually explored the effects of color on humans.

The common color wheel represents the three primary colors, the three secondary colors, and the six tertiary colors so that the “complementary” colors are always diametrically opposed: red is opposite green, purple is opposite yellow, and blue is opposite orange, etc.

Complementary colors are the pairs that will allow for the most contrast, or, in Goethe’s words:

“for the colors diametrically opposed to each other… are those that reciprocally evoke each other in the eye.”

Color 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.”

This is a quote from a research paper by researchers from the University of Barcelona on the saliency (or visual pop-out effect) of color. Much of the visual attention we pay to specific regions of a scene depend on bottom-up (stimulus, rather than task-driven) attention. This describes why color 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 color and light, then to the emotional and cultural value of a specific color.

Our perception of color has evolved over thousands of years in order to help us “discriminate edible fruits and young leaves from their natural background” (Koenig).

In his research into the nature of color contrast in the Ugandan rainforest – a so-called birthplace of civilization – Professor of Neurobiopsychology (and EyeQuant co-founder) Dr. Peter Koenig and his fellow researchers found that the axis of Red-Green color contrast plays the largest role in attracting our overt attention in natural scenes, while the effects of a Blue-Yellow color contrast are much less influential. While this research is specifically related to jungle scenes, it certainly offers interesting fodder for further research into how and why certain colors and color combinations stand out to us more than others.

Color saturation is another possible predictor of attention: the more saturated an element is in comparison to its surroundings, the more quickly it is likely to be noticed.

There is a crucial bit of knowledge to extract from this last paragraph: color saturation attracts attention in relation to its surroundings.

Color and Semiotics

Green symbolizes trustworthiness, youth, energy…but wait, so does yellow…and orange… and blue. Breaking down the associations colors have to certain states of mind can be terribly confusing.

In semiotics – or the study of signs – the use of color as a substitute, or sign, for information is frequently broken down by Peirce’s Trichotomy of Signs:

1. Iconicity measures the resemblance to something, such as a photograph or an icon. It can also refer diagrammatically or illustratively. For example, red and orange are perceived as “warm” colors, while dark colors are perceived as “heavy”.
2. Indexicality is the measure of the way in which 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.
3. Symbolicity is far more elusive as it lacks the logical connections to meaning that iconicity and indexicality have, yet it is what marketers commonly refer to when speaking about the language of color. Green means go and red means stop, but the symbolism of colors remains dependent on a specific context.

Color 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 color can be made.

There are no secret formulas involved in choosing a color scheme, nor is there one color or color combination that is guaranteed to attract your users to your product like magpies to gold.

In order to make this crucial aesthetic decision, you must first understand who you are, what it is that you want to achieve, and most importantly, who you want to achieve it for.

In this way, color should act as a substitute for information: as opposed to telling a user to “look there” or “feel this way” about an area of a web page or information on a product, color should fill in blanks by virtue of its characteristics.

Color and Conversion (Or the Story of the Big Orange Button)

One such example of this method of substitution is the “notorious BOB” (excuse the bad joke).

The BOB (or Big Orange Button) has become a symbol of color’s role in conversion rate optimization. WiderFunnel and Unbounce love to speak about its power, and perhaps rightly so. But why is the BOB the saviour of conversion, the Queen of the CTA’s, the undisputed fan favourite of users?

While there are no clear reasons why a bright orange CTA purportedly converts so well, we’d like to offer some possible reasons:

“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, in hunting, and in disaster relief. The allure of bright orange has to do both with its saliency against common natural backgrounds such as blue sky or dark green forest, but also with its semiotic connotations; because of its symbolic status as a “safety” color, we could hypothesise that bright orange encourages more urgent decision-making – which is good news for e-commerce buttons.

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 colors – in order to attract and direct attention.

Best Practices

Contrast and Balance

A popular design model for creating balance within a color scheme is to adopt the basic “60-30-10 rule”. Here, the rule dictates that your most dominant color should be used 60% of the time, your secondary color 30% of the time, and an accent color 10% of the time. Typically, the most dominant color should also remain the least saturated color, while your bold or highly saturated accent color should be saved for your most important content.

Behind this intuitive strategy lies an idea that is basically consistent with the science of visual attention. In the simplest of terms, what we are visually drawn to relies on intersecting sets of spatial and contrasting characteristics. A sparsely used “accent” color is likely to attract visual attention both because it is scarce and because it elicits a high value of visual contrast.

Whitespace

In the jungle, we’re neither provided the luxury of whitespace nor respite from the surrounding visual chaos.

Websites are different. Whitespace is crucial to drawing user attention to key areas and to balancing and directing the flow of information across a page.

This, of course, is no news to you: “minimal”, “flat”, “simple”, “uncluttered” design is fast becoming the strategy of choice for creating high converting, usable web pages. And yet, adding white space to a web page in order to draw more attention to a key element can be slightly trickier than you think.

A huge ad, as seen below, might seem as if it would capture our attention immediately, but it is in fact largely ignored, as shown by the EyeQuant analysis.

This shows an accurate prediction of what users will most likely see (or miss) in the first couple of seconds after landing on the page. It’s clear that the massive “50% OFF EVERYTHING” sign in the middle of the page receives comparatively (and surprisingly) little user attention. The highly salient black text at the very bottom of the page, meanwhile, receives far more heat because of its point of contrast in relation to the rest of the page.

Know Your EcoSystem

An emotional framework of colors has been, in all likelihood, already established by your competitors and the brand ecosystem you work within. Do you hop on the bandwagon or do you swim against the current?

Well, it depends:

Some brand domains prefer consistency…

Fashion E-Commerce is a vast ecosystem that nevertheless tends to adhere to a color scheme. Chanel introduced the now ubiquitous monochromatic black and white scheme to fashion in the 1920’s, and sites such as Net-A-Porter, TopShop, American Apparel, and Sales Gossip follow suit themselves accordingly.

In this case, a predominantly monochromatic (with moments of color splashed in) are used in order for the user to immediately identify that they’ve come to a fashion-forward site. Just take a look at Net-A-Porter’s strategic use of red to draw attention to their sale items:

And some don’t…

Other product domains, however, aren’t so “black and white” (again, excuse our pun). Environmentally-savvy products might intuitively choose green as iconic of their relationship with Mother Earth, but they are often just as likely to choose green’s complimentary color – orange – in order to provide a welcome change. Choosing a color based on semiotics alone is common practice, yet limiting.

By the same token, working on a monochromatic gray scale like the fashion industry works well because it also converts easily (important information can be picked out using splashes of colour), yet relating a brand to a color for symbolic reasons alone may lead to a reduced bottom-up attention.

Once again, users will see what is salient on a page before they start processing the emotional and cultural importance of color.

Test, Test, Test

Neil Patel of CrazyEgg and KissMetrics 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.

For the vast majority of us, this quantity of tests is far out of reach (Gmail does have 425 million test subjects, after all), but Neil does point to a now famous A/B test published by Performable at Hubspot. Here, Performable tested a green CTA button – which is consistent with their overall branded colour scheme – against a red CTA button.

The red CTA button outperformed green by a whopping 21%.

Like Hubspot, we’d be crazy to say that we know precisely why this is the case. We could point you to studies that suggest that red is indeed the most salient – and hence most attention-grabbing – color, but saliency is dependent on context, or how a certain color pops out in relation to its surroundings. That said, making sure that your most important elements are the most visible ones – and color is one of the main mechanisms to achieve that – will typically result in better conversions. The only way to find the best converting color for your own web page is to test, test, test.

To quote hubspot,

“Therefore, do not go out and blindly switch your green buttons to red without testing first. You should test colors on  your  page and with  your  audience to see what happens. You might find something interesting in your data that we don’t have in ours.”

Key Takeaways:

• Our attention is first grabbed by what is salient (through a combination of color contrast, space, and size), then by the semiotic value attached to certain colors and color combinations.
• Use saturated colors selectively: bright and bold colors 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 white space and contrast. An oversaturated web page will overwhelm your user’s ability to attend to your most important elements.
• Understanding the way other brands in your ecosystem is crucial: Some areas, like fashion e-commerce, tend to adopt a consistent color scheme, while most others thrive on differentiating themselves from their competition.
• A/B testing is the best way to see how your color choices affect your branding and design.
• Predictive Eye-Tracking, meanwhile, will help you to better understand how color is affecting user attention, and will also give you ideas for what to A/B test.

For more resources on color and how to use it to attract attention online, start with:

• A breakdown of the way different brands use colors online, via colourlovers.com
• A great guide to color and web design, via sixrevisions.com
• An ad nauseum explanation of visual saliency and attention, via EyeQuant science advisors Laurent Itti and Christof Koch
• An introduction to color and semiotics, via José Luis Caivano

Oh, and a little factoid:

The common goldfish is the only animal species to be able to see both infrared and ultraviolet light!