Introducing Color Basics - Flash

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 such an address 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.

This is the description for unlimited, full color, which is sometimes referred to as 24-bit color. However, many computer systems are still incapable of displaying full color. Limited color displays are either 16-bit or 8-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.
  • Because 8-bit and 16-bit systems are color challenged, they can only display 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, two near colors are placed in close proximity to fool the eye into seeing intermediate colors.
  • Although most color-challenged systems have the capability to adequately handle a few out-of-gamut colors without exceeding their palette, serious problems occur once their palette is exhausted. This means that your Flash site might look okay on a color-challenged system if it’s the first site visited when the system is started up. However, the site may look much worse after an hour of browsing the Web.
  • Some image formats, such as GIF, use a color palette, which limits them to 256 colors. This is called indexed color.
  • Calibration of your monitor is essential for accurate color work.

Discussing Web-Safe Color issues
Web-Safe Color is a complex issue but what it boils down to is this: The Mac and PC platforms handle their color palettes differently, thus the browsers don’t have the same colors available to them across platforms. This leads to inconsistent, unreliable color unless one is careful to choose their colors for Web design from the Web-Safe Palette. The Web Safe Palette is a palette of 216 colors that’s consistent on both the Mac and the PC platforms for the Netscape, Explorer, and Mosaic browsers. The Web-Safe Palette contains only 216 of 256 possible indexed colors because 40 colors vary between Macs and PCs. Use the Web-Safe Palette to avoid color shifting and to ensure greater design (color) control.

The Swatches Panel has an option, Web 216, which is accessible from the options triangle 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 tweening, transparent overlays, and alpha transitions, will not be snapped to Web-Safe Colors.

Using hexadecimal values
Any RGB color can be described in hexadecimal (hex) notation. Hexadecimal notation is used with HTML code and some scripting languages to specify flat color, which is a continuous area of undifferentiated color. Hex code is used because it describes colors in an efficient manner that HTML and scripting languages can digest. In HTML, hexadecimal is used to specify colored text, lines, background, 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

Applying ColorSafe and other solutions
There are a couple of valuable tools used to create custom-mixed Web-Safe Colors. They build patterns composed of Web-Safe Colors that fool the eye into seeing a more desirable 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 is an Adobe Photoshop plug-in that generates hybrid color swatches with this logic.
  • ColorMix is an easily used online utility that interactively delivers hybrid color swatches, much like ColorSafe.

Using color effectively
According to some developers, 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 that they will have good color. It’s given a lot of people the idea that color has some absolute quality.

But when there over 16 million possible colors, why settle for a mere 216? Or, if you do settle for 216 colors, you must understand 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. 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 this is done 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 tainted by placing it on those different-colored backgrounds. The lesson is that color is not an absolute it never was before computers and never will be. Just step into a computer classroom and note the range of variation between monitors. Do you think it’s any different out on the Web?

Perhaps there is one thing that is more important than color: contrast. Here’s a good test: Take a colorful design that you admire and render it to grayscale does it still work? Contrast is a major factor in good color composition. Good design almost doesn’t need color because it leverages contrast instead. So what’s the point? Consider your audience. Choose a color strategy that will enable the preponderance of your viewers to view your designs as you intend them.

For example, if your audience is the public schools, then you must 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 you audience.) On the other hand, if you are designing an interface for a stock photography firm whose clients are well-equipped art directors, then please use the full gamut. But in either case, understand that no one will see the exact same colors that you see. The variables of hardware, calibration, ambient light, and environmental decor are insurmountable. Here’s the bottom line: To achieve good Web design you’ll need to use color—to achieve great Web design your colors should leverage contrast as well.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Flash Topics