Color considerations for the web

If you have a print background, you are likely to be familiar with the cyan, magenta, yellow, black (or simply CMYK) color space. What is a color space? A color space simply refers to the colors that can be shown using various methods. RGB (stands for Red, Green, and Blue) and CMYK are examples of color spaces.

CMYK color space

CMYK color space closely resembles the artist color wheel, consisting of primary colors as red, blue, and yellow. As mentioned earlier, CMYK color model has the primary colors as cyan, yellow, and magenta, and the secondary colors as red, green and blue. The CMYK model is referred to as subtractive because in the model superimposed layers of primary colors absorb certain wavelengths of light and reflect back the desired color. See figure 1.

Figure 1 CMYK color model From a theoretical perspective, the model should create black when all primary color values are set to 100 %, which results in absorption of all white light. However, in practice a dark brown is created using these primary colors as described. So the color black is added to complete the model. The CMYK model is appropriate for print media.

RGB color space

The RGB color space is exactly the inverse of the CMYK color model, figure 2. In the RGB model, primary colors are red, green, and blue, while the secondary colors are cyan, yellow, and magenta. Unlike CMYK, RGB is an additive color model, which means the colors produced by combining certain wavelengths of light.

Figure 2 RGB color model The model is used in computer displays, and television screens as monitors produce color by firing red, green and blue electrons. For the web, RGB is the appropriate format to use.

In the web design world, the RGB format is the most common choice of use of colors as this format shows much of the visible spectrum of color. Furthermore, the RGB format is the default format for most web development programs and is the native color mode for monitors.

To produce a color on the monitor, different amounts of the red, green, and blue light spectrums are added. Thus, each pixel is a specific combination of red, green, and blue light. In RGB, while white is the presence of all colors, black is the absence of color.

In the printing world, color choices affect the costs of producing printed material. However, this is not the case in web design. For the Web, it does not cost you extra whether you use two colors or two thousand colors.

It does not mean the Web is perfect for showing all colors. First of all, color appearance is dependent on the hardware. Color contrast (gamma) variations of operating systems influence the display of a particular object shown on the Web. By default, gamma on UNIX machines is 1.7, 1.8 on Mac, and 2.2 on Windows. As a result, Mac is expected to show darker web content darker than Windows machines.

Secondly, color choices may lead to varied color display experiences, especially with old monitors. You may have heard the "Web-safe" colors. It is worth pointing out in case you ever need to know.

The video card of a computer determines how many color can be viewed on a monitor. A few years back, computer supported displaying of millions of colors but this required the user to change the default 256-color setting on his monitor. However, the average user did not have a clue about changing the default color settings to enjoy all the different color combinations. Consequently, web design historically focused on designing web content to just the default 256 colors. Note, monitors now are shipped ready to display millions of colors without user having configure color settings.

Interestingly, there are 216 colors shared by both PCs and Macs. This information is significant as it conveys regardless of the shared 216 colors you use, your web content will look the same as it does to the designer as well as to the user.

In the 1990s, computer monitors used 8-bit color depth, which meant they could only display 256 colors (2 ^ 8 = 256) at any time. So at the time it made sense to use just those colors for the web content. Thus these colors are referred to as web-safe colors. As a further complication to color display compatibility issues, 40 of the web-safe colors are different on Windows and Macintosh, leaving only 216 colors that would results in consistent displays across these platforms.

As alluded to earlier, most users today have monitors that support more colors because of increase in bit screen rates. For instance, a monitor with 16-bit color can support thousands of colors, 65,536 to be exact (2 ^ 16 = 65,536). A monitor with 24-bit color can show millions of colors: 2 ^ 24 = 16,777,216.

What happens if the color you specify for the Web is not available on a particular monitor? The browser finds a close substitute color. The process of finding closely matched colors is known as dithering. Unfortunately, the dithering process is not reliably able to simulate unavailable colors. The resulting content appears with dots of visible color.

Factors influencing color choices

Because the web has perhaps the greatest user diversity than any other information outlet media, it is important to consider the implications of your color choices for your website. There are number of factors that influence or should influence web color decisions. Those factors include color connotations, cultural differences toward use of colors, and color psychology.

Color connotations

If you have developed any interfaces for human-computer interactions, you are likely to be aware of the roles colors play to the success of the interface. Certain colors or some colors in combinations have some meaning associated with them. As developer of interfaces, especially in the context of developing websites, it is important to pay attention to the meaning of the color.

The color red, for instance, conveys passion and excitement. However, it can also have negative connotation in the context of financial matters (i.e, red expressing deficits) or just danger (i.e., stopping for an approaching red light traffic signal). The color green, on other hand, can represent money, go (as green light traffic signal), nature, etc. So you are getting the idea depending on the context some colors can have both positive and negative connotation.

For the sake of completion, the following provides a list of some common connotations for common colors:

• Black: death, darkness, style, etc.
• Blue: coldness, conservatism, stability, etc.
• Green: fertility, growth, money, nature, etc.
• Red: danger, passion, violence, etc.
• Violet: power, strength, royalty, etc.
• White: cleaniness, peace, purity, etc.
• Yellow: brightness, illness, warmth, etc.

Culture differences

The significance of color is often culture-specific. When choosing colors for your website, your goal is to ensure the color you choose conveys the meaning to the appropriate cultural group(s) without being perceived as offensive or undesirable. A color or color combinations have specific use in cultures; same colors may not be used for similar purpose in all cultures.

What are some of the uses of colors? A color, for instance, can be used to represent expression of religion, political affiliation, or some shared mythology. The following points show use of colors having multiple purpose or opposite interpretations:

• In Japan red considered is to represent luck while in other cultures it represents danger or stop.
• In Chinese culture, the color white is associated with death, while purple is for the same purpose in some Western cultures.
• Many cultures interpret red and green to mean stop and go, respectively. However, some cultures even don’t use these colors for traffic signals as red and green are reserved for some other purpose!

Color Psychology

Beyond the various meanings associated with colors or cultural differences, certain colors produce positive or negative psychological reactions. For instance, a stock price decline movement shown in red may encourage you to sell your stock to minimize future loss. A stock price movement of moving up shown in green, on the other hand, may leave you wondering owning that stock, if you did not or a lot of it if you owned it.

As another example, if your want your website visitors to have relaxing or peaceful feeling, you may use the blue color. Use of the color yellow may not accomplish the same psychological reaction because it can cause aggravation.