Mixing and Matching Colors

Based on Jill Morton’s “Color Logic for Web Site Design

Well, I’ve been reading another e-book by Jill Morton on color, which is, in fact, the most useful book I’ve yet found with respect to practical advice for web design. I highly recommend this book, which is called “Color Logic for Web Site Design”. Most of the information I present below is based on information I got from the book, with a particular focus on color harmony. Although I believe you will find my discussion useful, if you’re interested in a much more comprehensive and detailed discussion of color and web design complete with many example web sites, purchase the book.

Color Wheel

A traditional color wheel consists of twelve colors organized in a specific color. The primary colors are pigments that can’t be mixed by combining other colors. The secondary colors are created by mixing primary colors. The tertiary colors are those formed by mixing the secondary colors. (Figure 1)

Color wheel with primary, secondary, and tertiary colors labeled
Figure 1. Color Wheel and Types of Colors

Yellow, oranges, and reds are often referred to as warm colors; while greens, blue-greens, and blues are referred to as cool; and the other colors are referred to as in-between.

Color wheel with warm, cold, and in-between colors labeled
Figure 2. Warm and Cold Colors on the Color Wheel

Color Dimensions

There are three basic dimensions of color. Hue refers to a specific color (e.g., red or blue). Brightness refers to the degree of lightness/darkness of a color (see figure 3 for examples). When two colors are used in a design, the greater the difference in brightness the greater the intensity/dynamics of the contrast. Saturation refers to the degree of purity of a color (see figure 4 for examples). The greater the degree of saturation, the greater the intensity/dynamics of the contrast will be between colors that appear together in a design. We will speak more about the intensity of a contrast below. Figure 3 presents examples of colors.

Illlustration of changed in brightness with red, yellow, and blue
Figure 3. Changes in Brightness

illustration of changes in saturation with red, yellow, and blue
Figure 4. Changes in Saturation

Many graphics programs, such as Macromedia Fireworks® allow you to adjust colors based on these three dimensions. Figure 5 displays a menu that appears in Fireworks which allows for detailed adjustment, with my annotation highlighted in yellow, indicating how these dimensions are represented.

screen shot from Fireworks showing adjustments for different color dimensions
Figure 5. Adjusting Dimensions with Macromedia Fireworks®

Color Harmony

Guidelines

Morton (2001) points out a few basic color guidelines, which I would summarize a) Fewer colors is better. A common mistake is to try and use too many colors; b) A combination of warm and cool colors is generally best (see above); c) The best designs make use of an appropriate balance of dynamic and subtle harmonies. Recall that, as the difference in lightness among colors increases, the dynamics of the contrast increases. Similarly, as the saturation of the colors involved in the contrast increases (not the difference in saturation, but total saturation), the dynamics of the contrast increases. Dynamic harmonies are attention getting and dramatic, whereas subtle harmonies are fluid, low key, and can appear sophisticated.

Types of Harmonies

color wheel with examples of analagous colors
Figure 6. Example of Analagous Colors (yellow-orange, organge, and red-orange)

color wheel with example of complimentary colors
Figure 7. Example of Complimentary Colors (yellow and purple)

color wheel with example of split complimentary colors
Figure 8. Example of Split Complimentary Colors (yellow-green, yellow-orange, and purple)

color wheel with example of triad colors
Figure 9. Example of Triad Colors (green, orange, and purple)

color wheel example of analagous plus compliment
Figure 10. Example of Analagous plus Compliment colors (yellow-orange, orange, red-orange, and blue)

Color wheel example of a tetrad
Figure 11. Example of Tetrad colors (green, orange, red, and blue)

References