By Jeff Kline

Blog

7 Website Color Scheme Best Practices

Thursday, August 13, 2015

Color has a powerful effect on people. Warm colors like red, orange and yellow can be energizing, and light shades of blue are often described as calm and serene.

While there are many generalizations about how color affects the mind and drives action, different people perceive colors in different ways. Purple is, in general, very appealing to women, but not so much to men. And depending on where you are in the world, the color red can represent celebration, mourning, anger or good luck.

When choosing a color palette for your nonprofit website, there’s no magic formula of colors that will drive success, but there are some best practices to follow! 

 

7 Best Practices for Choosing Your Website Color Palette

These best practices will help you make a strategic decision about the perfect color scheme for your website.

 

1) Use your brand colors

The first step to choosing a website color palette is to consider your brand. If you have a specific branding color that you’re happy with, then that’s the obvious choice for one of your website colors.

The Association of Chamber of Commerce Executives has distinctive brand colors, making red and blue the obvious choices for the website color palette.

ACCE brand colors

 

2) Consider common color associations

Think about the emotions and attitudes associated with different colors:

  • Red: energy, power, passion
  • Orange: joy, enthusiasm, creativity
  • Yellow: happiness, intellect, energy
  • Green: ambition, growth, freshness, safety
  • Blue: tranquility, confidence, intelligence
  • Purple: luxury, ambition, creativity
  • Black: power, elegance, mystery
  • White: cleanliness, purity, perfection

However, it's also important to understand that the same color can have different meanings to different people. Entrepreneur has a great article on the misconceptions around color psychology.

 

3) Cater to your target audience

If your target audience is mostly women, use colors they prefer. Kissmetrics shares the results of a study by Joe Hallock in which the top three colors chosen by women to be their favorites were blue, purple and green. Top colors for men? Blue, green, red and black.

It turns out both genders like blue, while women and men are very divided on purple.

Favorite colors by gender

 

4) Consider your industry and competition

You should also think about your industry, and the colors that are most often associated with it. For example, environmental organizations will often use green, while breast cancer organizations always use pink (like The Cancer Fighters website shown below). By choosing your industry’s typical color, you can allow your organization to quickly be associated with that industry.

the cancer fighters website

On the other hand, if you want to differentiate yourself from your competitors, choose a completely different color palette. While many Jewish Community Centers opt for a white background and bright colors, the JCC of Dallas switches things up with a dark background and muted accent colors.

Dallas JCC website

 

5) Add an accent color.

The best website color palettes follow the 60/30/10 rule. One color is used on 60% of the website and a secondary color is used on 30% of the site. The final 10% should be an accent color—something that contrasts with the two main colors, and is used to highlight important content on the website.

On the Eye Heart World website, the yellow-orange accent color is used to draw attention to the shopping cart and other calls-to-action.

Eye Heart World website

 

6)  Make sure your text and background colors contrast

To make your text easy to read and to avoid causing eye strain, there must be a high contrast between your text color and your background color. Choose either a dark font color on a light background, or light text on top of a dark background.

text and background color contrast

 

7) Use online tools to discover or create your color palette

The Adobe color tool makes it easy to create professional-level color palettes. Experiment with different “color rules” and use the pointers on the color wheel to create different combinations. You can also explore color palettes created by other users.

adobe color cc tool

For more resources, check out this list of 28 tools for choosing a color scheme

 

***

When the time comes to update your website, I hope you'll take these color best practices into consideration. In addition to choosing your website color palette, it's also important to think about how you'll use your colors to drive action on your website. Follow these best practices, and you'll be on your way to website success!

 

Up Next: Web Color Trends of 2015

In our next blog post, we'll discuss the most popular web color trends that have emerged in 2015. Stay tuned for an inspiring blog post on the latest ways to use color on your website!

 

Download your free Website RFP Template

 

Comments

comments powered by Disqus

Need Support?

Submit a Ticket
Back to top
Ready to Get Started? Contact Us for Pricing