How to Benefit from Color Psychology in Your Website Design

How to benefit from color psychology in your website design

Without researching the topic of color psychology, you already know that certain colors can spark different emotions and meanings. Your favorite colors can be driving factors behind the way you decorate your house, the clothes you wear, and even the food that you’re most drawn to.

Color choice is significant in branding, marketing, and web design, too. In fact, color can be up to 85% of the reason people decide to buy from a company. Color can build or demolish brand trust, increase or destroy customer loyalty, and form 90% of a customer’s opinion of a brand within just 90 seconds.

So when you set out to either create your first website or redesign an outdated one, it’s no surprise that your web designer will quickly ask about your preferences regarding website color. Before you spout out an answer based on your personal favorites, read through our tips for making smart web design decisions based on the psychology of color.

Step 1: Consider the meanings associated with each color

To a certain extent, you may already understand the meanings associated with common colors. You may be drawn to the color blue when you need to calm down, while something about the color orange may not seem appropriate for formal business documents.

There's a ton of research on just about every color out there

It turns out that a ton of research has been done to evaluate how customers perceive colors, especially when those colors are tied to a brand. Some studies claim that different colors can attract different kinds of buyers and that color choice can even affect shopping behavior.

While different colors can have different meanings in different parts of the world — and perception of color is so subjective anyway — there are common themes across a variety of studies concerning color psychology. Below is a helpful cheat sheet that breaks down some of the most common perceptions:

A handy cheat sheet about the psychology behind common colors

Some of these characteristics may explain why certain colors are more popular in particular industries. For example, blue is a color often used by banks, while red is highly recommended for brands involving dating services. Meanwhile, a customer who visits a bright yellow website to read articles about relaxation and deep breathing may feel that something isn’t right — even if they can’t explain why.

Other fun facts for these colors include:

  • Blue naturally suppresses appetite, so using it on a food-based website may be off-putting to visitors. Many people suspect that the reason for this is that there aren’t many everyday foods that are blue.
  • Yellow is fun and playful, but you have to remember that it’s also used for warning signs. Too much yellow can heighten emotion too much, but yellow in small doses can be the perfect solution for calling attention to a specific call to action on your website.
  • Green has such strong associations with nature and being environmentally friendly that the color alone can send a message that a company is ethical. Also, green is becoming more and more popular since it offers the relaxing qualities of blue and the energizing effects of yellow.
  • Orange has been called “the new red,” but it’s a tricky color to work with. It’s a favorite among kids and can have connotations of being cheap, so incorporating it into your website that’s targeted at adult buyers should be done with caution.
  • White has a ton of benefits, but it comes with a pretty important drawback: It can be difficult on the eyes when true white (#ffffff) is paired with true black (#000000). A tactful solution is to use an off-white like ivory, which offers the same benefits as white but is viewed as a lot more comforting.
  • Black is certainly one of the most commonly used colors, but be careful as it has many conflicting associations — for example, it’s edgy, but it’s also corporate, formal, and traditional. The good news is that both black and white have so many hues between them, so using darker and lighter shades can offer the same advantages with fewer drawbacks.
  • Red, like yellow and green, is recommended in small doses. Since it so strongly promotes action, many web designers argue that is the best option for buttons and other calls to action. Research doesn’t necessarily support this claim, so don’t feel it’s your only option.
  • Purple is an exclusive color in the sense that it will likely draw in female customers but immediately repel male customers. It certainly isn’t recommended for all industries, but for a select few, it can be the perfect choice.
  • Brown is the least popular color for web design. Both men and women dislike it, and it can be difficult to pair it well with other colors. Its positive connotations are dependability and ruggedness, but it takes tact to keep it from looking bland and dark.

By combining your own perception of certain colors with the perception of the typical user, you already have a good foundation for choosing the colors of your new website. But don’t stop there, because effective color choice is about more than just the meanings associated with them.

Step 2: Consider which colors are recommended for your industry

While your business’ goal is likely not to completely blend in with your competition, there are certain colors that just work well with particular industries (and other colors that can send your users running away).

Common colors across industries include:

  • Blue: Medicine, science, utilities, government, healthcare, recruitment, legal, information technology, dental, corporate
  • Green: Medicine, science, government, recruitment, ecological business, tourism, human resources
  • Black: construction, corporate, oil, finance, fashion, manufacturing, cosmetics, mining, marketing, tradesmen
  • Grey: automotive, journalism, sportswear, technology
  • Red: fashion, makeup, food, dating, video games, retail, automotive, hardware, video streaming
  • Orange: drinks, retail
  • Yellow: automotive, retail, food, technology

While these trends shouldn’t restrict you as you choose the colors for your website, they are trends for a reason. The message your company wants to send is likely similar to that of your competition, so choosing a color that’s a complete curveball for your industry may hurt (by sending the wrong message to customers) more than it can help (by making your brand stand out from your competitors).

Step 3: Consider your target customer and their preferences

Step one also included a bit of information about color preferences across genders, but did you know that there have been pretty in-depth studies conducted on this very topic? It’s more than just “women like purple and men don’t.” There’s actually a ton of interesting information about genders and color preferences:

  • The favorite color of both genders is blue (with 57% of men and 35% of women saying it’s their favorite color).
  • Men’s favorite colors are blue (57%), green (14%), black (9%), and red (7%). Fewer than 5% of men said that orange, yellow, brown, grey, or white was their favorite color, and 0% of men said purple was their favorite color.
  • Women’s favorite colors are blue (35%), purple (23%), green (14%), red (9%), and black (6%). Fewer than 5% of women said that orange, yellow, brown, grey, or white was their favorite color.
  • Across both genders, orange and brown are the least favorite colors, with 22% of men and 33% of women disliking orange and 27% of men and 20% of women disliking brown.
  • Overall, men prefer bright colors and women prefer softer colors.

Between these two images, men may prefer the brighter one and women may prefer the subdued one

Though these two images show similar content, men may prefer the top image (with brighter blues and more pops of green) and women may prefer the lower image (with a calmer, more subdued tone throughout).

But your target demographic can be defined by much more than gender. There are also color psychology-related statistics regarding age, class, education, and even climate. Check out these interesting facts:

  • Young children prefer brighter colors of red, yellow, blue, orange, green, and purple. They also prefer solid blocks of colors over patterns.
  • Teenagers often prefer black and are open to more graphics and sophisticated colors than their younger counterparts.
  • In general, most adults prefer subdued colors and their color preferences are set in stone.
  • Adults older than 65 tend to dislike yellow and prefer blue, pink, and green. They tend to prefer calmer hues over bright, stimulating ones, and purple becomes even more popular among women the older they become.
  • People in the working class tend to prefer bright variations of the primary and secondary colors. Meanwhile, wealthier people tend to prefer more complex colors, often preferring tertiary colors with a variety of shades.
  • The more educated an individual is, the more sophisticated their color choices usually are. Well-educated people tend to prefer tertiary colors, while less educated people tend to prefer primary and secondary colors.
  • People tend to prefer colors that duplicate the colors relating to their climate. People from tropical climates respond best to bright, warm colors, while people from colder climates prefer more subdued colors.

Now you can combine your personal color preferences, the emotional meaning associated with colors, the common colors used in your industry, and the preferences of your target demographic to build a rather complex profile. This can be good news for those of you who were reluctant to blend in with your competitors — even if you’re in the same general industry, the specific demographics of your target market can lead to some differentiation between your companies.

Step 4: Remember that what matters more than the colors you choose is how you combine them

At the end of the day, two websites that use blue and white as their main colors can look and function completely differently. Color psychology involves more than just picking that one color you want to use to represent your brand — it involves factors like color schemes, white space, and strategic placement of particular colors, providing a wide spectrum of variety even with the same key color.

Many web designers recommend that each website has at least a background color, a base color, and an accent color. Many also recommend what’s called the 60-30-10 rule, where you choose three colors and use one 60% of the time (as the dominant), another 30% of the time (as a secondary), and the third 10% of the time (the accent). Take, for example, calls to action. Bright primary colors, such as red, green, orange, and yellow are the highest rated for use on website calls to action. Not all of the colors in this list will pair well with the same dominant and secondary colors in a website’s color scheme. If you think back to elementary school and the color wheel, you’ll remember that you can evoke all sorts of different feelings by pairing colors that are analogous, monochromatic, triadic, complementary, or compound. Before you know it, you have nearly endless color scheme possibilities even after you choose your base.

Then add in components like the amount of white space and the tints, hues, shades, and shadows, and one website with red + white + black can look completely different from another with the same color scheme. And that’s before we even start talking about the layout of the site.

A few final considerations

It’s clear that there’s more to color psychology than simply gravitating to the colors you personally like. It provides so many steps you can take to make smart color decisions on your new website. Even just using color psychology to better understand your target customers can be beneficial as you continue to market to them.

If you’re feeling overwhelmed by all the options available, remember a few key points:

  • Color perception is subjective. While there are broader messaging patterns in the way people perceive color, so much of it is dependent on personal experiences. Just because the statistics point to one set of colors for your target market doesn’t mean that’s the fool-proof choice.
  • If you already have a logo with a set of colors you want to stick to, there are still steps you can take to use color psychology to your advantage without entirely reworking your brand. Simply adding different calls to action and varying the amount of white space on your website can make a huge difference.
  • Finally, it doesn’t all boil down to the specific colors you choose. While colors do have different meanings and certain demographics have their preferences, the most important factor is how a user perceives the color as relating to your brand. Your color choice may evoke emotions that seem completely unrelated to your brand, which can be just as off-putting to customers as their least favorite colors.

And, of course, there is always room for following your gut — even in business. If all the research tells you to choose a color that really feels wrong for your brand, listen to your instinct. You may be surprised by how perceptive your customers can be, and when you choose colors, branding, and strategies that you can stand by, your customers will be able to tell.