advertisement
Premier Club Log In/Registration
  Include Code  Search Tips
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   SKILLBUILDING  |   TIP BANK  |   SOURCEBANK  |   FORUMS  |   NEWSLETTERS
Browse DevX
Partners & Affiliates
advertisement
advertisement
Design with Color (cont'd)

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.



    Previous Page: Contrast, Chromatic Induction, and After-image Next Page: Color Contrast and Picking the Right Colors
    Page 1: IntroductionPage 3: Color Temperature, Color, and Cultural Symbolism
    Page 2: Contrast, Chromatic Induction, and After-imagePage 4: Color Contrast and Picking the Right Colors
    DevX is a division of Jupitermedia Corporation
    © Copyright 2007 Jupitermedia Corporation. All Rights Reserved. Legal Notices
    advertisement
    Advertising Info  |   Member Services  |   Permissions  |   Contact Us  |   Help  |   Feedback  |   Site Map  |   Network Map  |   About


    JupiterOnlineMedia

    internet.comearthweb.comDevx.commediabistro.comGraphics.com

    Search:

    Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

    Jupitermedia Corporate Info


    Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

    Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

    Solutions
    Whitepapers and eBooks
    Microsoft Article: Will Hyper-V Make VMware This Decade's Netscape?
    Microsoft Article: BitLocker Encryption on Windows Server 2008
    Go Parallel Article: Intel Thread Checker, Meet 20 Million LOC
    IBM Whitepaper: Innovative Collaboration to Advance Your Business
    Internet.com eBook: Real Life Rails
    Avaya Article: Call Control XML - Powerful, Standards-Based Call Control
    Tripwire Whitepaper: Seven Practical Steps to Mitigate Virtualization Security Risks
    Internet.com eBook: The Pros and Cons of Outsourcing
    Internet.com eBook: Best Practices for Developing a Web Site
    IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
    Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
    Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program
    IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
    Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
    Go Parallel Article: Getting Started with TBB on Windows
    HP eBook: Storage Networking , Part 1
    MORE WHITEPAPERS, EBOOKS, AND ARTICLES
    Webcasts
    Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++
    HP Video: Is Your Data Center Ready for a Real World Disaster?
    Microsoft Partner Portal Video: Microsoft Gold Certified Partners Build Successful Practices
    HP On Demand Webcast: Virtualization in Action
    Go Parallel Video: Performance and Threading Tools for Game Developers
    Rackspace Hosting Center: Customer Videos
    Intel vPro Developer Virtual Bootcamp
    HP Disaster-Proof Solutions eSeminar
    HP On Demand Webcast: Discover the Benefits of Virtualization
    MORE WEBCASTS, PODCASTS, AND VIDEOS
    Downloads and eKits
    Microsoft Download: Silverlight 2 Software Development Kit Beta 2
    30-Day Trial: SPAMfighter Exchange Module
    Red Gate Download: SQL Toolbelt
    Iron Speed Designer Application Generator
    Microsoft Download: Silverlight 2 Beta 2 Runtime
    MORE DOWNLOADS, EKITS, AND FREE TRIALS
    Tutorials and Demos
    IBM IT Innovation Article: Green Servers Provide a Competitive Advantage
    Microsoft Article: Expression Web 2 for PHP Developers--Simplify Your PHP Applications
    MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES