The Impact of Color on Conversion Rates

Image for post
Image for post

Color Psychology

Red

Danger, Importance, Passion

Image for post
Image for post
Red is energetic and impulsive, giving off the impression of speed and power. Both Netflix and YouTube use red as a primary color.

Orange

Confidence, Energy, Optimism

Image for post
Image for post
The orange button in Hipmunk design add a lot of visual interest.

Yellow

Sun, Happiness, Attention

Image for post
Image for post
Yellow is seen before other colors when placed against black. Breitling use this property to focus visitor’s attention on a button “Discover the Entire Range.”

Green

Nature, Growth, Success

Image for post
Image for post

Blue

Comfort, Relaxation, Trust

Image for post
Image for post
Blue is often associated with stability.

Purple

Luxury, Spirituality, Creativity

Image for post
Image for post
Most young people view purple as a happy color.

Black

Power, Elegance, Sophistication

Image for post
Image for post
Black ‘Get started’ button is one of the first thing that catches the eye when enters Squarespace website.

White

Health, Cleanliness, Virtue

Image for post
Image for post
Generous white space creates the spaces around elements in the design to help them stand out or separate from the other elements.

Grey

Formality, Neutrality, Professionalism

Image for post
Image for post
Grey commonly combined with brighter accent colors. Dropbox use grey to highlight CTA buttons.

Gender and Color

Most Favorite Colors

Image for post
Image for post

Least Favorite Colors

Image for post
Image for post
Image credit: Helpscout

Color in Business

The importance of colors in branding

Image for post
Image for post
There’s not a drop of blue to be seen in Virgin America’s app for iOS.

Color and conversion rate optimization

Image for post
Image for post
Performable’s A/B test for button color.
Image for post
Image for post
‘Get Evernote, It’s Free’ call to action button is buried because it has the same color as a background. The button is simply gets lost in the design — users can’t see it.
Image for post
Image for post
The CTA button color that really grabs people’s attention is the one that contrasts from the color scheme of the rest of the page.

Color and Usability

Limit the number of colors

Image for post
Image for post
Too many colors looks bad, no matter which colors are used.
Image for post
Image for post
60% + 30% + 10% proportion is meant to give balance to the colors. Image credits: Facildecoracion

Design for accessibility

Image for post
Image for post
Many colorblind people find it difficult to distinguish red from green.
Image for post
Image for post
The form field design relies only on red and green to indicate fields with and without an error. Color blind users cannot differentiate the fields highlighted in red.
Image for post
Image for post
Additional visual cues and inline error copy helps indicate field with an error.

Conclusion


Image for post
Image for post

Thinking Design

Stories and insights from the design community.

Adobe Creative Cloud

Written by

New Tools for New Creatives. Get all the latest creative apps plus seamless ways to share and collaborate. All right on your desktop.

Thinking Design

Stories and insights from the design community.

Adobe Creative Cloud

Written by

New Tools for New Creatives. Get all the latest creative apps plus seamless ways to share and collaborate. All right on your desktop.

Thinking Design

Stories and insights from the design community.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store