Color Theory and Web Design

There’s a LOT to be said about color theory; its a huge, broad topic that encompasses many ideas, such as color schemes, color systems, the color wheel, perception, cultural meaning, etc. Some of those topics I’ll be saving for another time, but today I’ll be discussing perception and cultural meaning (particularly in Western cultures).

Color can be defined by three attributes: hue (the base color, like red, yellow, green, etc.), saturation (range between pure color at 100% and gray at 0%), and brightness (range between fully illuminated at 100% and dark or black at 0%). In order to create an effective design, you should strive to find a good balance between colors that are complementary (don’t confuse this with complementary colors) and contrasting keeping these three attributes in mind.

Its important to have a suitable amount of contrast between the color your website’s background and text. This reduces eyestrain for the user, making it easy to read all of your website’s content. You can achieve the best levels of contrast between two colors that exist on opposite ends of the spectrum—colors that are opposite on the color wheel and have different saturation and value levels. If your colors lack contrast the user will have to strain to read the text because the colors will be too similar in hue, saturation, and brightness, causing the colors to blend together visually. The two most contrasting colors are black and white, and you’ll find that your best options are to have black or dark text color on a white or very light background.




There are some other guidelines that you should follow when creating your design. One general rule of thumb is to avoid extremely “bright” colors—colors that have high saturation and high brightness—for large sections of your website, particularly as a background color. Even against a duller, contrasting text, bright colors like a fluorescent yellow can be overwhelming and still cause eyestrain. Another tip is to reserve some colors for areas of your website that you want to emphasize. Contrasting colors can help draw attention to certain areas on your page; a red warning note on a white page with black text will certainly stand out. However, the most important tip is to keep your color schemes simple. The content is the most important part of your website, so its extremely important that you consider legibility in your design.

Keeping all of that in mind, now it’s time to create a color scheme appropriate for your website’s content. So what colors would that include?


Source: StockLogos

When you’re picking a color scheme for your website, you’re aiming to pick colors that will encourage your target audience to do a desired action: reading your content, sharing your information, buying your product, hiring your services, etc. Many sources indicate that a poor color scheme can cause a user to hit the back button as soon as they reach your website, so having a design that is pleasing to the eye is key and is meaningful to your content.

Different colors evoke different feelings within us, and you’ll find that each major color often has quite a few meanings and feelings already attached to them. Blue-based color schemes tend to have a sense of professionalism or make the user feel calm. White-based schemes give websites the appearance of cleanliness. Warm colors like red and orange suggest fun and excitement. Green websites can make the company be seen as environmentally conscious. Black and white designs seem sleek and modern. Bright colors invoke an emotional response, while darker colors can cause the user to relax so they can focus their attention on important content.

Here’s a quick, comprehensive list of typical color meanings (list provided by Smashing Magazine):

  • Red: Passion, Love, Anger
  • Orange: Energy, Happiness, Vitality
  • Yellow: Happiness, Hope, Deceit
  • Green: New Beginnings, Abundance, Nature
  • Blue: Calm, Responsible, Sadness
  • Purple: Creativity, Royalty, Wealth
  • Black: Mystery, Elegance, Evil
  • Gray: Moody, Conservative, Formality
  • White: Purity, Cleanliness, Virtue
  • Brown: Nature, Wholesomeness, Dependability
  • Tan or Beige: Conservative, Piety, Dull
  • Cream or Ivory: Calm, Elegant, Purity

The biggest thing to keep in mind when picking colors for your website is your audience; for example, the same color can have very different meanings in different cultures. Blue in Western cultures can invoke feelings of trust and authority, but Latin America it is a color with religious connotations. In Western cultures, white often represents purity and peace, while in Eastern and Asian cultures white is most often associated with death and mourning. If you’re advertising medical services and your design uses a lot of red, you probably want to rethink your color scheme if you’re audience resides in the Middle East where red can evoke feelings of danger and caution, or may even be seen as evil.

Not only should you keep in mind different cultures, but you should consider the age and gender of your audience as well. Younger audiences tend to enjoy bright, solid, graphic colors while an older audience prefers a more subdued color scheme. Men tend to like cooler colors (greens and blues) while women tend to like warmer colors (reds and oranges). And don’t forget about accessibility issues, like color blindness! In the end what color scheme you pick must be appropriate not only for your content, but for your audience as well.

If you need some help getting started on choosing your color scheme, Creative Bloq has a great article on 28 Tools for Choosing a Color Scheme.

Sources: [ An Introduction to Color Theory for Web Designers ], [ Color Theory for Designers, Part 1: The Meaning of Color ], [ Color and Cultural Design Considerations ]


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s