Previous Page

Are you tired of choosing your web design color schemes by trial and error? Wouldn't it be great to choose a winning color scheme on the first try? If you feel that way, then you've come to the right place! Hopefully, this online lesson will take the guess work out of choosing that "perfect" color combination for your website.


Neutrals: Neutral colors are Black, White, and Gray. These colors can be used to accent any color scheme. However, as shown by this page, they are not attractive on their own.

Primary Colors: Primary colors for the RGB spectrum are Red, Green, and Blue. These are shown in the first color wheel on the right. It is important to note that the Primary Colors for other mediums (such as art painting, print publications, interior design, etc.) use a Red/Yellow/Blue primary scale. The Red/Yellow/Blue scale is based on visible light, while the RGB scale is based on what our monitors display. Ironically, our color printers use the Red/Yellow/Blue scale!

Secondary Colors are created by mixing equal parts of Red with Blue, Blue with Green and Green with Red. This creates cyan, magenta and yellow.

Tertiary Colors are created when this "mixing" continues with each adjacent color to fill in the wheel.

Variations of each color are achieved by adding or subtracting contrast. Shown below, the color red is "pure" (FF0000) in the center, nearly white on the right (FFCCCC) and nearly black (330000) on the left.

Unfortunately, not all colors on this scale are considered "color safe", meaning they will not render correctly on a computer configured with a low-color display setting. While the 256 color limit is becoming less of an issue these days, it is still considered "good practice" to keep the predominate colors in any web design within the "safe" color range. As a general rule, if you are using a hex color value that does not contain 3 pairs of digits, it is not safe. For instance, FF0000, FFCC00, and FF33CC are each color safe, but FAC4C4 would not be color safe.

So, what's so great about a Color Wheel? (Continued on next page.)

Design note: You must have a 4.0 Browser or higher in order to see the example designs. You should see a gray frame around the text on this page (and a dolphin). If you don't see this, please upgrade your web browser.

This lesson was created by
Regina Blackstock and Eric Sapronetti
and presented to the International Webmaster Association, Tallahassee Chapter on 4/1/01

Next Page