How Your Website's Colors Influence Your Click Rate

Smart design and psychology work together to create pages that convert

When you're designing your business website or customising a template, you might struggle to decide which color scheme to choose. This isn't a decision to make lightly, as research has shown that colors have a profound impact on how people feel about brands and how they interact with websites.

You might have read that simply changing the color of a website's call-to-action (CTA) buttons can improve clickthrough rates and conversions, but the reality is a bit more complicated than that. To make sure your website is performing at its best, you need to pick colors that:

• Make your site stand out
• Stir the feelings you want
• Reflect your brand personality
• Enhance the user experience

When your website design checks all these boxes, users will have a more positive experience and will be more likely to make orders and enquiries.

Why does color matter?

Color preference is personal and varies from individual to individual, so how can you choose a website color scheme that pleases everyone?

Web design isn't just about looking appealing (though that's always part of it), but also sending the right messages to your site visitors. The psychology of color is so deeply embedded that most people won't be consciously aware of these messages, but they'll still respond.

Consider these stats about how color influences behavior:

• Color increases brand recognition by up to 80% – more than imagery or typography (University of Loyola, Maryland study)
• Between 62% and 90% of first impressions about websites are based on color alone (University of Winnipeg study)
• 52% of consumers don't return to a website if they don't like its appearance (Kissmetrics)

If you've never really thought about how color impacts on your customers, learning how designers and brands use color psychology could give you the inspiration you're after for your website and your wider digital marketing.

1. Color sets the tone

Different colors evoke different feelings and associations in the observer. Advertisers and big companies are well aware of this, and have been using these associations to their advantage for decades. The more often we see these connections made, the stronger they're reinforced.

The psychology of color can be seen in brand logos and across marketing materials, including websites. By using color strategically, you can trigger the associations you want in your website visitors to make them more likely to engage with your products and services.

Some common color associations you can tap into are:

Red (excitement, urgency)

Looking at red can increase the heart rate and blood pressure, making audiences feel more energised and ready to take action. It can also build appetite, which is why it's used successfully by many fast food brands.

Orange (cheerful, cautious)

Orange is a friendly and inviting color, but it's also a warning that danger may be ahead. This makes it well suited to ecommerce sites that want to encourage impulse purchases, but less sited to brands promoting relaxation and wellness.

Yellow (warm, optimistic)

The color of spring, yellow sets the scene for a fresh start with a clear mind and positive outlook. Red and yellow is a high-energy color combination that particularly appeals to children.

Green (health, nature)

A popular choice for organic, environmental and wellness brands, green also promotes a sense of peace and relaxation that can lead to decisiveness. Green is a common alternative to red and orange for call to action buttons where consideration is required.

Blue (trust, strength)

The most popular color for men, blue is a conservative option that makes brands and their products seem more resilient and dependable. This is used to great effect by social media platforms such as Facebook and Twitter.

Purple (creative, wise)

Historically associated with royalty, purple still has air of prestige that helps to sell luxury goods such as cosmetics. It's also been found to help with problem-solving, making it popular with creative industries.

White (pure, clean)

White is the dominant color of most websites, as black text on white is the easiest to read and white space can be used to break up pages. The absence of color elsewhere can be a bold statement that promotes creativity or can just make a site look boring, depending on how skillfully it's done.

Black (authority, intelligence)

White text on a black background can be a strain on the eyes in large quantities, but effective in smaller doses. Black should be offset with at least one color to avoid being overbearing.

Gray (neutral, practical)

While less urgent and exciting than a colorful site, gray can appear distinguished and responsible. Associated with prestigious brands, such as Apple and car manufacturers, the neutral tone sets the mood for calm and thoughtful interactions.

Other associations

While some color associations seem to be intuitive and universal, this certainly isn't always the case. Many are culturally acquired, which will require researching your target markets if you're marketing globally or to a diverse audience. For example, red is a dominant color in China that has many positive attributions, including happiness, beauty, luck and success.

These connotations aren't set in stone, and every rule has notable exceptions with brands achieving success. You may find that you're not able to use the color you want if it doesn't match your established branding or if there's an issue with competition. In these cases, complementary colors (those that sit next to each other in the rainbow or color wheel) usually share some common traits.

2. Colors help with brand recognition

Your website isn't only a tool to drive conversions. It's also a promotional tool to build awareness of your brand, answer visitors' questions and keep you in their minds. That's why it's vital that your website colors accurately reflect your brand.

This can be as simple as using your brand colors to increase recognition, but this doesn't have to be the case. What works well on a logo doesn't always translate well to a website design scheme. That's why many businesses ditch the familiar for new colors that have the associations they want to put across.

Whichever color or colors you decide to go with, they should be:

Appropriate

Research by Cardiff Business School in the UK found that appropriateness was the most important factor for consumers reacting to brand colors. With color associations being so deeply rooted, your website design should fit what you're promoting or selling to help site visitors feel at ease.

Distinctive

A memorable color scheme will help your audience to associate those colors with you and to develop positive associations with your brand through the mere-exposure effect – the more often they see your branding, the more comfortable they'll feel about your products and services.

Since your competitors likely have established brand colors too, you also need to differentiate yourself to avoid looking like a copycat. If you're using a website template, it's always a good idea to customise the colors and other design features so your site doesn't look generic.

Consistent

Colors should be used consistently across all pages of your website and your other online marketing. That way, customers will instantly know who they're dealing with, even if they land on a deep page of your website or a social media post.

3. Colors affect the user experience

A color scheme that works for other marketing materials won't always work for a website. The user experience should always be the priority when choosing color combinations to enhance website performance.

Accessibility

Is your website welcoming to people with vision deficiencies? Some colors (especially red and green) may be less visible to some users, so using these for key page elements could reduce their impact. Most people are able to differentiate blue text, which is also the color most associated with page links.

Aesthetics

Just like our responses to individual colors, color combinations have a psychological impact too. Studies have found that users generally prefer similar shades used in harmony rather than clashing colors, but palettes with a contrasting accent color are also viewed favorably.

Impact

Using an accent color sparingly will make sure key page elements stand out. This is known as the isolation effect. Reserving a strong contrasting color for calls to action will draw the eye and make these elements pop.

Test your website colors

Web design is an art, not a science. Even if you've arrived at a color palette that checks all the boxes, there could still be a better option out there, or some minor tweaks to your design that could encourage more clicks.

Just because one company increased conversions by swapping a green CTA button for a red one, that doesn't mean your audience will respond in the same way. That's why it's so important to test your color scheme, just as you'd test different headlines, calls to action and other page elements.

Does your website need a fresh look?

Whether you're creating a website from scratch or want to give your current site an overhaul, Limecube's drag-and-drop website builder makes it easy to customise colors, fonts and other page elements for a distinctive appearance that suits your brand down to the ground.