Color Theory / Color Schemes - Part 1 of Chapter 2 from Web Graphics for Non-Designers (3/6) | WebReference

Color Theory / Color Schemes - Part 1 of Chapter 2 from Web Graphics for Non-Designers (3/6)

To page 1To page 2current pageTo page 4To page 5To page 6
[previous] [next]

Web Graphics for Non-Designers, Chapter 2: Using Color

Choosing a Color Scheme

Successful colors schemes online are chosen to support the goals of a site, be they to strengthen branding, increase sales, or maintain readership. An intelligent color scheme not only looks good, but also creates a feeling in the audience. If you choose a scheme that does not support your goals, then you have fallen short of the potential of your site.

Color can assist in achieving goals by suggesting and atmosphere that visitors can identify with. For example, a site selling baby products could use vibrant scheme that parents would appreciate as a bright and positive influence, while an art gallery could employ a black background that presented an impression of sophistication and luxury.

While there is more to be considered than making an attractive site, knowing how to create a harmonious color scheme is a strong start. Harmonious color schemes are derived systematically from the basic color wheel of tertiary colors. For the purposes of this grounding, they are of four types: monochromatic, analogous, complementary, and triadic. Using each, it is best to aim for a selection of three or four distinct hues, coupled with neutrals.


Monochromatic color schemes are derived from a single base color, and extended using its shades and tints (that is, a color modified by the addition of black and white). Consider, for example, a saturated green (RGB {0,255,0}). The swatches each show the pure hue in the center, with white being added to the right, and black to the left. In each case, the core hue remains identical.

Monochromatic Swatches

Monochromatic swatches:




As you can see from the wheel above, by altering the value of this pure hue we can create colors that cleanly support the original.

Photoshop Color Picker

In Photoshop, changing the value next to the H in the color picker can alter hues. Adjusting the brightness is done using the value alongside the B. The S signifies the saturation of your color. The latter two values are measured as a percentage, while the hue is measured in degrees, positioning the hue on a color wheel.

Example: Victoria's Secret uses a pink color scheme


Pink Color Swatch

This site bases its scheme around a feminine pink. The monochromatic scheme avoids detracting from the key, full-color photographs that sell the product.

Example: uses a Dark Green scheme


Green Swatch

Here, the monochromatic scheme keeps the focus on the content within the site.

A monochromatic color scheme is often considered for sites where content is of extreme importance, or when the opinions presented are of a moderate nature. It can give a site a clean and classic look, but also provides excellent opportunities to let full color photographs dominate. Monochromatic schemes are often appropriate for serious political and business sites such as those of some banks where instilling customer confidence in their experience. They are also highly suited to fashion sites where the understated monochromatic scheme supports the branding, but nevertheless allows the photographical elements to provide a focus.

To page 1To page 2current pageTo page 4To page 5To page 6
[previous] [next]

Created: December 2, 2002
Revised: December 2, 2002