Choosing Color in Fireworks MX

---

To choose a color, click a color box in the Property inspector or Tools panel. There are many color boxes in Fireworks. A color box is available for any feature that has a color choice (such as canvas color) and for characteristics such as fills and strokes. A color pop-up window opens (Figure 16-1). Move the cursor to a color and click. The color window uses a preset swatch group called Color Cubes by default. You may change, add, and delete colors from the color window.

Figure 16-1: Clicking a color box opens a color pop-up window. There are additional options available in the Options menu.

Tip 

PC users can sample a color anywhere in the Fireworks environment by simply passing the Eyedropper cursor over a color and clicking. PC users can however sample a color from anywhere including the desktop by clicking and dragging the cursor and releasing the mouse to sample a color. Mac users can sample a color anywhere including the Windows desktop by simply passing the eyedropper cursor over the desired color and clicking.

To use custom colors, click the System Color Picker icon (see Figure 16-1). The Color dialog box in Figure 16-2 opens. You may enter RGB (red, green, blue) or HSL (Hue, Saturation, Lightness) values, add a color to the palette, or select a color from the color field. Notice that if you click a color, the sliding bar shows variations of the color you selected. This is a great way to choose a lighter or darker version of a color.

Figure 16-2: The Color dialog box that opens when you click the System Color Picker icon

Note 

System Pickers vary for the Macintosh platform but the methods are similar.

Click the Color palette's Options menu to access the following options:

• Swatches panel — The panel you have set up or customized in the Swatches panel (Window ® Swatches).

• Color Cube — The default swatches, which are Web-safe.

• Continuous Tone — The color swatches are arranged by tone.

• Windows OS — The color swatches for the Windows OS.

• Mac OS — The color swatches for the Mac OS.

• Grayscale — The 256 Grayscale swatches.

• Snap to Web safe — If this option is selected, any color you sample is snapped to the nearest Web-safe color.

Caution 

If you use the Eyedropper to sample a color from an object but you notice the color shifts, and you want to use the actual non-Web-safe color, be sure that Snap to Web safe is unchecked.

Cross-Reference 

Chapter 23 shows how to optimize image colors precisely and export the color palette as a custom swatch set.

Customizing the Swatches panel

The color cube display you see in the color pop-up window is the default found in the Swatches panel (Window ® Swatches). It uses 216 Web-safe colors defined in Hexadecimal notation. You can add to the Swatches panel by mixing your own custom colors in the Color Mixer (Window ® Color Mixer) or by using the Eyedropper tool to sample a color.

Loading saved color palettes

If you have a custom color palette you would like to add, be sure it is a GIF file or an ACT file. ACO files can be loaded as well (refer to the following Tip). To load a saved palette, follow these steps:

1. In the Swatches panel, open the Swatches Options menu, and choose Add Swatches.

2. Select the appropriate file (a saved ACT or GIF file), and click OK.

Adding swatches extends the existing palette. If you want to use only a saved palette, you need to choose Replace Swatches; when you choose Add Swatches, the swatches are added to the bottom of the current panel.

Tip 

You can force Fireworks to use Photoshop ACO files, too. Use the Swatches panel options to choose, Add, or Replace Swatches. In the dialog box, locate the folder where you know a Photoshop ACO file resides. In the File box, type "*.aco" and press Enter or Return. You should see your ACO files. Choose the file you want, and click Open. Be aware that the palette may not be organized and displayed the same as it is in Photoshop.

Understanding Web Color

It's important to understand that monitors represent color as RGB — Red, Green, and Blue. The hexadecimal system is the standard way to specify RGB color for use in HTML documents. Hexadecimal values use base-16 mathematics, not the standard base-10 counting system. The 16 values used are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. A color is defined using three sets of two-digit numbers. You won't have to know how to convert RGB into hexadecimal unless you want to; however, you should understand the difference in the numbers when you see them. You'll begin to see how the hexadecimal coding system works as you learn more about using Web-safe colors.

Export the current export palette

Fireworks MX makes it easy to save a palette of the colors in the file you have open, which is a valuable tool when multiple designers are working on the same site design. By using a custom palette of colors, everyone involved can use the approved colors.

To export a palette, follow these steps:

1. Open any file.

2. Be sure the Export File Format is set to GIF in the Optimize panel. If you don't see the colors, click the Rebuild button.

   Cross-Reference 

   The Optimize panel is covered in Chapter 23.

3. Open the Swatches panel if it isn't already; open the Swatches Options menu, and select Current Export Palette. You'll see the current colors in the Swatches panel.

4. Click the Swatches Options menu, and select Save Swatches. Save anywhere you'd like. Fireworks saves in the ACT (Active Color Table) format.

   Note 

   If the option Current Export Palette is grayed out and you have an Export File format of GIF or Animated GIF, WBMP, PNG 8, TIFF8, BMP8, click the Rebuild button to show the colors in your image. The Current Export Palette option becomes available.

---