Join the We Blog Better Insiders Email List!

Sign Up

How to Use Colors to Increase Your Website’s Conversions

color_wheelNumerous scientific studies have proven that colors affect us in various ways. Merchandisers have been using colors cleverly since the 19th century, and in the 20th century artists such as Andy Warhol and Salvador Dalí created window displays.

Today, for many businesses, their website is their window display. In high street retail, studies have shown that shoppers prefer to look from left to right, and enter the store by a door located at the right of the display.

However when it comes to websites, the decision to enter happens in the blink of an eye. A study carried out at the Carlton University, Ottawa, reveals that it takes visitors a 20th of a second to decide if they like a site or not.

How Important Is Color?

Of course there are many important elements involved in creating a great, trustworthy website, but colors play a huge role. In fact 85% of shoppers have revealed that color is their primary reason for choosing to buy a particular product. 52% of online shoppers have stated that they didn’t return to a website because of its overall aesthetics.

The top issues that prevent online shoppers from buying on websites are:

  1. Poor design
  2. Poor navigation
  3. Speed of website

Color also improves comprehension by 73%, learning by between 55-68% and reading by 40%.

Scientists have discovered that humans experience actual physiological changes when exposed to various colors. Very simply, color is light – light is a source of energy. Each color evokes its own set of reactions, which can also be influenced by cultural conditioning. This needs to be considered when you evaluate your target audience.

How To Choose Color Combinations To Increase Your Website’s Conversions

The ideal time to choose color combinations is at the beginning of building your brand. However if you have an existing brand, that you realize is not in tune with your target audience then it could be better to re-brand.

The main ingredients that will influence your choice of colors are your product or service offerings and your target audience. You need to ask the following questions:

  • What subliminal messages do I wish to communicate about my offerings?
  • Who are my target audience?
  • How can my website gain their trust and positive attention?
  • How do I want my target audience to feel when they are visiting my website?
  • How can use of color encourage them to follow the necessary steps that result in conversions (leads/sales etc.)?

The Effects Of Different Colors

Find out about the different effects of various colors and how some also relate to chakras, which are wheels of energy, in the human body, according to some Eastern belief systems.

Red (Primary color)

Passionate and intense, red is sexy but also dangerous. It stimulates the appetite but can also be a warning. It is associated with the base chakra, which is located at the base of the spine. The base chakra relates to human survival, grounding, security and courage.

Red Works Well For…

  • Red works well in restaurants or food or drink related sales, to stimulate the appetite.
  • It can be used effectively to sell any product/service that aims to make the customer feel sexy or powerful.
  • If you want to evoke powerful emotions, red is the perfect color – however you may need to balance it well with other colors, depending on the target audience.
  • Red increases the heart rate and is frequently used to encourage impulse shopping
  • It creates a sense of urgency when there is a special offer or sale

Be Careful Of Red..

  • Don’t use red if your products/services relate to any aspect of death, as it could symbolize the negative aspects of blood, war and danger.
  • It’s better not to use red, or to use it sparingly, when you don’t want to evoke aggression in your potential customers.

SIA Aperitivos

siaThis website has the perfect amount of red to stimulate the appetite a little. It links to our survival instinct, triggering the imagination to consider having our own brand. The color red has been used very positively, without creating aggression or signalling danger.

Yellow (Primary color)

Yellow stimulates our mental processes, confidence, youthfulness and optimism. It is cheerful and warm. It is attention grabbing and stimulates the nervous system. Too much yellow, however, can be straining on the eyes. It is associated with the solar plexus chakra which is between the sternum and navel. This chakra is about self-esteem, will, confidence and personal power.

Yellow Works Well For…

  • Yellow is a great attention grabbing color.
  • It works well in childrens’ products, but is known to make babies cry.
  • It is effective in certain amounts on any website that wishes its potential customers to feel youthful.
  • Yellow helps with self-esteem, so consider using it with this in mind.
  • Use this color in any situation where a stimulated mind is a good thing.

Be Careful Of Yellow..

Yellow is a flexible attention grabber – be careful not to overdo the use of yellow, so as not to strain the eyes of your pòtential customers.

wake-1024x742I love the use of yellow in Wake Somebody Up; both the shades of yellow and the clever design. It is youthful, cheerful and communicates the message of a brand new, positive day all at the same time. Notice also the designer’s strategic use of red.

Blue (Primary color)

Blue instills trust and confidence. It is a calming color that encourages us to feel that this is a responsible entity. It encourage creativity and honest communication. Sky blue is the color of the throat chakra. This relates directly to communicating the truth, to finding your voice and self-expression.

Blue Works Well…

  • Blue works really well in the corporate world, as each company needs to be trusted before clients will do business with them.
  • It is relaxing and calming also, so it works effectively across all sorts of industries and offerings.
  • It should really be used in communications to some extent – just think of Twitter, Facebook and Linkedin.

Be Careful Of Blue..

  • Blue runs the risk of being too cold, depending on the shade and how much it is used.
  • It is also considered to curb the appetite, so use sparingly in food or drink offerings – just enough to instill trust.

feedstitch-1024x244Feedstitch pulls data feeds from around the web to stitch them together into a single, powerful feed. The site is about communication and trust, so the use of blue is perfect. It is well-balanced with the use of many other colors also.

Green (Secondary color – a mix of blue and yellow)

We associate green with nature and fertility. It is a calming color which brings harmony. Green represents growth as well as peace. Green is associated with wealth, money and envy. It can help with depression. It is associated with the heart chakra which is located in the middle of the chest. This chakra is about unconditional love of self and others.

Green Works Well…

  • The color green is excellent for any websites that are connected with health, well-being, green living, fertility, relaxation and nature.
  • Green works well also in interior design, as it is soothing and harmonious.
  • Use green in varying amounts on any site where you want your potential customers to feel in a good space regarding love and self-love.

Be Careful Of Green…

  • There are some shades of green which can be a little sickly or offputting, if they have too much yellow.
  • Green is associated with envy in some cultures, so be careful of this – don’t over use it on sites which relate to romance or dating.

mintMint is a free tool to help people organize and categorize their spending. The site uses green in a fresh, harmonious way. There is enough green to give a positive feeling about handling money. The logo is very simple, but really clever. The mint leaves and wording are in a classy shade of green, which gives the feeling that by using this tool, the visitor will have a fresh start, that may even lead to him being minted!

Orange (Secondary color – a mix of red and yellow)

Orange is enthusiastic and warm. It stimulates the appetite and our enthusiasm. It is about creativity, fun and enjoyment of our senses. It is a confident color. However it can lean towards danger and aggression when there is a lot of red in the shade of orange. It is the color of the sacral chakra, which is located in the area of the reproductive organs. This chakra is about creativity, sexuality, pleasure, sociability, movement and enjoyment.

Orange Works Well…

  • Use orange if you want your customers to feel sociable.
  • Orange is very effective for anything that relates to creativity.
  • Orange can be used to encourage impulse buying.
  • It works well on buttons or banners that are calls to action.
  • Use orange for sports and activity themed websites.

Be Careful Of Orange..

  • If the shade of orange is quite red, be aware that it can symbolize danger or trigger aggression.

JulianaJuliana Bicycles uses orange beautifully. Different hues sparkle with the feeling of fun movement, sensual enjoyment, confidence and pleasure.

Purple (Secondary color – a mix of red and blue)

Purple is the color of spirituality and royalty. It is associated with wealth and luxury. It is a color used to make brands appear to be wise, imaginative and intuitive. It can also enhance mental stability. Violet is associated with the crown chakra. Although similar to the color purple, violet can be found in the visible light spectrum, whereas purple is a combination of blue and red. This chakra is about connecting to higher aspects of consciousness, the higher self and spirituality.

Purple Works Well…

  • Use purple if you want your website to feel luxurious.
  • It works well for any offerings which have the potential to stimulate the imagination.
  • Use it to evoke feelings of wisdom.
  • Try the color purple to make your target audience feel that your product/service is intuitive.

Be Careful Of Purple…

  • Purple is a poweful color, so be aware of using it in a balanced way.

swThe graphic designer, Sarah Wu, has blended some different shades of purple to get a luxurious, creative feel on her site.

Different Shades And Color Combinations Can Improve Or Dis-improve Your Conversion Rate

How you combine colors and what shades they are also plays a huge part in hitting the nail on the head. Once you feel you have thoroughly analyzed your offerings and audience, try A/B testing with different color combinations and shades to see which bring the best conversion rate.

The use of white brings a sense of freshness and new promise. White reflects all other colors. Black is stylish, sophisticated and mysterious. Both can be very powerful when they are blended well with other colors.

There is a useful tool which has a color matching algorithm with some different matching options. Try the Color Explorer Color Match tool.


Infographic by WebpageFX

The author, Jacqueline de Burca, owns a search marketing and web design agency. She has studied color therapy and has had a special connection with colors for as long as she can remember.

Image Credits:

0 comments… add one

Don’t Be Shy » Leave a Comment!