RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Design with Color : Page 3

Color is a wonderful tool in the Web design tool box. It can add navigational meaning, understanding, and mood and tone.


Color Temperature
From "warm" to "cool", the temperature of a color effects the way your site is perceived.

All hues fall into two groups based on their perceived color temperature, or their associations with coolness or warmth from our world.

"Cool" colors are blue, aqua, and violet—water and air elements. "Warm" colors are yellow, orange, red, and brown—earth and fire elements. Warm and cool color theory states that warm colors tend to pop forward, cool colors tend to recede.

Warm color on a cool background Cool color on a warm background

Achromatic colors—that is, white, gray, and black—may become warm or cool when they have a slight hint of a chromatic color.

Warm black (reddish tint) Cool black (bluish tint)
Note: The capabilities of your monitor will determine whether these colors appear the same or different.

The colors you choose can affect the mood, tone and message of your Web site. Which of the following lines makes you sit up and take notice?

Sale! Visit NOW!!!

Sale! Visit NOW!!!

Which of these two is more calm and peaceful and better matches the message?

Summer breezes whisper in the trees ... Summer breezes whisper in the trees ...

Experiment with warm and cool colors until you achieve the look you want.

The computer monitor on which your page is viewed can effect the perceived temperature of colors. By adjusting the "white point" setting for the monitor, the entire display can appear warmer or cooler; lower value setting are warmer while higher ones produce a cooler effect.

White point = D50 White point = 6500 White point = 9300

Color Symbolism
Color packs a lot of non-verbal communication—the addition of a color can subtly change the meaning of a design element and how it is perceived.

Color is a powerful design element that draws attention to the layout. Because color is also a powerful communicator of nonverbal information it can either work for or against the content.

As you design your page, consider the symbolism of color as seriously as the contrast and harmony of colors on the page. Many colors have qualities associated with them because of their natural occurrence or cultural usage. For example:

  • We commonly associate green with plants, and therefor environmental awareness.
  • We also associate green with money, the color of our US dollar bills and with green, the color that means GO on the stoplights (there's that implied cultural meaning raising its head!)
  • Blue is the color of the sky and the sea, and has associations of depth and stability. These qualities make blue a popular color in logos of large companies.
  • Red is the color of blood, so we associate it with the heart as well as violence. Or as the color that means STOP.
  • But, red is also popular color for country flags and professional sports teams.
  • And in some cultures, red is the color celebration and associated with marriage or a new year.
  • Make sure you give color selections careful consideration and don't just rely on personal preference(hey, not every one might respond as you do to your favorite bright orange and lime green!) or trends (is it really appropriate for every corporate logo to be blue and green or does that just mark is as turn-of-century design?).

    Cultural Symbolism
    Color packs a lot of non-verbal communication—but don't make too many assumptions. Much of the symbolism is loaded with cultural interpretations—and your pure white dove could be seen as a white dove of death!

    Some common associations of color in United States culture are:

    Color Positive Associations Negative Associations
    Red passion, strength, energy, love blood, war, danger, aggression
    Green nature, spring, fertility, environment inexperience, envy, misfortune
    Yellow sun, summer, gold, optimism illness, cowardice, hazard,
    Blue sky, sea, stability, calm, unity depression, conservatism, obscenity
    White snow, purity, innocence, peace cold, clinical, sterility
    Gray intelligence, dignity, maturity shadow, boredom, concrete
    Black power, formality, depth, style fear, evil, anonymity, death

    The color needs to match the message and image and it needs to translate into all the cultures that will be using the site. If the color's associations contradict the content, the Web site may communicate in unintended ways. If you think cultural differences aren't a big deal, just remember that Chevy sold very few Novas in Spanish speaking counties (no va means "no go"—quite an unintended message!) The use of color is full of symbolism—if you are designing a site for multiple cultures, be extra careful of your color choices.

    For example, white carnations signify death in Japan and green hats mean a man's wife is cheating on him in China. Maybe a green hat with a white carnation in the brim isn't such a good color choice for your company's product logo! Make sure you go beyond your self-contained experiences (whichever culture you belong to) and understand color from a global perspective.

    Close Icon
    Thanks for your registration, follow us on our social networks to keep up-to-date