Essay :: Another Take on Color Selection

By Thomas Van Hare

For the past four years, quite a lot has been written about the 216 color “Netscape Color Cube” and the limitations it entails. Sadly, not only are most web surfers now viewing in at least 16-bit color, but this is about as far as most Internet designers delve into color theory. This sad fact explains why so many sites demonstrate such horrendous color choices, even if the designers are pleased that their pages are perfectly balanced to the Netscape 216.

The bottom line: there are a multitude of books on color theory but for most of today’s WWW designers, a simpler method of selecting color combinations is needed. This essay provides one such method, which, if a bit complex to describe in print, is actually quite straightforward to apply.


MUNSELL AND COLOR THEORY

During the late 1940s, a radical and effective approach to color theory was developed in the halls of one nationally respected NYC art school, Pratt Institute. This new color theory was based on the Munsell system, which dictates that color is three-dimensional, consisting of value (or degree of darkness and lightness), chroma (or degree of color intensity) and hue (or location on the color spectrum).

In contrast, the traditional red, yellow, and blue primary hue system is barely acceptable and markedly inferior. The Munsell system instead uses five primary hues:

  1. Red
  2. Yellow
  3. Green
  4. Blue
  5. Purple

Munsell also establishes intermediate hues of yellow-red, red-purple, purple-blue, blue-green and green-yellow. More recently several of these names have been changed, but the new names such as cyan and blue’ (blue prime) seem more confusing while the hues themselves remain unchanged. Therefore, for purposes of this essay, we have chosen to use the older color names.

For those seeking a graphical reference of the Munsell chart itself, the following URL provides a more detailed explanation of the Munsell system with illustrations:

http://munsell.com/about-munsell-color/

APPLYING MUNSELL FOR DESIGN

Although the Munsell system was intended for and is useful as a standard color identification and cataloging system, as designers, we are more concerned with color in our designs. Surprisingly, the Munsell system can be a tool for us in this field as well.

If we intuitively select a color for a particular area of our design, say for example blue, we must recall the three dimensions: hue, value and chroma. Hue in this case refers to the “blueness” of our blue. Is it purely blue or is it leaning a little toward the green or the purple? Value in this case refers to the lightness or darkness of our blue. Is it a lighter sky blue or is it a darker navy blue? Chroma refers to the intensity of our blue. Is it a brilliant jewel-like blue or a soft blue-gray?

Let’s say we choose the brilliant jewel-like blue. Having decided the hue-value-chroma of our blue area of color, we must next decide the color or colors of adjacent areas. Do we want the adjacent area to be barely perceptibly different or do we want an obvious contrast? If we choose contrast, we can select a contrast in value, or in hue, or in chroma, or any combination of the three. The most exciting juxtapositions of color areas occur if we select contrasts in all three.

Given our selection of a jewel-like blue, we might select a pale very slightly grayed yellow next to our brilliant jewel-like blue, and we find our blue is even more brilliant and jewel-like in contrast. In this regard, simply selecting the opposing colors on the Munsell chart will create color combinations that react well and enhance each other.

Similarly, a more gentle, subtle difference can be found by selecting a hue that is closer, such as a blue-green. Our blue-green may be a little lighter in value, and perhaps a little less intense in chroma, and we find that the area adjacent to our jewel-like blue is now closely related. We also find that the two areas combine to form a larger design element in our composition.

GLOBAL COLOR PALETTE SELECTION

The next question would be how to define our color palette for our particular design. Do we want a monochromatic or near-monochromatic scheme? Or do we want an extravaganza comprising most of the spectrum? Typically, the best options are between these extremes.

This choice should be dictated by the purpose of the design. You probably aren’t going to sell many flowers with a monochromatic blue-green, blue, and purple-blue web page, nor are you going to sell many diamonds with a full spectrum red, yellow-red, yellow, green-yellow, green, blue-green, blue, purple-blue, purple, and red-purple web page. Ultimately, at the risk of sounding repetitive, we’ll repeat one of our most critical points: design should be dictated by the product and commercial focus, rather than by whatever gimmick or fad approach is at hand.

To return to selecting a color palette, most of the time we are dealing with something between these extremes, perhaps three basic hues. One approach is to select two opposing hues, for example yellow and blue-purple. The next step is to decide which of the two is the dominant hue. Then, simply look to both sides of the opposing hue for your color choices.

For example, if we choose yellow, and if we look equally to either side of the opposing purple-blue, we will find blue, and we will find purple. If we look equally further to either side of the opposing purple-blue, we will find blue-green and red-purple. This is about as far away from purple-blue as we want to go. As a general rule, the further away we get from the opposing hue the less successful will be our color balance.

Once the dominant and subordinate hues are selected, the next step is to decide on the value (darkness and lightness) of the various areas in our design. A properly color-balanced design will also be balanced in areas of darkness and lightness.

One good trick is to take a black and white photo of our design and consider if it remains successful. Yellow lettering on a deep blue-green background will show up properly in a black and white picture, while red lettering on the same deep blue-green background will not.

The last step involves deciding on the chroma or intensity of hues in the various areas. Think of the more intensely chromatic area as an area clamoring to be seen. Obviously, if all areas of our design are clamoring equally, we cannot know where to concentrate our attention (a very common Web design flaw). Therefore, we must choose where to direct the viewer’s attention, and this choice is again dictated by the purpose of our design.

To demonstrate, if you are trying to sell a luxury convertible by showing it in front of a building, you are not going to get far with a dull gray automobile in front of a bright pink and turquoise Art Deco hotel in Miami. The viewer might get around to noticing the convertible… after a while.

Those who follow these simple steps will find that their color selections will be much improved.

FINAL NOTES

The purpose of the design dictates the color palette. The designer must juggle the three dimensions of hue, value and chroma to meet the needs of the client. By first choosing the dominant hue and then shifting one or two steps equally to either side of the opposing hue on the Munsell color wheel, you can easily obtain two subordinate hues and be assured a balanced color palette. By visualizing the values in the design as a black and white photo, the designer guarantees that the various parts of his design will maintain their identity. Lastly, by varying the chroma or intensity of the various hues, the designer guarantees that the viewer’s attention will be directed properly.

It is worth noting that all of this sort of color theory can be taken with the proverbial grain of sand. Quite simply, rules are made to be broken. True masters of Web page design typically do not follow such simplistic conventions, even if they might learn a thing or two from them. Instead, they reach far beyond tradition to surprise us by doing “all the wrong things” brilliantly.

Thank you.