Secrets of Web color revealed
If you've ever struggled to develop an effective color scheme for a Web site or wondered why banks, corporations, and financial institutions always bathe their sites in blue, you're not alone. Most Web developers understand the ins and outs of the Web-safe color palette and the hexadecimal system, while the science of color and the reasoning behind effective color schemes remain elusive.
For centuries, the nature of color itself was a veritable mystery. Socrates, for instance, postulated that fire originating from the eye combined with an object's intrinsic whiteness to produce color. Later, Isaac Newton explored the true relationship between color and light, and further scientific research, continuing well into the 20th century, has led to a precise understanding of light waves and color perception.
Today, the studies of both color harmony and the evocative properties of color yield information that influences the work of fine artists, designers, and advertising executives. This guide to color theory sheds light on some of the more enigmatic aspects of the effective use of color on the Web, and it illustrates techniques that you can use to reveal color harmonies and harness the power of color symbols on your own sites.
Color harmony
Choose colors that strike the right chord between monotony and chaos.
When designers deal with color, they usually rely on one of two color models: the additive color model, in which individual color waves combine to form white light, or the subtractive color model, in which pigments are used to subtract light waves. Both the traditional artist's palette and the CMYK systems are subtractive color models. On the Web, where we deal with light projection rather than light reflecting off of objects, we use an additive color model called RGB.
| ||||||||||
Additive color
In the natural world, the light waves that reach our retina are reflected off of objects, but there are other ways to produce color. Stage lights, for example, produce color by projecting white light through colored filters. Computer monitors also use projected light, but in that case the light is produced when electron guns are fired against a phosphor screen. These guns fire electrons in three colors: red, green, and blue. Using only these three colors, monitors can produce a full spectrum. This is known as the RGB color system.
Within the RGB system, designers can also produce a color spectrum by amalgamating these three primary colors. Combining two of the primary colors generates three secondary colors: cyan, magenta, and yellow. As previously noted, adding all three primary colors together produces white light. Thus, an RGB value of 255,255,255 produces white. The complete absence of the three primary colors (RGB: 0,0,0) produces black.
Subtractive color
The inverse of the RGB model is the CMYK model, in which light waves are subtracted to produce the desired color. Since the color of an object is derived from reflected light waves, this system uses three primary colors that each absorbs red, green, or blue light. For instance, if you subtract red light, the remaining green and blue waves produce cyan. The pigment used to subtract red light and reflect green and blue appears cyan. Similarly, print designers use magenta to absorb a percentage of green light and yellow to absorb a percentage of blue light.
At this point, it should be apparent that the primary colors of the CYMK model are the secondary colors of the RGB model, and vice versa. Moreover, if red, green, and blue light combine to produce white light, it stands to reason that cyan, yellow, and magenta pigments should combine to create black, since they should absorb all of the light waves. However, due to the limitations of the pigments and the printing system, the full combination of cyan, yellow, and magenta doesn't quite absorb all light. In practice, it's necessary to add black to the system, hence the K in CMYK.
Color management
These two different methods of reproducing color can be a source of frustration for designers creating graphics for both computer monitors and print material. In addition to difficulties in mapping colors between the additive and subtractive models, the range of colors possible in the RGB and CMYK systems varies significantly. A color management system that converts between the two models based on the output device can solve many problems for cross-medium designers. Color management systems can either be part of an operating system or part of a particular software application.
One of the most challenging aspects of visual design is developing effective color harmonies that strike a balance between monotony and overstimulation. One place to begin exploring balanced and engaging color relationships is a color wheel--a representation of the hues available in a color model.
Each color model contains three primary colors from which all other colors are derived. In traditional color theory, the three primary colors are blue, red, and yellow. In the RGB color model, the primary colors are red, green, and blue. Any two primary colors combine to produce a secondary color. Tertiary colors are derived from either a combination of a primary and a secondary color or from a combination of two secondary colors. We use color wheels to present all of these colors in a logically arranged sequence. As you can see from the illustrations below, an RGB color wheel differs significantly from the traditional artist's color wheel:
 |  | |
| Traditional color wheel | RGB color wheel |
Color wheels expose relationships between colors that can be used to achieve both balance and contrast. The wheels include a number of full-intensity (saturated) hues as well as a variety of tints, tones, and shades, which are less saturated versions of the hue that include more white, gray, or black, respectively. While combinations of pure hues create dynamic color harmonies, you can design more subtle and subdued harmonies by using less saturated colors that are closer in value--that is, colors with similar degrees of lightness or darkness.
Some common color harmonies include:
 | Monochromatic: A single hue and a selection of tints, tones, and shades. | |
 | Analogous: Colors that are side by side or very near each other on a color wheel. | |
 | Complementary: Colors appearing across from one another on a color wheel. These color combinations offer the maximum amount of contrast but can be overstimulating if used extensively. | |
 | Split-complementary: One hue plus the two colors on either side of its complement. Split-complement harmony provides less contrast than straight complements. | |
 | Triad: Three colors that are equidistant on a color wheel. | |
 | Tetrad: Two pairs of complementary colors. | |
When exploring color harmonies, it's often useful to begin with pure hues, then experiment with various tints, tones, and shades. You can then test the visual effect of a particular color combination by using a wireframe diagram. Remember that the importance of contrast doesn't end with designing for impact; it can also help or hinder readability.
The significance of colorWhile examining the scientific nature of color and the aesthetic considerations of color harmony, we've seen that perception plays a large part in the effective use of color. Beyond the mechanics of perception and the recognition of balanced color palettes lies the intangible, visceral reaction that humans have to color. Colors evoke strong physiological and emotional responses both positive and negative. When you develop your color palette, make sure that the colors you select elicit the appropriate response.
Physiological reactions
Although there has not been a great deal of conclusive evidence linking colors to specific responses, research suggests that certain colors do evoke physical responses. Red, for instance, is a very stimulating color and has been shown to produce increased heart and respiratory rates. Thus, red works as an excellent attention grabber and accent but could easily overstimulate when used as a background color. Similarly, yellow also demands attention, but since it is highly reflective, it creates eye fatigue and aggravation. On the other hand, the color blue has a relaxing effect on the nervous system, and some studies have shown that it increases productivity when used as a background color. However, don't use blue in your color scheme if your product is food-related, as blue is a natural appetite suppressant.
The symbolism of color
The symbolic meaning associated with colors sometimes has precedent in nature. For instance, the color of the sky or the sun creates certain fairly universal associations. However, the underlying meaning that we derive from most colors is based on cultural-specific elements--politics, religion, mythology, and other shared social structures--that may shift over time and across geographical boundaries. Be careful when designing and marketing sites specifically for audiences outside of your cultural reference, since a color that has a positive connotation in one culture may have a negative connotation in another. In addition, most colors have both positive and negative associations. You can emphasize certain meanings over others by using variations of value and saturation, or by using colors that combine two hues.
Common color connotations in Western cultures:
- Red: passion, romance, fire, violence, aggression. Red means stop or signals warning or forbidden actions in many cultures.
- Purple: creativity, mystery, royalty, mysticism, rarity. Purple is associated with death in some cultures.
- Blue: loyalty, security, conservatism, tranquility, coldness, sadness.
- Green: nature, fertility, growth, envy. In North American cultures, green means go, is associated with environmental awareness, and is often linked to fiscal matters.
- Yellow: brightness, illumination, illness, cowardice.
- Black: power, sophistication, contemporary style, death, morbidity, evil.
- White: purity, innocence, cleanliness, truth, peace, coldness, sterility. White is also the color of death in Chinese culture.
Choosing the right colors for your Web site is a complex and often daunting task; many companies hire independent, special consultants just to devise color schemes that support and enhance an overall brand. However, if you have a sense of color harmony and understand the responses that certain colors can evoke, you can be your own color consultant and develop highly effective color combinations. Before you begin mixing and matching colors, you must first have a firm understanding of your site's message and goals. Once you understand what message you want to communicate, remember that perfecting a color palette is an iterative process, and above all, a creative one. Don't be afraid to experiment with surprising color combinations, but be sure to adequately test the results before unveiling your product to the public.
Color tips and guidelines
1. Understand your site's message and brand. Choose colors that reinforce your message. For instance, if designing a site for a financial institution hoping to convey stability, choose cool, muted colors such as blue, gray, and green. In this case, using warm, vibrant hues would undermine the site's brand.
2. Understand your audience. Cultural differences can lead to unexpected responses to color. Additionally, demographic segments and age groups respond to colors differently. Younger audiences generally respond to more saturated hues that are less effective with older segments.
3. Use a small number of colors in your palette. Four or five colors, in addition to white and black, should be sufficient. Too many colors create discord and distract the user.
4. Use contrast for readability. Colors similar in value do not provide enough contrast and hinder legibility. Black text on white backgrounds provides the highest degree of contrast.
5. Use grayscale to test contrast. When dealing with hues other than black, white, and gray, it's sometimes difficult to determine the relative value of each color. To ensure that your color palette provides enough contrast, create a wireframe mockup and convert it to grayscale.
6. Be aware of timeliness when choosing colors. Color trends can quickly saturate the marketplace, and consumers rapidly become numb to fashionable hues. On the other hand, you can use popular color palettes from decades past to evoke feelings of nostalgia.
7. Consider functional colors when choosing a palette. Don't forget to establish functional colors for elements that communicate contextual information, such as headings and links.
8. Prepare for color differences on the Web. Every Web developer knows that even Web-safe colors appear differently across platforms. Be sure to correct for gamma differences and test your color palette on multiple platforms.