Introducing Color Basics

Computer monitors display color by using a method called RGB color. A monitor screen is a tightly packed array of pixels arranged in a grid, where each pixel has an address. For example, a pixel that's located 16 rows down from the top and 70 columns over from the left might have an address of 70,16. The computer uses these addresses to send a specific color to each pixel. Because each pixel is composed of a single red, green, and blue dot, the colors that the monitor displays can be "mixed" at each pixel by varying the individual intensities of the red, green, and blue color dots. Each individual dot can vary in intensity over a range of 256 values, starting with 0 (which is off) to a maximum value of 255 (which is on). Thus, if red is half-on (a value of 127), while green is off (a value of 0), and blue is fully on (a value of 255), the pixel appears reddish-blue or purple.

The preceding paragraph describes unlimited, full color, which is sometimes referred to as 24-bit color. Newer computers use 24-bit color to deliver cleanly rendered graphics without a hitch. However, older computer systems are incapable of displaying full color. Limited color displays are either 8-bit or 16-bit displays. Although a full discussion of bit-depth is beyond the scope of this book, it is important to note several points:

• 24-bit color is required to accurately reproduce photographic images and smooth color transitions in gradients.

• Because 8-bit and 16-bit systems are color challenged, they can display only a limited number of colors, and they must dither-down anything that exceeds their gamut, which is their expanse of possible colors. Dithering means that, in order to approximate colors that are missing from the palette, the closest colors available are placed in proximity to each other to fool the eye into seeing a blended intermediate color. This can result in unwanted pixel patterns.

• Some image formats, such as GIF, use a color palette that limits them to 256 colors. This is called indexed color. Indexed color is ideally suited for reproducing vector graphics that have solid fills and strokes, but will often create noticeable banding (uneven color) when applied to photographic images.

• Bitmap (or photographic) images will not accurately translate an indexed color palette, so matching color between GIF images and JPEG images can be unpredictable because the JPEG will expand the original indexed palette of a GIF file to include colors that may not be within the Web-safe color palette.

• Calibration of your monitor is essential for accurate color work. For more information, check out the ColorVision Web site at www.colorvision.com.

Discussing Web-Safe Color Issues

Web-safe color is a complex issue, but what it boils down to is this: The Macintosh and Windows platforms handle their color palettes differently, so browsers don't have the same colors available to them across platforms. This leads to inconsistent, unreliable color — unless you're careful to choose colors for Web design from the Web-safe palette. The Web-safe palette is a selection of 216 colors that's consistent on both the Mac and Windows platforms for Netscape, Explorer, and Mosaic browsers. The Web-safe palette contains only 216 of 256 possible indexed colors, because 40 colors vary between Mac and Windows displays. Use the Web-safe palette to avoid color shifting and to ensure greater design (color) control.

By default, the Color Swatches panel (Ctrl+F9 or z+F9) loads with Web 216 colors, and if the swatches are modified, this swatch palette can always be reloaded from the Options menu at the upper right of the panel. Web 216 restricts the color palette to Web-safe colors. However, intermediate colors (meaning any process or effect that generates new colors from two Web-safe colors) — such as gradients, color tweens, filters, transparent overlays, and alpha transitions — will not be constrained to Web-safe colors.

When there are more than 16 million possible colors, why settle for a mere 216? Consider your audience. Choose a color strategy that will enable the majority of your viewers to view your designs as you intend them to appear. For example, if you're designing an e-commerce site for a very broad audience on a mix of platforms, then you might seriously consider limiting your work to the Web-safe palette. (If you choose this route, then hybrid swatches may enable you to access colors that are technically unavailable, while remaining within the hardware limitations of your audience.) On the other hand, if you're designing an interface for a stock photography firm whose clients are mainly art directors with high-end Mac machines, then color limitations are probably not an issue. In either case, keep in mind that no one will see the exact same colors that you see. The variables of hardware, calibration, ambient light, and environmental influences are unavoidable. If you do settle for 216 colors, remember that the value of color in Web design (or any design or art for that matter) has to do with color perception and design issues, and numbers have little to do with that.

Using Hexadecimal Values

Any RGB color can be described in hexadecimal (hex) notation. This notation is called hexadecimal because it describes color in base-16 values, rather than in base-10 values like standard RGB color. This color value notation is used because it describes colors in an efficient manner that HTML and scripting languages can digest. Hex notation is limited to defining flat color, which is a continuous area of undifferentiated color. In HTML, hexadecimal notation is used to specify colored text, lines, backgrounds, image borders, frame cells, and frame borders.

A hexadecimal color number has six places. It allocates two places for each of the three color channels: R, G, and B. So, in the hexadecimal example 00FFCC, 00 signifies the red channel, FF signifies the green channel, and CC signifies the blue channel. The corresponding values between hexadecimal and customary integer values are as follows:

16 integer values:	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
16 hex values:	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F

The Web-safe values in hexadecimal notation are limited to those colors that can be described using combinations of the pairs 00, 33, 66, 99, and FF. White is described by the combination FFFFFF, or all colors on 100 percent. At the other end of the spectrum, black is described by the combination 000000, all colors on 0 percent, or off. A medium gray would be described by the combination 666666, or all colors on 40 percent.

Using Custom Web-Safe Colors

The basic Web-safe color palette will be broad enough for most project needs, but if you feel too limited by these colors, you can create custom-mixed Web-safe colors. Tools exist to help you to build patterns composed of Web-safe colors that fool the eye into seeing a new color. These are essentially blocks of preplanned dithers, built out of the Web-safe palette, that augment the usable palette while retaining cross-platform, cross-browser color consistency:

• ColorSafe: An Adobe Photoshop filter plug-in that generates hybrid color swatches with this logic. ColorSafe (Mac and Windows) is available directly from BoxTop Software at www.boxtopsoft.com.

• ColorMix: An easy online utility that interactively delivers hybrid color swatches, much like ColorSafe. It is free at www.colormix.com. After you mix a custom dithered swatch, you can download it and save it as a GIF for import into Flash.

• More Crayons: Some designers have proposed an updated approach to Web color, with a suggested palette of 4,096 Web-smart colors rather than the traditional 216 Web-safe colors. For more information on this idea and tools for generating color schemes in an expanded Web palette, visit www.morecrayons.com.

After you've created some custom swatches and saved them to a folder on a local machine, you can use them in your Flash projects by importing the GIF directly to your document Library and using the Color Mixer panel to apply the GIF as a bitmap fill. Figure 7-1 shows two Web-safe colors used to create a custom-dithered GIF swatch and the mixed custom Web-safe color as it displays when it's imported to Flash.

Figure 7-1: Two Web-safe colors mixed to create a custom-dithered color. The dithered GIF file was imported to the Flash Library and the solid Web-safe colors used in the GIF were added to the Color Swatches panel.

Note that the dithered GIF color is displayed only in the Mixer panel under the Bitmap fill option, whereas the solid Web-safe colors can be added directly to the Color Swatches panel. We describe the steps for adding colors from a GIF file to the Color Swatches panel in the "Importing custom palettes" section later in this chapter, and we describe the steps for applying a bitmap fill in the section "Selecting bitmap fills."

Using Color Effectively

According to some designers, the issue of color on the Web has been seriously confused by the misperception that people can set numbers to give them Web-safe colors, and that, if they do this, they will have good color. Have you ever noticed that as soon as someone starts designing onscreen, it's as if he's forgotten anything he may have learned about legibility and design on the printed page? When designers get caught up in the excitement of layered patterns and multicolored text, they have a tendency to overlook the obvious problem, which is that the result is entirely illegible. Although we all want to be creative and unique, certain color rules can actually be more liberating than restricting.

Although unconventional design choices can add an element of surprise, a touch of humor, or just a visual punch that will help your layout stand out from the rest, it is vital that you don't compromise your end goal. When you get noticed, you want to deliver your message successfully — whether that message is "Buy this product" or just "Hey, this is a cool site." If you start to carefully deconstruct the layouts that grab your attention, you will probably find that there are consistencies to the choices that were made in the design, regardless of the content. You'll begin to notice that even the most bizarre or cutting-edge designs share certain features that make them eye-catching and memorable.

Much of the underlying strategy in a design may be transparent, or not consciously perceived by the viewer. But don't make the mistake of thinking that individual preference is completely unpredictable. The secret to successful design is leveraging the unconscious visual language that your audience is physically and culturally conditioned to respond to. Individual viewers may have specific preferences for certain colors or styles, but they will all recognize and understand many of the same visual conventions.

Although learning to apply all these conventions and to integrate them into your own design style can take years of study and practice, there are some fundamental "truths" that will serve you well, no matter how long you've been designing:

• Color is relative: Humans perceive color relative to the context of other colors in which the color is set. Most art schools offer at least one course about color. They often start with color experiments that are conducted with pieces of colored paper. An early assignment is to make three colors look like more than three colors — by placing small scraps of the same color on larger pieces of different colors. Students are always amazed to learn how much a person's perception of a single color is influenced when it's placed on different-colored backgrounds. Figure 7-2 shows how the same shade of gray can appear lighter or darker depending on the background color. The lesson is that color is not an absolute — it never was before computers, and it never will be to the human eye.

• Contrast is king: Only one thing is more important than color: contrast. Contrast is the relative difference in lightness or darkness of items in a composition. Here's a good test: Take a colorful design that you admire and reduce it to grayscale. Does it still work? Contrast is a major factor in good color composition. Figure 7-3 shows different amounts of contrast created by relative differences in value.

  To ensure a strong design, it can be helpful to work on your initial layouts in grayscale. When you have contrast working for you, then you can start to add color with the confidence that the design will not be visually muddy — or hard to read — because of poor contrast. Often, the same color scheme can be a disaster or a huge success, all depending on the contrast you create in the design. The concept of contrast also applies to other characteristics of your design — size, texture, even mood. Try to use contrast wherever you want to create emphasis or add drama. But remember: If you make everything huge and flashing red, or extra-small and pale gray, you will no longer have any contrast. The strength of contrast is in variety. Figure 7-4 shows how contrast can be achieved by varying the size and style of your text — even if the font stays the same. Create even more contrast by mixing fonts with different visual character: a sans-serif with thick strokes will contrast nicely with a script font with calligraphy-style strokes.

• Less is more: Keep in mind that the power of contrast should always be used in moderation. White text on black backgrounds can be great for headlines, but after more than a few paragraphs, it will make the reader feel as though her retina is actually being burned by the text on the screen — one of the best ways to keep someone from actually reading your copy. Also, don't be afraid of empty space; the impact of individual elements is often dependent on having a little room to breathe. One element in a striking color will be much more effective than a whole page filled with competing colors.

• Start at the beginning: Visual hierarchy is the best secret weapon in any designer's arsenal. Although you may not be sure what the most important element is in your design, if you don't give your reader a place to start, chances are you'll lose his attention. By deciding on the order of importance for elements in your design and then using contrast, size, and color to guide the reader through your layout, you'll create motivation for him to actually stick around long enough to absorb your message. Think of your content as the elements of a good story: In order to make the narrative compelling, you have to have a catchy intro, a juicy middle, and a rewarding ending or pay-off. You might argue that you want to let readers make their own choice about where to start (like starting at the back of a novel), but if you don't create a visual structure, the reader won't feel empowered to make any choices. Presented with a big muddle of uncertain order, he will most likely move on to a design where he can find the beginning, middle, and end at a glance, before deciding what he wants to read first. Figure 7-5 shows a layout with poorly defined visual hierarchy compared to an example with stronger contrast and clearer hierarchy. The page with the more clearly defined hierarchy gives the reader more clues about the order of importance of each element on the page. Of course, these examples don't even use color, but as we mentioned earlier, it can be best to plan the structure of your layout before adding color to support it.

Figure 7-2: The same gray circle displayed on different background values will appear to be darker or lighter by comparison.

Figure 7-3: Varying levels of color contrast determine legibility and emphasis.

Figure 7-4: Variety in the size and shape of elements will also add visual contrast.

Figure 7-5: Adding contrast to a weak design (left) makes for a stronger visual hierarchy (right) and orients readers in your layout.

Here's the bottom line: Color can help a good design look great, and when used with strategy, it can help engage the viewer and sell your message. But no amount of color can save a poorly planned design, so consider the underlying structure, contrast, and visual hierarchy of your layout before adding color.

Innumerable books on color theory and many different software solutions that can provide inspiration and take the guesswork out of choosing color schemes are out there. These are just two sources that can help you create harmonious color families for your designs:

• Color Schemer: A handy utility that will generate a palette of harmonious colors for any key color that you want to start with. Although the full version of the software is for Windows only, the online version is helpful regardless of what platform you use. Try it out at www.colorschemer.com/online.html.

  You can generate lists of RGB or hexadecimal colors from the Web-safe palette and choose to darken or lighten all colors in the palette until you find the exact color set you like. Color Schemer also offers a basic color tutorial that will help you understand how to generate harmonious palettes. You can find it at www.colorschemer.com/tutorial.html.

• Pantone Guide to Communicating with Color: A wonderful reference book by color guru Leatrice Eiseman (published by North Light Books in 2000). This colorful book includes a wealth of information about the science and psychology of color, as well as a guide to a whole range of color families, grouped according to mood. Get inspired to add meaningful color to your projects.

Tip 

The Pantone system for specifying ink color is the industry standard for communication between designers and printers. Pantone swatch books are indispensable and well worth the investment if you do any print work. Visit www.pantone.com to learn more. Pantone has also developed systems to help designers and retailers who need to specify and display color consistently in a digital environment. Visit www.therightcolor.com to learn more if you are developing online catalogues or other projects that require precise color matching. Pantone also offers swatch books with both CMYK and Hex color values printed on them to make color matching between screen graphics and printed graphics easier. If you are a designer who "thinks in Pantone," you might find it worthwhile to invest in Pantone's Colorist software. Available for Windows and for Mac, Colorist makes Pantone swatches available from programs that do not have built-in Pantone color libraries (including Flash and Fireworks).