The Use of Color on the Web

image of paint brush and plalletThe use of color is one of the most critical components of web design. From a visual standpoint, it is what the viewer  sees first. A good color combination can capture the attention of the viewer and prolong the time spent viewing the web page. However, color is also one of the least understood and most incorrectly used effects on the Web.  Using the wrong color combinations can result in web pages that are difficult to read, illegible if printed, impossible to display on some video systems, and in quite a few cases, just plain ugly.

When selecting colors to use on a web site, there is a sequence of rules you should apply. First, you must look at tradition and then you apply color theory.  Tradition is about the human eye and what is considered culturally acceptable.  For example, you would not use a lot of black on a wedding services site.  Accordingly, politicians in the United States use red, white and blue on their web sites to convey their patriotism.  Color has meaning, and the color choice must be both culturally acceptable and appropriate.

Color theory is applied when we take the base color we want, and then accentuate it with a complementary, monotonous, or analogous colors.  Sound confusing?  Let’s break it down by looking at the basic component of color theory, the color wheel…

Triadic Color Scheme

Colors are classified as primary, secondary and tertiary. The primary colors are red, yellow and blue. The secondary colors are those colors “between” the primary colors on the color wheel and are made from combinations of the primary colors.  For example, orange is made from red and yellow; green is made from yellow and blue and purple is made from blue and red. As you might guess, the tertiary colors are between the secondary colors. And finally, you can affect the tint, tone and shade of the color by adding white, gray or black.

It is helpful to keep the color wheel in mind when thinking about what combinations of colors to use in your website. These best color combinations are:

  • Monochromatic Color Schemes – the same color but with tint, tone and shade
  • Complementary Color Schemes – colors directly opposite each other on the color wheel
  • Triadic Color Schemes – colors one-third of the way around the color wheel (see above)
  • Tetradic Color Schemes – colors one quarter of the way around the color wheel

Feel like you may need some help?  Don’t worry, there are tools available.  Check out the  Color Scheme Designer and you may just uncover the colorist in you!


About Susan
I'm a wife, mother and student living in the suburbs of Atlanta. After 20 years in corporate IT, I am currently working for a non-profit as Director of Operations.

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

%d bloggers like this: