Colour is one of the most powerful tools in a designer’s toolkit. It can draw attention, set a mood, and influence a users’ emotions, perceptions and actions.
Did you know that colour accounts for 90% of the reason why you purchased a specific product? Or that full-coloured ads in magazines are recognised 26% more than black and white ads?
It seems quite obvious: use the right colours, and you win. But the real question that comes to mind is, how do you find the “right” colour? To answer this question, we need to analyse traditional colour associations, the differences between men and women’s perceptions of colour schemes, and accessibility concerns.
Red is the colour of fire and blood. It’s one of the most powerful colours, attributed simultaneously with love and war (the common saying, “to see red” highlights the colour’s connection with anger).
Red is a very emotionally intense colour. It can actually have a physical effect on people, raising blood pressure and respiration rates.
Red is energetic and impulsive, giving off the impression of speed and power. Both Netflix and YouTube use red as a primary colour.
Red is also known to be eye-catching. In design, red can be a powerful accent colour. Just like red carpets at awards shows and celebrity events, red is great highlight for the most important individual elements on your page.
Orange is a very vibrant colour. It shares red’s stimulating aspects, but to a lesser degree: it has an energetic aura without red’s aggression and can portray a fun atmosphere.
Oddly, yellow represents both happiness and anxiety. In design, yellow is very effective for attracting attention, making it a colour often used for warning signs (it can be associated with danger, though not as strongly as red).
In design, green can have a balancing and harmonising effect. Green’s balance lends itself to calls-to-action, but as a designer you should pay attention to colour saturation. Saturated green colours are exciting and dynamic to the eyes, they grab a lot of attention. This is why they work well for call to action buttons.
Purple’s rarity in nature and the expense of creating the colour has given purple a special role in design. Historically linked to royalty, purple retains a feeling of luxury even today. Purple insinuates that a product or site is high-end, even if it’s not.
An interesting fact is almost 75 percent of children prefer purple to all other colours.
Most young people view purple as a happy colour.
Black is the strongest of all colours: it attracts attention quickly, which is why it’s most commonly used for text and accents.
When used as a main component in a colour scheme, such as a background, black creates its own emotional ties. It can make it easier to convey a sense of sophistication and mystery in a design.
White is often associated with purity, cleanliness, and virtue. Because of the fact that white is often connected with health services and innovation, you can use this colour to suggest safety when you want to promote medical or high-tech products.
Gray represents neutrality. It’s a safe colour to use with other colours. When used as a primary colour, grey gives the impression of formality, but that doesn’t always mean a bad thing. Similar to white, you can use a grey background to make other colours stand out.
Grey commonly combined with brighter accent colours. Dropbox use grey to highlight CTA buttons.
Blue is the most popular colour for both men and women. Males are significantly more likely than females to prefer variations on the colour of blue.
The most unpopular colours for both men and women are brown, orange, and yellow. Grey is one of the least favourite colours for females, and purple is one of the least favourite colour for men.
Most people think that the universally-loved female colour is pink, but it’s not. Only a small percentage of women choose pink as their favourite colour. Thus, while pink may suggest femininity in colour psychology, this doesn’t mean that pink is appealing to all women, or even most women.
Colour takes centre stage in many brands’ philosophy of design. Every colour that we see implies something, either directly or indirectly, that helps drive our perception of individual brands. Some colours go beyond their brands, defining entire industries, such as blue for the travel industry, green for health, and red for fast food.
However, when it comes to selecting a colour scheme for your brand there’s no hard and fast rule. While some companies choose to use their industry’s common colours, others have found that going against traditional expectations can be a very effective way to make an impression. For example, Virgin America chose to go against the grain with the design on their site and in their app. While it might not be what users would expect from an airline website, it certainly stands out.
Thus, choosing unexpected colours can be an effective way to make users remember your company.
HubSpot shared a test that showed how a change in the colour of a CTA button made a drastic impact on signups.
Performable’s A/B test for button colour.
Even though they originally predicted the green button would perform better, the red button resulted in 21% more clicks. At the same time HubSpot warned their readers that test results are subjective (their audience likely preferred the red button because it was the only colour that stands-out on the page).
The colour of the button has little to no effect on it’s own. What works on one site, doesn’t necessarily work on another. Saying that one colour converts better than another is simply wrong because there is no universal best colour. However, there are rules of thumb that can help you use colour to your advantage. One of them is the psychological principle known as the isolation effect which states that an item that “stands out like a sore thumb” is more likely to be remembered.
‘Get Evernote, It’s Free’ call to action button is buried because it has the same colour as a background. The button is simply gets lost in the design – users can’t see it.
Thus, it’s essential to changes a visual hierarchy of the whole page to make a call to action stand out. Colour contrast is important because if the button colour does not get the attention of the potential customer you don’t get the sale/sign-up.
The CTA button colour that really grabs people’s attention is the one that contrasts from the colour scheme of the rest of the page.
Design isn’t just about looking pretty — it’s about functionality and usability, the two principles that are arguably the most important to any UX designer. Colour is a tool that can help guide the eye and good UI uses colour to direct not just the user’s attention, but also their interactions with the entire experience.
Applying colour to a design has a lot to do with balance and the more colours you use, the more complicated it is to achieve balance. Using too many colours is a common design mistake, it can be like trying to convey a million feelings and messages at once, which can confuse the person viewing your design.
Too many different colours look bad, no matter which colours are used.
There is a simple interior design rule 60–30–10 that works well for many designs. It’s a timeless decorating technique that can help you put a colour scheme together easily. 60% is your dominant hue, 30% is secondary colour and 10% is for accent colour. This formula works because it creates a sense of balance and allows the eye to move comfortably from one focal point to the other.
People see colours differently. Approximately 8% of men and 0.5% of women are affected by some form of colour blindness. Red and green are the colours most affected by colour-vision deficiency. Avoid using these colour combinations as the only way to distinguish between two states or values.
Let’s examine one common case: have you ever gotten an error message when you’re filling out a form that says something like, “The fields marked in red are required”? While it might not look like a big thing, this error message combined with a form in example below can be an extremely frustrating experience for people who have colour-vision deficiency.
The form field design relies only on red and green to indicate fields with and without an error. Colour blind users cannot differentiate the fields highlighted in red.
As said in W3C guidelines, colour shouldn’t be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. For form mentioned above designer should give more specific error messages like, “The email address that you entered is not valid” or at least provide an icon near the field which requires user attention.
WebAIM Color Contrast Checker helps you check your colour combinations.
With Adobe Photoshop, designers can proof images with Colour Universal Design to ensure that graphical information is conveyed accurately to people with various types of colour vision impairment, including people with colour blindness.
If you plan to give your conversions a serious lift you need to do conversion research. Serious gains in conversions come from analysing what your users really need, the language that works for them, and how they want to buy the product. The right design decision is the one that your users think is right.
Really interesting article, I am going to print it off and show one of my clients who needs a little nudge in the right direction!