Color Theory

If you have a window nearby, look out. In the natural world, you have a wide range of colors. There's everything from the bright green of a new leaf to the shocking orange of an Arizona sunset. Between these bold extremes, nature shows her subtle hand in the soft blue sky, a slate gray rock, and the light tan patches on a cat's fur.

It should be of no surprise to you that the computer environment is more limited than nature. When you take a closer look at the Web environment, these limitations become even more stringent. Yet, an understanding of the colors that exist and how they work gives you an edge when it comes to using color in a way that leaves a lasting impression and works across all available browsers and platforms.

This part will help those of you who do not have a strong background in design look at a variety of color elements that impact design, including color types, properties, relationships, and special effects. For those of you with an artistic background, revisiting these elements will help you put them into the perspective of the Web.

You will find that FrontPage's approach to handling color is solid and offers color amateurs the ability to produce impressive results while giving the more professional developer options for creating the exact color schemes they are looking for.

Subtractive Color

Colors in the natural world are made up of pigments. Pigment is a substance that reacts to light. You might have heard it said that without light, there is no color. This is true, and without pigment, there is no variation in color.

Subtractive color is the theoretical premise on which color in the natural world is based. It's called subtractive because it absorbs light before transmitting or reflecting the results that your eyes perceive as color.

Subtractive color theory exists to help both industrialists and artists understand and try to re-create nature's own design. With this premise as a guide, pigments are re-created chemically in paints, dyes, and inks.

Remember the color wheel? A color wheel is a circular representation of subtractive color, with different colors making up pie slices within the wheel. The color wheel begins with what are known as the primary colors: red, blue, and yellow.

Each of these colors can be mixed together to come up with an entire spectrum of colors.

Digital information, however, is dealt with quite differently. Computers and computer hardware are limited in their capability to deliver color to a screen. You can't compete with Mother Nature! Those who attempt to compete with Mother Nature, especially in the Web environment, end up looking silly because they don't understand the limitations of color on the Web.

Because it's impossible for a computer to absorb light, it must generate light. Therefore, the type of color you see on your computers is backed by a theory referred to as additive synthesis.

Additive Synthesis

In additive synthesis, color is created by the addition of colors. Computers use three colors to do this: red, blue, and green. It's almost as if three individual paint guns are being fired at your screen, combining color and light to create variations.

Red, green, and blue color is referred to simply as RGB. As you work with digital color, this will be the technical foundation for the decisions you make. However, it's the subtractive world from which you gain your inspiration. It's important to keep this distinction in mind.

Why can the natural world make all colors from red, blue, and yellow, but computers cannot? It goes back to the difference between the capability to absorb versus the capability to transmit light, and how light then interacts with what is absorbed or transmitted. If you mix red and green paint, you'd get brown. But guess what happens when a computer mixes those same colors? The resulting color is yellow.

Computer Delivery of Color

Computers rely on three primary pieces of hardware to deliver color information to you:

• The computer

• The graphics card

• The monitor

It stands to reason, then, that the quality of color you see on your computer depends on the quality and capability of these components. If any one of these components is incompatible or unequal in its properties, the end result will not be as true and refined as possible.

NOTE

Unlike the print medium, where you can control how your final work is presented, the variables provided in the previous list dictate that you will never be able to get the exact result you are looking for.

Furthermore, computer platforms and operating systems have differing capabilities when it comes to color. The color capabilities on older systems usually are substandard when compared to the newer operating systems. Windows XP and 2000, Macintosh, and various Linux systems all have very good color control, but they use different methods to represent color. This can spell trouble if you view graphical images on different systems.

You must learn to work with (and understand) the color limitations and standards that exist. Knowing your own machine, and the capabilities of your viewing audience, will help you do just that.

Add to this the fact that any graphical interface, such as a browser, will affect the management of color, and you've got an important issue in color technology: In Web design, it is the browser that limits color significantly.

This is the bane of the Web designer's existence when it comes to color, but it's not insurmountable. FrontPage provides a number of color controls that will help you manage color effectively.

If you come from a graphics background or have worked with Photoshop or other professional graphics programs, you're probably familiar with other color management methods. One of the most familiar is CMYK (Cyan, Magenta, Yellow, Black). CMYK is a method used for print output. Other management systems include grayscale (which contains black, white, and gradations of gray) and indexed color (a limited palette of specific colors defined by the designer). In Web design, indexed color is extremely important.

For more information on issues of index color, see "Web Graphic Formats," p. 847.

Color Depth

If you pay any attention to the difference in video cards, the measurements of 8-bit, 16-bit, and 24-bit color should sound familiar. These values refer to the number of bits of computer memory required to represent the various levels of color depth.

These values mentioned aren't the only possible color depths, only the most popular. The simplest level is 2-bit color. This requires only two memory places one for the color white and another for the color black.

For every additional bit of memory, the number of possible colors increases. 3-bit color has 8 unique colors, and 4-bit color has 16. The next major color depth worth mentioning is 8-bit color. 8-bit color can display 256 colors. This is what Photoshop refers to as indexed color, and the GIF format still uses this color depth.

16-bit and 24-bit color include colors your eyes cannot even detect, with 65,536 and 16,777,216 colors, respectively. Somewhere among these colors are the hues of that Arizona sunset and the patches of a cat's fur. 24-bit color is often called photographic-quality color. The JPEG format uses 24-bit color.

Web designers use all these color depths, and FrontPage deals with each of these separately.

NOTE

If you've shopped around for scanners while looking for video cards, you've no doubt seen ads mentioning 30- and 36-bit color depths. These are 24-bit color scanners with an additional 6 or 12 bits added to measure the opacity of an image. These extra bits are called the alpha channel and define how much of the underlying image shows through used for transparent images.