Working with Elements of Color

As mentioned earlier, no color exists without light. Although light is necessary, color is not. In fact, many people cannot perceive color, or they perceive color improperly, such as in the common condition known as color blindness. However, for those with normal color perception, color is a significant aspect of their emotional and artistic lives. In fact, it's so much a part of them that they might not necessarily even know what motivates them to pick out certain colors for their wardrobes yet they do it.

Artists and designers have been trained to understand and use the elements of color as a method of communication. Web designers, like artists and traditional designers, also need to possess a full understanding of what color can do, what it means, and how to harness its power and use it to create sites with maximum communicative potential.

Categories of Color

Color is defined by how colors are combined. Even though the method of combination is going to differ when you compare the subtractive, natural world to the digital, additive one, the end results are the same in terms of your perception of color.

Subtractive color categories are defined as follows:

• Primaries All subtractive colors are the results of some combination of three colors: red, yellow, and blue. These colors are referred to as primary because they are the first colors to technically exist. Without them, no other color is possible.

• Secondaries The next step is to mix pairs of the primaries together. If you mix equal parts of red and yellow paint, you come up with orange. Blue and yellow create green, and violet is created by mixing red with blue. Orange, green, and violet are therefore the secondary colors found on the color wheel.

• Intermediates When two or more primaries, or secondaries, are mixed together in unequal parts, the results are referred to as intermediate colors. These colors are gradations that lie between the primary and secondary colors, such as light blue and pink.

NOTE

Colors that are next to each other on the color wheel, such as blue and violet, have a distinct relationship and are considered to be similar. Opposing colors, such as orange and blue, are complementary. Red and green, which are three colors removed from each other on the wheel, are contrasting colors.

In the digital world, additive color is used. The additive color categories are different from their subtractive counterparts as follows:

• Primaries All additive colors are the results of some combination of red, green, and blue (RGB).

• Secondaries The secondary colors for an additive system are also different from the subtractive system. Mixing red and green produces yellow. Combining green and blue makes cyan, which is similar to light blue. When red and blue are mixed, the result is magenta. For additive color, yellow, cyan, and magenta are the secondary colors.

• Intermediates This includes everything else.

Figure 43.1 shows FrontPage's version of the color wheel. The wheel is separated into discreet colors that can be easily selected, but you can see how the primary colors blend into the secondary colors. Each corner of the hexagon has a primary or secondary color.

Figure 43.1. FrontPage's Color Selector is a modified color wheel.

Along with these categories, you can achieve additional categories by adding white or black. When you add white to a given color, you achieve tint, which lightens the color saturation. Black added to a color darkens it. This is referred to as shade.

Properties of Color

Bordeaux. Banana. Spice. Where do these colors fit into the spectrum? What determines the difference between cobalt and peacock, even if they are both blue? Do these issues even matter on the Web?

The way in which differentiation of this nature is made is by defining the properties of color. Color properties are determined by the type and amount of color as well as how much light is used in that color, as follows:

• Hue This term is used to differentiate one color from another. For example, red is different from green, and purple is different from brown. Whether a color is primary, secondary, intermediate, or tertiary (third level) isn't important with regard to hue; that they are different in terms of actual color is.

• Value Chocolate brown is darker than tan, and sky blue is lighter than navy. A color's value is defined by the amount of light or dark in that color.

• Saturation Also referred to as intensity, you can think of saturation as being the brightness of a color. Peacock blue is very bright, whereas navy is rather dull. Similarly, those popular neon lime greens reminiscent of the 1960s are much more intense than a forest green.

• Warmth Hues found in the yellow-to-red range are considered to be warm. They emit a sense of heat.

• Coolness Cool colors are those ranging from green to blue. Think of ice blue or the cool sense of a forest a deep green can inspire.

If you look at these definitions, you can see that a given hue can contain a value and saturation. When you think of all the variations that are potentially held within each of these properties, you can begin to see that color is much more than meets the eye.

Of course, you might notice that black and white are missing from this list. Black can be described as absence of light, and white as being light. A more technical way to think about black and white is to refer to the properties of hue and saturation. The fact? Neither black nor white possess hue or saturation.

NOTE

Why then do "shades" of gray exist? The reason is found in value. The amount of light or dark in white or black determines the resulting value of gray.

Color Relationships

Colors are emotional, and they have emotional relationships with one another. In a compatible relationship, harmony reigns. In a discordant relationship, clashing occurs. These color-based emotional relationships can be part of your Web designs if you understand how they work in the great scheme of things.

In design, relationships are very important because both harmonious as well as discordant color schemes can be effective, depending on the circumstances.

If I'm trying to convey a peaceful environment, I'm going to want to use harmonious colors. An example of this would be creating a palette from soft, subtle pastels. The end result is going to be calm and even feminine.

However, if I want to wake people up and jangle them up a bit, I might try a discordant relationship. Bright yellow and red with black creates discord, but the visual impact is intense. Depending on the audience and the communication issues at hand, the discordant relationship might be a more appropriate choice than the harmonious one.

Color Significance

To those of you who are familiar with it, the Wired look is memorable. Using neon and discordant colors, the magazine as well as the HotWired Web site (http://hotwired.frontpagelink.com/) communicates energy. If you've never been to the site, take a look you will be quite impressed.

Ever notice how all-night restaurants are usually very brightly lit? This is thought to help keep people awake.

The more you look for examples of the significance of color, the more you will find. Colors are even associated with specific professions, ages, and sexes: white and green for doctors and nurses, darker or more neutral colors for older people, pink for girls, and blue for boys.

None of this is accidental. In fact, it's very specific. Color has very strong impact on the human psyche. This has been shown to be true in countless studies.

However, the intriguing issue is that color alone doesn't create this impact. Culture has a profound influence in how you perceive color, too.

Recently, a trend occurred in some Western countries to marry in black: the bride and her bridesmaids as well as the men used black material in their formal bridal wear. This upset a lot of people because Westerners tend to associate black with death and mourning.

But in some cultures, the color Westerners normally associate with purity and brides (white) is the color of death. In East India, for example, white is the color of the death shroud and mourning costumes.

It's important for you, a Web designer working in a global medium, to have some sense of what colors signify. Although it's not possible to give you a rundown of cultural color significance in one chapter, giving some general meanings of color is. Be advised that if you're doing work for a client from a different culture, asking about color perception in that individual's culture will be well worth your while. This can help you avoid uncomfortable, time-consuming situations. It is a World Wide Web, after all.

Here's a bit about color significance in the Western world. Remember, these are generalizations, and other interpretations do exist.

Color	Significance
Black	Death, darkness, elegance, sophistication
White	Purity, cleanliness, refinement
Red	Passion, intense energy, anger
Green	Healing, nature, earth
Blue	Dignity, power, stability
Yellow	Happiness, vibrancy, youth
Purple	Royalty, riches, sumptuousness

Now that you are familiar with the types and meanings of color and have a good foundation in color theory, it's time to apply these ideas to the Web.