Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Color Theory

Last updated Oct 17, 2003.

Common sense doesn't always prevail in working with colors on a Web site especially since we don't all see color exactly the same way. Even two monitors don't show identical colors no matter how hard a person tries to adjust the settings to get them to look the same. So what do you do? First, accept that a Web site won't look the same on all computers and monitors.

Color theory involves mixing colors and putting them together so they best fit a design and set its tone. Consider the image below. How do you feel when you look at it? What thoughts come to mind?

Now, what if the color changes?

Does the revised image evoke a different feeling?

Imagine how the image looks to someone with color blindness. About 10 percent of males have red-green color blindness. Statistics indicate about five percent of Americans have a form of color blindness, which equals over 13 million people. Do you want to neglect one of every 20 visitors? Vischeck provides excellent information and tools regarding the topic. The site shows how color looks to people with various types of color blindness.

When mixing colors, the goal is to create color harmony as opposed to something chaotic or dull. Color that's chosen with a purpose brings order to a site and helps readers absorb the information presented.

Web-Safe Palette

It's been called the browser safe palette (or colors), Web-safe colors, Web palette, and so on. This topic has been discussed many times, but it wouldn't be right to ignore it altogether. The infamous Web-safe palette contains 216 colors viewed on PCs and Macs. Actually, there are 256 colors, but 40 of them vary on the Mac and PC.

Use it or not? With the advancements we've seen on browsers and monitors, it's not worth worrying about anymore, unless you've got a lot of users accessing your site through a handheld device or smartphone, which still have trouble displaying more than 216 colors.

Color Definitions

The primary colors—colors that can't be created from other colors—are red, blue, and yellow. When mixed together, these three primary colors produce the secondary colors, which are green (yellow/blue), orange (red/yellow) and purple (red/blue). Tertiary colors mix one primary with one secondary color to form another color.

Analogous colors consist of three colors that are side by side on a color wheel. One example includes yellow-orange, orange, and orange-red.

Complementary colors involve two colors that sit opposite of each other on the color wheel. Two examples: red/purple and yellow/green.

Monochromatic colors use different shades and tints of one color.

Mixing colors for painting or print uses the subtractive color method. This method begins with white and ends with black. Each time you add color to the mix, the results grows darker. This system mixes CMYK (cyan, magenta, yellow, and black) with pigments to make other colors. CMYK is most effective for printing.

The other method, additive color, begins with black and ends with white involving light emitted from a source. This method uses RGB (red, green, and blue) light to create other colors. The most common application of this system is to create color on computer monitors and TVs.

Shades are darker colors that are produced by adding black or removing light. Tints are created by adding either white or more light to lighten the color.

On a color wheel—a great tool for analyzing color—red, orange, yellow, and their various shades and tints belong in the warm colors group. Many believe they give off energy, warmth, and comfort. Cool colors include blue, green, purple, and their lighter and darker versions. These often express calmness, coolness, and stability. Blacks, browns, and whites are neutral colors that express no message, but work well with other colors.

What kind of message does your site design need to express? Working with color theory as opposed to "just playing with it until it feels right" helps you find just the right tones to express your site's mood and ambience.

Color Resources

Poynter has an interactive guide on color, contrast, and dimension.

Interactive Color Wheel
Java-based application for experimenting with colors using saturation, intensity, hue, and luma.

Color Blender Tool calculates one to ten midpoints between two colors.

Color Schemer Tool allows you to light and darken a color to create a scheme. It uses RGB and HEX values.

Color Harmonies helps you search for complementary colors using RGB values.

ColorBlender is a tool for color matching and designing a palette.

Color Scheme Generator creates schemes and palettes.

Color Management 101 for Digital Artists.