OK, Fireworks class, let's see a show of hands: How many people understand how to really use the color tools in Fireworks MX? About 80% of you! Now, how many people understand the hexadecimal code behind colors? Hmmm....about 50%! Now, how many understand the mathematics behind blend modes? Wow...only 10% of you?

While nearly all of us use Fireworks to create great looking graphics for our Web sites, a great many do not understand the science of color. I say science because there is a definite mathematics behind it. While I am not advocating doing complex math formulas every time we create a graphic, you will see that an understanding of the mathematical concepts will help us use the many color tools, available in Fireworks MX, better.

This month, we are going to take a slight departure from my usual hands-on approach to delve into the realm of the theoretical. However, you are certainly encouraged to experiment on your own and, hopefully, you will be able to do some great things with colors.

Color
Not that long ago, as Web graphic designers, we only had 216 colors to choose from. These were referred to as "Web-safe" colors that all browsers treated the same way. Any other color was, at best, a gamble as to what the browser would show.

That is no longer the case; today we can use millions of colors to tell our story, with a reasonable expectation of browser accuracy.

Despite the millions of colors, all Web colors are based on only three colors: red, green, and blue. We sometimes call these the Trichromatic colors. As we will soon see, what we call color is actually the term Hue. By changing the mix of those three hues, we can create brand new hues.

We use the hexadecimal system, or hex, for the amount of red, green, and blue in each hue. Let's take a look at how that works.

A hex represents a number between 1 and 15. The first 10 numbers are represented by 0-9. The next six numbers are represented by the letters A-F. Thus, A = 10, B = 11, C= 12, all the way to F = 15.

The amount of each of the three basic hues is measured on a scale from 0 to 255. But, if that is the case, how does a number between 1 and 15 add up to 255?.

Each color is represented by a two-digit hexadecimal representation. For instance: #AF, or #32, or #A3. We always begin with the number on the right; and that is always multiplied by 1. The number, or letter, on the left is always multiplied by 16. The results are then added together. Thus, #A3 would result in the following calculation:

(3 * 1) + (10 * 16) = 163

Remember, A = 10.
#FF would be:

(15 * 1) + (15 * 16) = 255

That's how we get our hue to 255.

But remember, we are working with three colors here: red, green, and blue. If we were to go into Fireworks and select the hue of Yellow, we might see a hex code of #FFFF00.

The first two hex digits are the amount of red, the next two the amount of green, and the last two the amount of blue. Thus, in this case yellow would have a red hue of 255, a green hue of 255, and no blue at all.

Just for a reference:

#000000 = Black
#333333 = Dark Gray
#CCCCCC = Light Gray
#FFFFFF = White

Try experimenting with different colors and work out the amount of RGB for each.

Blend Modes
When we work with a program like Fireworks MX, colors are not completely isolated from each other. We work with layers where objects sit on top of one another. We can control how the colors of these objects interact with each other by using the Blend Mode.

As a little experiment, try drawing three overlapping circles of different colors (see Image I).

 

We can then open the blending mode in the Property inspector (see Image II).

 

You can use the three circles, from Image I, to try out the blend modes above.

When we talk about Blend Modes, you need to know three terms:

• The Base Color can be thought of as the background color. If you work with layers, think of it as a color in a lower layer.
• The Blending Color is the foreground color. Think of this as a color in a higher layer.
• The Result Color is the new color created from the blend.

Multiply takes the base color and multiplies it by the blend color so that:

Result = (Blend * Base)

Invert is a bit more involved. You have to multiply, then invert the result by 255. The resulting formula is:

Result = 1/255 (Blend*Base)

You will recall, from the hex discussion, that the smaller the number the darker the color.

Darken compares the Base and the Blend colors and uses whichever has the smallest value. This translates to the formula:

Result = min{Blend, Base}

Needless to say, Lighten does the opposite by selecting the maximum of the two colors.

Result = max{Blend, Base}

Difference subtracts the darker color (lower value) from the lighter color (higher value).

The other terms - Hue, Color, Saturation, and Luminosity - also have mathematical relationships. However, because of the complexity let's content ourselves with a description.

As we stated earlier, hue is the actual shade of the color. This blending mode takes the blend color and blends it with the luminosity and saturation of the base color.

Saturation measures the pureness of the color with respect to white. For instance, if you blend white with blue, blue's saturation decreases and moves toward pink. Without white, the saturation is 100 percent. This blend mode takes the saturation of the blend color and blends it with the luminosity and hue of the base color.

What we usually call Color is actually the result of blending the hue and saturation of the blend color and the luminosity of the base.

The Luminosity is actually the brightness. This is calculated by blending the luminosity of the blend color with the hue and saturation in the base.

The Erase feature erases the background color.

Finally, Tint is used to add gray to the background color.

Color Modes
Now that we have an understanding of hexadecimal code, and blending modes, we can take a look at the other color modes that Fireworks MX has to work with.

If you open the Color Mixer and click on the Options Menu for the panel, you will see the alternative modes.

Like hexadecimal values, RGB defines colors as a ratio of red, green, and blue. The combination of the levels of the red, green, and blue is specified as a value between 0 (no color) and 255 (pure color). So, for example, pure red has a value of 255, 0, 0; pure blue is 0, 0, 255; pure black is 0, 0, 0; and pure white is 255, 255, 255.

CMY (Cyan Magenta Yellow) is used mostly in full-color printing, As opposed to the RGB model, CMY defines individual colors as a combination of cyan, magenta, and yellow. Again, values are between 0 (no color) and 255 (pure color). For example, pure magenta has a value of 0, 255, 0. In the reverse of the RGB model, however, pure black is 255, 255, 255, and pure white is 0, 0, 0.

The HSB (Hue Saturation Brightness) model defines colors in the same way that humans perceive color. In this model, each color is defined as a combination of the pure color in question (the hue), the relative brightness of that color from black (no brightness) to white (full brightness), and the saturation of the hue from gray tone (no saturation) to pure, vivid color (high saturation).

Grayscale is just what you think: you work in black and white, defining all possible colors as a percentage of black, where pure black is 100% and pure white 0%.

Opacity
We have one other tool available to us that we often don't associate with color: opacity. Opacity is actually a fancy word for transparency. An opacity of 100% is a solid color, and an opacity of 0% means completely transparent.

If you combine opacity with the Blend Modes, you can get some very fine gradations of blend. I strongly recommend that you use the three circle objects shown in Image I and experiment with blend modes and opacity.

Summary
This was a quick tour of the science behind colors. Now it's up to you to develop the art. While we saw the mathematical relationships of these various color tools, the mathematics now opens up endless possibilities.

Layers, coupled with Blending Modes and opacity, can add stunning effects to our graphics.