Color Matters: Design: Color, the Chameleon of the Web

by Jill Morton - October, 1998

One hundred and ten years ago, Vincent van Gogh applied a thick impasto of yellow paint to his canvas and captured the spirit of the sun-drenched Mediterranean countryside. Today, the glowing yellows, rich ochres and earthy browns of his "Sunflower" series can be viewed in museums from Amsterdam to Tokyo. These same paintings, when viewed on the web, will most likely appear radically different. The golden yellows may shift into slimy chartreuses, the earthy siennas may dissolve into lifeless grays and the sparkling warm highlights may appear icy blue. To make matters worse, the bouquet of flowers may also appear to be inside a dimly lit closet instead of a bright sunlit room. In fact it's safe to say that some degree of these color mutations will occur in a majority of graphics on the web.

The instability of color on the web is due to a number of factors. In the case of van Gogh's sunflowers, even if the original scan were "color correct" and even if a computer with full color correction and synchronization were used for the creation of the final web image, these sunflowers would reside on a web site, which would be viewed through the filter of the web browser's inadequate color capabilities. Furthermore, the differences in color vision of the viewer's operating system and monitor would most likely destroy any possibility of color accuracy. The most basic explanation for color instability stems from differences in "gamma" and the actual color space created by the operating system and monitor. First of all, gamma is responsible for the lightness and darkness of images. Since different operating systems are based on different standards of gamma, many of which don't have sufficient gamma correction, color mutations occur. The most common effect can be compared to viewing an image through dark sunglasses. In addition to this, each computer will be operating within its own color space. Earthy brick tones created in one color environment may shift into cosmetic pinks in another. A corporation's teal green logo is guaranteed to be any number of variations of blues and greens on the web.

Fortunately, the future is promising. The first step in cross platform color stabilization occurs when information about the color space and gamma are embedded in the graphic image. Apple computer's ColorSync® is one option. By definition, a stable color management system exists within the whole operating system. Next, a ColorSync filter is used in Photoshop to embed color profiles prior to converting the graphic to a gif or jpeg for the web. Another promising solution can be found in the new graphic file format, PNG (pronounced "ping"). Images created in Photoshop® can saved as PNG. In both instances, the graphic image stores extra chunks of information about the colors. The final step occurs when the viewing application knows what to do with it. At this level, the web browser reads the information and adjusts it by transforming the RGB and gamma values into ones that will display on the local system in much the same way the original values appeared on the originating system. At the present time, Microsoft Explorer for Mac only, can read the color profiles embedded in gifs and jpegs with the ColorSync® filter. Capabilities within Netscape Navigator for Mac and PC's as well as MSIE for PC's are expected soon. As for PNG, Netscape Navigator 4.04 and later for Macintosh and Microsoft Explorer (4.0 and later) for PC's support PNG images embedded via <IMG SRC="graphic.png">. More information can be found at the following url's: ColorSync® - www.apple.com/colorsync/ PNG at colormatters.com/

Beyond the technical aspects of color on the web, color exists as a powerful communicator. To van Gogh, it was the color, not the actual image of the sunflowers, that delivered the expressive content of his paintings. Although a web site is not a static two-dimensional image, the colors will either work for or against the content. There is no gray area. Sunflower yellow may reinforce the warmth and cheerfulness of a tropical resort's site or it may destroy a law firm's site with its connotations of cowardice.

Designers must subject their web color selections to stringent cross-examination. If the color lacks solid symbolism aligned with the content of the site, the color may communicate in surprising ways. Consider the color purple. It may work as a symbol of creativity for Pagemaker's packaging, but it's a polarizing color. People either love it or hate it. Furthermore, it's potentially hazardous on a global level. Although it is associated with spirituality, mystery, aristocracy and passion, it may also symbolize mourning, death, nausea, conceit and pomposity. A significant example of purple failure is the initial design of EuroDisney's signs. The color palette was intended to rival Coca Cola's red, but the final selection of vast amounts of purple was a tragic mistake. Purple symbolizes death and the crucifixion in Catholic Europe. It's not surprising that visitors thought the signs were morbid. How did this happen? The CEO liked purple.[1] Personal preference and "avant-garde" tactics frequently cause color disasters. When the wrong color is used on a web site, the damage extends to a global audience.

Web site designers should treat the symbolism of color as seriously as the design of graphics and layout. At the very least, the timeless associations of color should be considered. For example, red is the color of fire and blood. Not by any stretch of the imagination could it be associated with serenity or dependability.

When color and form are combined, the symbolic power increases. White carnations signify death in Japan; green hats signal that a man's wife is cheating on him in China. If a specific global market is targeted, web site designers must investigate all aspects of regional color symbolism. All things considered, American designers must question their self-contained experiences and expand their global sensitivities.

Color's capacity to mutate both technically and symbolically on the web can happen at the same time. Since colors may wind up much darker on different computers, a dignified navy blue background used for an airline's web site may turn out black. Not only is this hue associated with death, it is a heavy color, one which is not associated with the lightness required to keep the aircraft in the air. Designers should preview their site designs on several operating systems and different web browsers to ensure the best possible results.