Color Theory and Website Design: What You Need to Know

Many beginning website designers approach color selection haphazardly. Love red? Why not throw a little over here… Maybe you think yellow looks good next to red? How about a border of yellow around your navigation panel…

Unfortunately, paying so little attention to color selection does a huge disservice to your company and your website, as it prevents you from taking advantage of one of the most potent psychological triggers around. You see, you might not be aware of it, but different colors tend to evoke different feelings subconsciously. By understanding basic color theory, we can select colors for our websites that are most likely to bring about the actions we want our visitors to take.

But first, just to clarify. For the purposes of this article, I'm not talking about choosing web safe colors. Although color display was a major concern back in the 1990s, computer monitors have come a long way in terms of the percentage of the color spectrum they're able to display accurately. If it's something you truly feel you need to address, you can always run your final selections through a rendering tool to see how they'll appear on most browsers. But in 99% of cases, it's not worth worrying about.

Instead, what we're going to talk about here is the emotional and psychological impact of different colors and how you can use these associations to your advantage. Let's get started!

First, we need to review each of the major color groups, as well as the subconscious perceptions we associate with them.

Black – The color black has some interesting connotations. It's a somber color, and people frequently associate it with evil or trickery. However, it's also a color that represents authority and intelligence. For example, think of Ph.D. graduates in their black robes or of the dark-rimmed glasses worn by librarians, professors and other astute professionals. Consider black when you want to convey the seriousness of something on your website.

Red – Red is an energy color that subconsciously reminds us of the heart pumping rich, red blood. Imagine yourself surrounded by red – does your heart start to beat a little faster or do you feel more excited or anxious than usual? Red will do that to you. It's great for attracting people's attention, but should be used sparingly so that its effects aren't muted by overuse.

Yellow – The color yellow is another energy color, but instead of provoking anxiety, it typically brings about feelings of cheerfulness or optimism. Yellow is a happy color that makes us think of sunshine, dandelions and other positive forces in our lives. Like red, it can bring about powerful emotions and must be used sparingly to that the sensation isn't deadened.

Orange – Orange is often seen as a wild and wacky color. It's flamboyant and in-your-face bright in a way that's associated with energy, rebirth and ambition. Unlike other colors, which can convey a range of feelings depending on their shade or hue, orange is almost universally bright and vibrant – no matter what its saturation.

Blue – Blue is the color of calm, of focus and of rational thinking. In fact, many people report feeling more focused and productive when working in a room with blue walls, as this naturally peaceful color helps to induce a sense of well being and restfulness. Some studies suggest that being exposed to certain shades of blue can actually lead the body to release calming chemicals, which has powerful implications for the use of this color in website marketing.

Green – The color green is another interesting one. Like yellow and blue, it's associated with natural elements (it is the earth to the blue sky and the yellow sun). But while it can be calm and soothing in the right tones, green is also associated with a wide variety of items and concepts, including jealousy, fertility, good luck, conservation and – of course – money.

Purple – Most people are aware of the association between the color purple and wealth, as the royalty of old frequently wore robes dyed with this rich pigment. However, it isn't as widely known that this association remains in our subconscious minds, leading to a continued link between different shades of purple and the ideas of money, prosperity and richness.

White – As the purest color in the spectrum, white is frequently associated with symbols of purity, cleanliness and safety. In some contexts, it can be used to represent potential (as in the use of white boards and blank slates, both of which are free and clear to receive new ideas).

If that all sounds a little hokey, don't worry – it's time to get out of the theoretical part of our discussion on color theory and move forward with how to apply these associations to your website! Let's look at a few examples…

Suppose you were building a website that sold a very high priced information product. While you certainly could build the page based on the colors used elsewhere on your site or the colors of your logo, why not experiment to see if elements of color theory could improve your conversion rate?

For example, you could build the background of your site in a warm blue color to artificially induce a sense of calmness in your readers to help counteract the feelings of anxiety associated with spending large amounts of money at once. In the sections where you attempt to demonstrate your authority or overcome objections, you could use black to create a sense of patrician reassurance.

Finally, if there was a benefit you really wanted to highlight about your product, you could draw attention to this part of your sales copy with a red arrow to create a sense of urgency and excitement. If this sounds familiar, it's because the motif is frequently used in long form sales letters for this exact purpose.

Or, let's look at another example. Say, in this case, you aren't trying to sell something – instead, you're trying to build an authority blog in a given niche. If your site was built in the financial industry, the best possible color combination seems obvious – green, the color or money, and black, the color of authority. If you were writing a lifestyle design blog based around the idea of freedom and self-expression, creative colors like yellow and orange would resonate best with your content.

Of course, it's worth remembering that these are general rules for individual colors. Different people will respond to colors differently, and combining colors together can lead to completely different emotional responses than each color creates on its own.

However, color is incredibly powerful on a subconscious level, which makes it worthy of further study and experimentation on your website. As you've probably guessed, the best way to test the power of color on your site's conversion process is by split testing different versions of your site using multiple color variations. By carrying out these tests, you'll be able to see the true power of color theory in action.

Image: glovsky225

We help great companies grow their revenues

Get Your Free Marketing Consultation

Write for us

Think you've got a fresh perspective that will challenge our readers to become better marketers? We're always looking for authors who can deliver quality articles and blog posts. Thousands of your peers will read your work, and you will level up in the process.

Contribute to our blog
Back to Top