Using Color to Enhance Your Web Presence

COLOR is an important element of design that is used to create ideas, convey messages, invoke feelings, and accentuate areas of interest. Since it affects the mood of viewers, Website designers should treat the association of color as seriously as the design of graphics and layout.

Colors often have different meanings in various cultures. Certain colors tend to invoke a similar reaction from most people - the overall difference being in the shade or tones used. Colors can determine the psychological effect on viewers.

UNDERSTANDING COLOR

Color is quite possibly the most important factor in a graphic design or piece of artwork. Yet color can be a touchy subject whether viewed objectively (based upon facts) or subjectively (based upon opinion). Sometimes designers or artists use colors that evoke certain emotions or reflect certain eras or trends. Other times designers or artists use colors simply because they like the way those colors look.

While most color and design theorists and instructors believe that the latter reason is completely wrong, color always has meaning. This meaning, as previously stated, can convey emotion or it can reflect a personal designer or artist preference or statement. Whatever the rationale in selecting a particular color, it's important to understand that color always has purpose behind it.

There is nothing wrong with choosing a color because the designer or artist likes it because, after all, it is their work. However, when choosing a color, the designer or artist still wants to make sure its use does not conflict with what they are trying to say with their work. Understanding basic color theory becomes critical in helping a designer or artist decide which colors match, as well as how each color makes people feel.

SEEING COLOR

The reaction to color is largely (but not entirely) inborn. It is important to understand the process of seeing color in order to appreciate how complex this system we take for granted actually is.

The eye, just like the ear, responds to waves of energy. Both visible light waves and radio waves are among several forms of electromagnetic energy ranging from cosmic rays at the highest level to electric power transmission at the lowest—these forms of energy differ because they travel at various wavelengths. Specific waves of energy within a limited range are called the visible spectrum, those colors we actually see, while ultraviolet light and infrared are invisible. Hue is established by the dominant wavelength while the luminance (lightness or darkness of a color) is determined by the quantity of electromagnetic energy.

The perception of color is determined by the wavelengths which bounce back into the retina, a sensory membrane that lines the eyes. The rods and cones of the retina respond to light and, by an electrochemical process, sends signals to the visual center of the brain. Various receptors are assigned specific tasks and are sensitive to certain vibrations.

Each color owns a different wavelength which determines its place in the spectral order. Students of art have long remembered the red, orange, yellow, green, blue, indigo order of colors through the imaginary Roy G. Biv. Rainbows illustrate the perfect example of spectral order. The highest arch of the rainbow (and the longest wavelength) is red, while violet is the shortest, and between them are all the other spectral hues. When these waves of light enter our eyes they produce the sensation of illumination and color.

Visual information in the form of light energy is continuously reaching the retina and forming an image to the visual cortex which acts much like a computer, assessing retina information, and relating it to data stored in the memory. It is difficult to draw a clear distinction between the exact function of the eye and the interpretation of the brain because the psychological, emotional and aesthetic response to color is highly complicated. As a result, we can never really separate what we "see" from what we "know."

To further complicate matters, not all of the visual signals that leave the eye go to the visual center of the brain — approximately 20% go to the pituitary gland, the master endocrine gland of the body. There is no better example of the results of glandular involvement than with the color red.

THE COLOR WHEEL

The color wheel is an important as well as the perfect graphic tool for creating and understanding the dynamics of color combinations. Its simple construction basically displays primary, secondary and tertiary colors in a circular arrangement. Then, depending on which color wheel is being viewed, it may display extra "in-between" colors that are mixes of those main color classifications.

The color wheel also visually illustrates color "temperature" (warm vs. cool) as vital psychological components in delivering a specific color's message. Colors are perceived as warm or cool because of ancient and universal associations. Red, orange and yellow are associated with the warmth of fire and sun while blue, green and violet connect in the mind's eye with the coolness of sea, sky, foliage and outer space.

But changing an under-tone of a particular color can somewhat alter its temperature. Yellow-reds are hotter than blue-reds. The redder the purple, the hotter it gets. Blue-greens are as cool as the water that inspires the liquid-like shades, but yellowed earthy greens are decidedly warmer.

Combinations of warm colors send a more energetic, outgoing, aggressive, active message that demand attention while cool colors are more restrained, reserved and calm; more contemplative than physical. But cool colors show less restraint when they're brightened: as cools become more vibrant, so do their personalities.

Knowing basic color terminology helps to clarify the nuances of color. The following is a list of all of the names of color classifications that appear on a color wheel and their implications.

GLOSSARY

Primary Colors:

The 3 spectrum colors (yellow, red, and blue) are equi-distant from one another on the color wheel. These 3 colors are the base colors for every other color on the color wheel, hence the name, "primary." Primary colors are useful for designs or art that needs to have a sense of urgency. Primary colors are the most vivid colors when placed next to each other, which is why you'll notice that most fast food establishments use primary colors in their logos, as they are easily seen, identified, and perhaps most importantly, evoke speed.

Secondary Colors:

The 3 other colors also equidistant on the color wheel and residing in between 2 primary colors. They're called secondary because, theoretically, each is born of primary parents. These colors are orange, violet, and green. Secondary colors are usually more interesting than primary colors, but they do not evoke speed and urgency.

Tertiary Colors:

These are third generation hues formed by combining a primary and a secondary color. These tertiary colors all have hyphenated names that indicate the two source colors: yellow-orange, red-orange, red-violet, blue-violet, blue-green and yellow-green. In all cases, the primary color is named first. There can be endless combinations of tertiary colors, depending on how they're mixed.

Analogous Colors:

Any colors lying next to each other on the color wheel, such as orange, orange-red, and red. These colors are inherently harmonious because they reflect light waves that are similar, which means that they usually match extremely well, but since they're so close, they also create almost no contrast. This color palette typically conveys a comfortable, calming and serene feeling.

Complementary Colors:

Colors opposite each other on the color wheel. Complement: to complete or perfect. They balance each other as they are opposites, one hue is warm and the other is cool. Any two complements contain the complete trio of primaries. Example: Yellow and its complement, violet (made up of red and blue), complete the trio of red, yellow and blue. However, complementary colors rarely look good when used together because they become extremely vibrant and have heavy contrast. Complementary colors are useful when the intent is to visually make something stand out. For example, if a solid red circle appears on a solid green background, the red will jump off the page and appear to be almost blinding.

Hue:

Name attributed to a color to describe its position in the spectrum or on the color wheel to help discern it from another color. Color and hue are synonymous and can be used interchangeably. Examples: red, green, blue, yellow, etc.

Value:

The degree of lightness or darkness of a color. Lightened values are tints. Darkened values are shades. Medium value colors are mid-tones. A variation in the light to dark arrangement or design is called a "value pattern." Keeping the value pattern minimized within a limited range creates an understated, subtle and restrained look that is seen as calm and quiet. Colors close in value have "soft edges" between them, while excitement and drama are suggested by sharp changes in value.

Saturation:

The brightness or purity of a color. Also known as Intensity or Chroma. Saturation is determined by how little or how much gray a color contains. In its purest form, a hue is at maximum chroma; these are colors that are not "grayed." They are described as clear, pure, brilliant, bright, rich, bold, vivid and/or true. The grayer or more neutral a color is, the less its saturation. Less saturated colors are described as soft, muted, subtle, toned down, misty, dull or dusty.

Note:

The perception of a color is affected greatly by its value or saturation. In planning a color combination, value and saturation are as important as the hue. For example, in the red family, a darkened value of burgundy imparts more power than a lighter value of rose pink. A vividly saturated turquoise is more exciting than a pale grayed aqua.

Achromatic:

Also known as Monotone. The single use of a neutral color. This includes light to medium grays, beiges, taupes and off-whites. This color scheme imparts a calm, quiet quality, or a classic understated look.

Monochromatic:

Variations of only one color.

Cool Colors:

Colors associated with the coolness of water, dusk, and vegetation such as blues, violets and greens. Usually created with the colors on the left of the color wheel.

Warm Colors:

Colors associated with heat or fire such as red, orange and yellow. Usually colors from the right side of the color wheel.

Neutral Colors:

Gray and brown. These colors aren't located on most color wheels, but they're considered neutral because they don't contrast with much of anything. They're typically interpreted as dull and uneventful.

Color Harmony:

The pleasing result of balanced color relationships.

Color Scheme:

A set of colors chosen to combine within a composition. Also known as a color palette or a color system.

Subtractive Color:

Pigments and pigment mixtures that absorb all wavelengths except those of the color or colors apparent to the eye.

Additive Color:

Essentially, white light is a combination of many different colors, a continuum of wavelengths organized into "bands" which are labeled with names such as blue, green, red etc. When equal parts of each of the three major bands are combined, white light is achieved. White light is the sum of red, green and blue.

SPECIFYING COLOR

There are different types of color relevant to color reproduction, whether applied to web, interactive, broadcast or print media.

RGB Color:

This is color based upon light. A computer monitor and television use RGB colors. The name "RGB" stands for Red, Green and Blue, which are the 3 primaries (with green replacing yellow). By combining these 3 colors, any other color can be produced. Remember, this color method is only used with light sources; it does not apply to traditional or conventional printing methods.

CMYK Color:

This is the color method based upon pigments. "CMYK" stands for Cyan, Magenta, Yellow and Black. Using these 4 colors, most other colors can be achieved and reproduced. Unfortunately, CMYK cannot reproduce the same amount of colors as RGB can, which is why yellow-greens sometimes look a bit "muddy" when printed. This is the primary color formulation method used globally by printers when producing print materials.

RED    

Red is the color of fire and blood, so it is associated with energy, war, danger, strength, power, determination as well as passion, desire, and love.

Red is a very emotionally intense color. It enhances human metabolism, increases respiration rate, and raises blood pressure. It has very high visibility, which is why stop signs, stoplights, and fire equipment are usually painted red. In heraldry, red is used to indicate courage. It is a color found in many national flags.

Red brings text and images to the foreground. Use it as an accent color to stimulate people to make quick decisions; it is a perfect color for 'Buy Now' or 'Click Here' buttons on Internet banners and websites. In advertising, red is often used to evoke erotic feelings (red lips, red nails, red-light districts, 'Lady in Red', etc).

Red is widely used to indicate danger (high voltage signs, traffic lights). This color is also commonly associated with energy, so you can use it when promoting energy drinks, games, cars, items related to sports and high physical activity.

Light red represents joy, sexuality, passion, sensitivity, and love.

Pink signifies romance, love, and friendship. It denotes feminine qualities and passiveness.

Dark red is associated with vigor, willpower, rage, anger, leadership, courage, longing, malice, and wrath.

Brown suggests stability and denotes masculine qualities.

Reddish-brown is associated with harvest and fall.

ORANGE    

Orange combines the energy of red and the happiness of yellow. It is associated with joy, sunshine, and the tropics.

Orange represents enthusiasm, fascination, happiness, creativity, determination, attraction, success, encouragement, and stimulation. To the human eye, orange is a very hot color, so it gives the sensation of heat. Nevertheless, orange is not as aggressive as red.

Orange increases oxygen supply to the brain, produces an invigorating effect, and stimulates mental activity. It is highly accepted among young people. As a citrus color, orange is associated with healthy food and stimulates appetite.

Orange is the color of fall and harvest. In heraldry, orange is symbolic of strength and endurance.

Orange has very high visibility, so you can use it to catch attention and highlight the most important elements of your design.

Orange is very effective for promoting food products and toys.

Dark orange can mean deceit and distrust.

Red-orange corresponds to desire, sexual passion, pleasure, domination, aggression, and thirst for action.

Gold evokes the feeling of prestige. The meaning of gold is illumination, wisdom, and wealth.

Gold often symbolizes high quality.

YELLOW    

Yellow is the color of sunshine. It's associated with joy, happiness, intellect, and energy.

Yellow produces a warming effect, arouses cheerfulness, stimulates mental activity, and generates muscle energy.

Yellow is often associated with food. Bright, pure yellow is an attention getter, which is the reason taxicabs are painted this color. When overused, yellow may have a disturbing effect; it is known that babies cry more in yellow rooms.

Yellow is seen before other colors when placed against black; this combination is often used to issue a warning. In heraldry, yellow indicates honor and loyalty. Later the meaning of yellow was connected with cowardice. Use yellow to evoke pleasant, cheerful feelings. You can choose yellow to promote children's products and items related to leisure.

Yellow is very effective for attracting attention, so use it to highlight the most important elements of your design. Men usually perceive yellow as a very lighthearted, 'childish' color, so it is not recommended to use yellow when selling prestigious, expensive products to men – nobody will buy a yellow business suit or a yellow Mercedes.

Yellow is an unstable and spontaneous color, so avoid using yellow if you want to suggest stability and safety. Light yellow tends to disappear into white, so it usually needs a dark color to highlight it. Shades of yellow are visually unappealing because they loose cheerfulness and become dingy.

Dull (dingy) yellow represents caution, decay, sickness, and jealousy.

Light yellow is associated with intellect, freshness, and joy.

GREEN    

Green is the color of nature. It symbolizes growth, harmony, freshness, and fertility. Green has strong emotional correspondence with safety. Dark green is also commonly associated with money.

Green has great healing power. It is the most restful color for the human eye; it can improve vision.

Green suggests stability and endurance. Sometimes green denotes lack of experience; for example, a 'greenhorn' is a novice. In heraldry, green indicates growth and hope.

Green, as opposed to red, means safety; it is the color of free passage in road traffic. Use green to indicate safety when advertising drugs and medical products.

Green is directly related to nature, so you can use it to promote 'green' products. Dull, darker green is commonly associated with money, the financial world, banking, and Wall Street.

Dark green is associated with ambition, greed, and jealousy.

Yellow-green can indicate sickness, cowardice, discord, and jealousy.

Aqua is associated with emotional healing and protection.

Olive green is the traditional color of peace.

BLUE    

Blue is the color of the sky and sea. It is often associated with depth and stability. It symbolizes trust, loyalty, wisdom, confidence, intelligence, faith, truth, and heaven.

Blue is considered beneficial to the mind and body. It slows human metabolism and produces a calming effect.

Blue is strongly associated with tranquility and calmness. In heraldry, blue is used to symbolize piety and sincerity. You can use blue to promote products and services related to cleanliness (water purification filters, cleaning liquids, vodka), air and sky (airlines, airports, air conditioners), water and sea (sea voyages, mineral water). As opposed to emotionally warm colors like red, orange, and yellow; blue is linked to consciousness and intellect. Use blue to suggest precision when promoting high-tech products.

Blue is a masculine color; according to studies, it is highly accepted among males. Dark blue is associated with depth, expertise, and stability; it is a preferred color for corporate America.

Avoid using blue when promoting food and cooking, because blue suppresses appetite. When used together with warm colors like yellow or red, blue can create high-impact, vibrant designs; for example, blue-yellow-red is a perfect color scheme for a superhero.

Light blue is associated with health, healing, tranquility, understanding, and softness.

Dark blue represents knowledge, power, integrity, and seriousness.

PURPLE    

Purple combines the stability of blue and the energy of red. Purple is associated with royalty. It symbolizes power, nobility, luxury, and ambition. It conveys wealth and extravagance. Purple is associated with wisdom, dignity, independence, creativity, mystery, and magic.

According to surveys, almost 75 percent of pre-adolescent children prefer purple to all other colors.

Purple is a very rare color in nature; some people consider it to be artificial.

Light purple is a good choice for a feminine design. You can use bright purple when promoting children's products.

Light purple evokes romantic and nostalgic feelings.

Dark purple evokes gloom and sad feelings. It can cause frustration.

WHITE    

White is associated with light, goodness, innocence, purity, and virginity. It is considered to be the color of perfection.

White means safety, purity, and cleanliness. As opposed to black, white usually has a positive connotation.

White can represent a successful beginning. In heraldry, white depicts faith and purity.

In advertising, white is associated with coolness and cleanliness because it's the color of snow.

You can use white to suggest simplicity in high-tech products.

White is an appropriate color for charitable organizations; angels are usually imagined wearing white clothes.

White is associated with hospitals, doctors, and sterility, so you can use white to suggest safety when promoting medical products.

White is often associated with low weight, low-fat food, and dairy products.

BLACK    

Black is associated with power, elegance, formality, death, evil, and mystery.

Black is a mysterious color associated with fear and the unknown (black holes). It usually has a negative connotation (blacklist, black humor, 'black death').

Black denotes strength and authority; it is considered to be a very formal, elegant, and prestigious color (black tie, black Mercedes). In heraldry, black is the symbol of grief.

Black gives the feeling of perspective and depth, but a black background diminishes readability.

A black suit or dress can make you look thinner. When designing for a gallery of art or photography, you can use a black or gray background to make the other colors stand out.

Black contrasts well with bright colors. Combined with red or orange – other very powerful colors – black gives a very aggressive color scheme.

Color Chart (suggested meanings)

The chart below represents several meanings for color. Each color may represent another emotion to you. Use your best judgment when dealing with color and make sure to get feedback on the colors you use.

When choosing colors for your design, remember a few rules for mixing colors. The human eye cannot focus on red and blue at the same time. Trying to read red type on a blue background or vice versa causes extreme eye fatigue. Your audience will not be receptive to your message if it hurts them to read it. Never, ever use blue type on a red background and even worse, is red type on a blue background.

Most colors go well together with members of the same "family." Warm colors of type, such as red, brown, orange and yellow look better together in combination warm colored backgrounds; cool colored type like blue, green, gray and white with cool colored backgrounds. Using color families generally makes for a more appealing presentation, especially for large amounts of information.

Contrast is fun and can be used effectively to accent information and draw attention to items. In general, keep the contrast low. Too much contrast makes your work difficult to digest. For type, keep the contrast reasonable no matter what colors you're working with. If your background has a value of, say 20%, and the type has a value of 80%, it presents a subtle look that's easy on the eyes and is graphically appealing. Avoid the extremes.