Website Color Theory

Note: if you like, you can jump straight to an HTML color chart or learn a little about color theory first.

Color Theory Primer

Do you sometimes wonder:

  • What are the meanings of various colors?
  • How does color help my site?
  • Which colors work well together?
  • What are the color codes used by major brands?

Many web designers would say that color is one of the most important choices for a website design

At first glance, the colors you choose to use convey certain messages and evoke emotions with your visitors.  The wrong color choice can send the wrong message.

Color has Meaning

Generally people associate certain values or meanings with the use of color. This is reinforced in our communities and culture.  For example, red usually means danger or warning (think of road signs), love (think red valentine heart) or anger (think "angry red face").

It's important to consider the emotions associated with color for your website.

In addition, colors mean different things in various cultures. For example, white is appropriate for weddings in USA, Canada, UK, Australia etc. but in China, this color signifies death and mourning. The following is a list of some popular website colours used in Western culture and what they mean in other cultures.

Meanings of the color blue

Western: Trust, corporate, tranquility

  • Korea, Mexico: Mourning
  • China: Immortality

Meanings of the color green

Western: Environment, nature, luck

  • China: Disgrace
  • South America: Death
  • Indonesia: forbidden colour

You can learn more about color symbolism on this informative website: Empower yourself with color psychology

A color wheel can help you understand basic color theory. This is the first step in adopting an effective use of color on your website. 

The Color Wheel

A colour wheel includes all of the visible spectrum colors.  Black is the absence of colour - White is all colours mixed together.

The primary colors are Red, Yellow and Blue.  With these three colors you can make any of the other color combinations. 

When you mix two primary colors  in equal parts (e.g. Yellow and Blue) you make a secondary color (i.e. green).

If you mix a primary color and a secondary color together, you get a tertiary color.

Tint, Shade and Tone

If you add white to a color (making it lighter), you create a 'tint'. If you add black to a color (making it darker), you create a 'shade'. If you add grey to a color, you create a 'tone'.

Effective Use of Color

Your website should have no more than 3 prominent colors or 'hues'. Any more than three colors and you risk creating visual chaos. 

You can choose different colour values (degree of lightness or darkness) and saturation (color intensity). Full saturation colors appear bright and clear while low saturation colors appear milky or gray.

When you are selecting a color as a focal point (possibly to stimulate an emotional reaction or convey a meaning), your next color choice(s) can follow some standard patterns.

For example, complementary colors refer to colors that are across from each other on the color wheel.

Here's an example of a color scheme that shows teal with complementary colors:

Colors that are next to each other on the color wheel are called 'analogous'.

Here's an example of a color scheme that shows blue as analogous / monochromatic (i.e. tints of blue):

Three colors that are evenly spaced around the color wheel are called 'triadic'.

Use of Color by Major Brands

Color Emotion Guide

Feedback is important: If you think this content was useful to you, feel free to LIKE and Share with friends, colleagues and family members.

New! Comments

Have your say about what you just read! Leave me a comment in the box below.

Return to Website Design from Website Color Theory or visit the Home Page.

How can I help you right now?

I'm happy to share my 12 Tips for Creating the Best Business Website as a free gift. And I do mean 'free' - there's no strings attached - not even a request for your name and email address!

If you need help, advice, a friendly push in the right direction, to rant or rave about a product or service ... please don't be shy about contacting me. Perhaps I can help you achieve your business goals.

You can do it ...

"That was fast! That is exactly what I need it to do. You are amazing! You just might be the secret weapon that makes a website less  about being BUSY on the Internet and more about being a BUSINESS on  the Internet." - Stan L.,