color-eyeHere’s my guess, you thought colors were about making things pretty?

Well they can be, but why settle when you can use them in such a way that it creates a certain unspoken language within your website’s or blog’s design.  It can guide people to areas, create a certain feel or even lead to more conversions.

Colors can lead to more Conversions? Yep, that’s email subscribers, sales, leads or anything you want it to be.

With the right colors combined with the use of ‘passive’ and ‘action’ colors you can increase your conversions.

Sound magical?  Nope, it’s just a little bit of science and psychology.

Different colors represent different things

Different colors work in different ways once viewed by someone.  They can elevate certain emotions, give your website a certain personality and change someone’s whole perspective of what they read or look at in front of them.

Imagine a sterile, blue technology website and exchange that for a green, earthy toned website -you’re naturally going to assume the technology site with the earthy tones sells more environmentally friendly products.  Or if a website has a black background and white text, it (generally speaking) won’t generate as much trust as a website that has a lighter color scheme with a white background and black text.

Obviously, nothing is set in stone as it’s all just one aspect of design, how you use those colors will go a long way.

First of all, pick the right colors for your website!

Ok, there isn’t really a right or wrong, but certain colors will be far more effective for you niche.

What you’ve got to do is figure out the main connection between your website and the reader. If you run a fitness website, you may want to create an energetic feel with bright energy colors or perhaps look more professional and up market with neutral colors and a classical typeface.

Or maybe you run a horticulture website by using those earthy tones we mentioned above?

Either way, you want the colors of you website to represent something relevant to your main topic.

So here’s a quick look at some major colors in the spectrum and what they mean:

Red

red

The first thing I think of when I see red is Danger, Stop, Anger, and a fiery energy that stands for a high level of intensity.  But it also represents temperature, warmth, desire and impulsiveness.

Red is an energy color. It can connect with intense emotions and passionate action, so it’s terrific for use in a number of ways, especially in a highly driven ‘fight or flight’ mentality – sports, overcoming barriers or creating a sense of urgency. It can be a powerful action color – but more on that later!

Orange

orange

Orange has a similar energy to red only with the anger and danger watered down a bit!

It carries that same ‘energy color behaviour’ but with a lighter sense making it more suitable for enthusiasm, fun, youth and comfort. Orange is a popular color these days because of the energy represents.

Yellow

yellow

Yellow is the most attention grabbing color to the human eye.

That same enthusiasm and youthfulness that orange has is also a factor with Yellow.  Yellow represents optimism, sunlight, curiosity and extremely high energy.  Yellow is so intense that it can have a negative effect, especially when overused causing feelings of frustration.

It’s a perfect action color as it stands out against almost anything, so use it sparingly!

Green

green

Green is most associated with nature (unlike Hulk above).

This ‘nature’ theme creates a clean and healthy look  that has life and energy.  It also represents money and can have a stress relieving effect.  Take green into the ‘lime’ end of the spectrum and you can make it a very high energy color that is quite popular.

Blue

blue

While many of the above colors fall into the ‘warm’ range of colors (green is a little on the fence), blue is without a doubt a ‘cool’ color.

Men love the color blue.  It creates a peaceful, clean and sterile look perfect for technology.  It also represents trust and honor as well as success. It’s not a high energy color but can be used in a similar way when using a much brighter blue in the spectrum.

Pink

pink

Pink is a very effeminate color that represents innocence, youth, romance, love and has a calming effect.

Different levels of Pink (dark/light, bright/dull) make Pink a more flexible color.  It is mostly associated with females and of course – Barbie.

Purple

purple

Purple has a mystical energy feel to it as it combines the natural elements of blue with the ‘sterile’ nature backed off a bit with some pink.

It relates quite easily to mystery, fantasy, dreaming and imagination.  When used correctly it can also create a feeling of luxury, power and royalty. It’s also a ‘cool’ color.

Brown

brown

Now we’re heading more toward the neutrals.

Brown has an earthy nature to it as it connects with the ground and dirt – which can also double for a representation of ‘dirty’ or unclean themes.  But used well it can be a sophisticated color that is relaxing, comfortable and warm due to it’s neutral nature.

Gray

gray

As Neutral as Neutral can get get – grey is a perfect ’emotionless’ color that can be very serious and conservative.

Greys (along with white, black or brown) can be used to create space between stronger colors and make them more bold by comparison. It, like blue, is also perfect for technology and scientific themes.

White

white

White is a pure and innocent color but also represents nothingness and is perfect for use in design. It can also be very positive.

‘White space’ is a powerful tool to give design a bit of breathing room and keep elements separate.  Like grey above, its helps support stronger colors very well.

Black

black

Black is very elegant and powerful.

It can be a very negative color and create feelings of misery, death and evil.  When misused it can destroy the trust of a design – too much black not well designed uses it’s negative influence to look ‘shady’ and untrustworthy.

Designed well, however, black can be perfect for sophistication and luxury.

Mixing Colors

Mixing different colors also creates different effects outside of the above colors.

You’ve heard me mention Earthy tones like green and brown, but you can also mix in a touch of warm colors with cool colors (or vice versa) for a bit of diversity.

Mixing colors can create a mixed feel of the colors above – a sterile website with nothing but dull blues and neutral colors can be brought to life by adding a little green – or you could ad some orange to add a little energy.

Another way to find appropriate color mixes is to look at your product (if you’re selling one) and pick colors most associated with it.  For example, bakeries are warm and have a lot bread and pastry – so stick to warm colors  and creams/yellows if you want to follow that guideline.

You can add more trust to your design by using greens and blues.

You can add a sense of urgency and action with a little red and orange.

Make things more serious by dulling the colors and going with neutral whites, grays and blacks.

You can create the right ‘feel’ by really thinking out your color usage.  But there’s other ways you can use color to your advantage.

Convert & Sell with Passive & Action Colors

This is where you can influence more people to subscribe or buy….

What you’re basically doing here is creating two separate and highly contrasted color groups – once group is the Passive Colors and the other is the Action Colors.

I use them right here on this website.

As I write this post it’s 2014 (for you future readers), so the current design has very neutral color, lots of white, blacks and a tiny use of cool colors – those are my passive colors.

My action colors are yellow and orange – warm colors.

So I use warm, high energy colors to highlight areas where I want people to take action. Not only do I want action in those areas, I want them to be excited and feel energetic because I offer information people can ‘act upon’ in those areas.

It’s a little bit of outstanding warmth against a duller, more neutral backdrop. These areas are highlighted and harder to miss when you navigate through my website.

This is the reason why my links are orange – so people subconsciously know if they click there (performing an action), they’ll be taken to another page.

You can make use of action & passive colors by using other contrasting colors like:

  • Dark against light
  • warm against cool
  • bright colors against gray-scale
    or vice versa on the above

As long as it stands out on the website against everything else, then you’ve got an action color.

A few more examples?

Derek Halpern of Social Triggers makes use of action colors and he’s a huge advocate of them.  He uses the color purple to influence action in his feature box, side bar and links.  Although his approach is not very aggressive, it definitely works and Derek ‘s email list is always growing.

Social Triggers Action Colors

Green Exam Academy drives your eye to their E-book and other action areas using orange and read against the the light cool color scheme.

green exam academy

The Huffington Post is mostly a neutral (passive) colored website, but uses various colors as action colors.  Some pages it’s green, others blue, and some elements are red to really stand out above the the other action areas. You’ll notice the navigation is a solid color (green below) highlighting the entire area.

huffingtonpost

Google – uses color in the Logo and action areas – also against a neutral backdrop. Notice how Google makes the search results the same color (slightly different shades of blue) as the search button? this links the results with the search field!

Google

The same with Facebook – noticed the blue bar at the top full of actions, the blue links and buttons.  Again there is mostly neutral color as the passive colors.  Sorry, no screenshot but you could take a look yourself here – don’t forget to like my page while you’re at it ;)

You can see how far this whole thing goes.

From bloggers to the billion dollar websites that quite literally piggy-back the internet’s masses of people, their websites and information – the majority uses colors in the psychology of their design.

Maybe it’s intentional maybe it’s not, Either way it is highly effective and seemingly prioritized in their designs.

Start Implementing these into your website

It works.

From big bloggers to the world’s most dominant websites – they use color to help drive action.

Follow their lead, if these big websites are making use of these tools then you are robbing yourself and accepting second place by ignoring it.  Find the right color that appeals to your audience and niche, mix them up in a way that separates the passive from the action colors when customizing your theme.  Test it out!

If you have a lot of traffic to play with, I can’t wait to see your personal results, so let me know how you go!

If you found this interesting or useful, please do me a huge favor – subscribe to my email newsletter below!  You’ll get free tips and updates and access to my free E-course on how to build a website from scratch.

Thanks for reading!