Using the Color Palette panel in Fireworks CS3

Additional Requirements

Color Palette panel v1.25

• color_palette_v1.25.zip (ZIP, 144K)

The majority of designers like me are probably not completely satisfied with the default Color Mixer in Adobe Fireworks. Several years ago I developed a command panel for Macromedia Fireworks MX that helped me brainstorm and create colors, such as seeing the blending of two colors, creating and swapping color schemes, and implementing a unique way to select colors in Fireworks.

The first version I initially developed received a lot of positive feedback from the Fireworks community, which motivated me to make a new version that is actually now installed by default in Fireworks CS3. I again received good feedback from the beta testers, and in beta I was able to make slight modifications to make the experience smoother based on their feedback. However, due to my daily workload, I didn't have time to make any major changes to the architecture or add new features.

Since the time I originally developed the Color Palette panel in Flash 7 (ActionScript 1.0), the latest version of Flash has new capabilities that have opened up new possibilities. Now that Fireworks supports ActionScript 3.0 for developing these types of panels, even more doors have opened to greater functionality. This article gets you up to speed on the new Color Palette panel in Fireworks CS3.

Introducing the Color Palette command panel

The Color Palette (see Figure 1) is intended to improve your workflow while you experiment and work with colors in Fireworks CS3. This command panel ultimately helps you to find a color or complete color scheme for your web layouts and designs.

To open the command panel, select Window > Others > Color Palette.

The Color Palette command panel is not a modal dialog box, which would prevent you from performing any actions until you close the panel. Rather, you can dock it on the main interface with other panels. You can change the states of the Color Palette by selecting options in the pop-up menu at the top of the panel (see Figure 2).

The new update for the Color Palette command panel sports many improvements:

• New interface to improve the user experience (menu-driven panels instead of tabs)
• Enhanced color sliders that are more consistent with Adobe Photoshop and Adobe Illustrator
• New menu option called Named Colors with predefined colors
• Performance improvements to speed up common tasks
• Ability to see color schemes update in real time when rotating the color wheel
• Ability to work and apply colors to active selections for stroke and fill

Choosing colors with the Selector panel

One big benefit of the Selector panel (see Figure 3) that I use often is converting a color from one model to another. The Selector panel gives you the ability to convert color values to RGB, HSV, HLS, or CMYK color models, as well as select the appropriate web- or non-websafe color. You may edit color components like hue, lightness, saturation, brightness, and tune the values of red, green, blue, cyan, magenta, and yellow. This effectively solves the designer's never-ending task of converting a color given by a customer or another designer and using it in the color scheme you are working with at the time. In addition, grabbing a color from the HLS graphical display is handy when you just need to find a color quickly.

Selector panel controls:

1. Color model switcher
2. Small HLS visual graphic display
3. Ranking regimes switcher
4. Color sliders set
5. Current color and stroke/fill switcher
6. Nearest websafe color

Note: Fireworks documents are based on the RGB color model; the Color Palette's CMYK tab is simply a calculation. Although the conversions in the CMYK model are accurate, they are intended only for achieving an approximate color estimation.

The Color Palette presents the value of the color you selected in four ranges: byte, percent, degree-byte, and degree-percent (see Figure 4). The color values in RGB and CMYK models are ranged in byte or percent rates only.

The Selector panel now works with a selected object on the canvas by letting you change the color of a stroke or fill of the selected object (see Figure 5). The Color Palette determines which property you wish to edit by which property is currently active: stroke or fill. After picking a color, you can decide if you want to find the nearest websafe or non-websafe hexadecimal value for the color—the color that will be consistently displayed in all browsers across different operating systems.

Note: At present, the Color Palette doesn't let you edit the gradient fill of an object. It also does not work with groups of objects. In this case, it's better to use the standard tools in Fireworks.

Developing color schemes with the Mixers panel

Usually a website design is based on three or four basic colors and their gradations. Often, using a large number of unrelated colors diverts attention and could damage the integrity of the design. With the Mixers panel, you can select four basic colors and edit them with ease (see Figure 6). The gradations of these colors are suitable for creating minor design elements such as text fields and vector shapes like a header or a stroke when rapidly prototyping layouts.

Mixers panel controls:

1. Buttons for the current color palette export; export a color scheme in a new document or as a external color table (ACT) file
2. Buttons for batch searching and replacing of colors (swap palette functionality)
3. Table showing colors from the current color palette
4. Color wheel
5. Link/unlink colors button; change the hue for all four colors at the same time, or break the link and edit separately

You can save the color scheme in two ways from the Mixers panel: as a bitmap image (BMP) or as a color table file (ACT). The parallel color schemes (Palette1 and Palette2) to the left of the color wheel allow you to replace the color scheme in a document with just one click. Suppose you are making a web design that you need to show to a client in different color combinations. You select the colors from Palette1, do your great design, and save the document. After that you edit the colors in Palette2. Now all you have to do is click the ''Replace'' button to swap color schemes from Palette1 to Palette2 or vice versa. The Color Palette does all the work for you—after a few seconds your sketch is updated with the new colors!

Note: At present, the swap palette functionality works for vector elements only; it doesn't change the colors in images. Another limitation you should be aware of is that the panel currently doesn't update colors in graphic symbols, animation symbols, or button symbols.

Download the sample file (template.png) in the Requirements section of this article to test the swap palette functionality for yourself (see Figure 7).

Creating gradients with the Blender panel

The idea behind the Blender panel (see Figure 8) is straightforward: you get the gradient between two colors and have the ability to choose the number of intermediate colors. It's simple, yet very effective.

Blender panel controls:

1. Gradient table for showing color gradations between the two base colors
2. Gradient slider for choosing the number of intermediate colors
3. Base color selectors for picking the beginning color and end color

Selecting named colors

Sometimes your stakeholders give you colors specified not by a numerical definition, such as an RGB value, but by a name. At present there are standards for named colors for the web. These color names are included in the W3C's CSS3 Color Module Candidate Recommendation from May 14, 2003. To be compliant with W3C recommendations, modern browsers must use these color specifications if you define your colors by their names. However, it's always safest to use the RGB definitions for your web colors.

Searching the W3C specifications for the definitions of named colors takes time. The Named Colors panel (see Figure 9) contains a set of more prevalent named colors, grouped by chromaticity (hue). Simply select the named color to get its hexadecimal RGB value.

Named Colors panel controls:

1. Palette selection
2. Palette color table

When the Color Palette panel is opened for the first time, a file called colors.xml gets generated that contains all the named colors. This allows you to modify the named colors list and create your own named colors for specific projects or to share among your team.

The colors.xml file can be found here:

• Windows: C:\Program Files\Adobe\Adobe Fireworks CS3\Configuration\Command Panels\Others\Color Palette Files
• Mac OS: HD/Applications/Adobe Fireworks CS3/Configuration/Command Panels/Others/Color Palette Files

Where to go from here

I hope this information about how the new Color Palette command panel (v1.25) works improves your workflow in Fireworks CS3. A future version will hopefully include integration with kuler (from Adobe Labs), export and import different file formats that have color schemes, and also allow you to select and edit personal color schemes.

For more information, check out these resources from Wikipedia:

• HLS color space
• HSV color space
• CMYK color model
• X11 color names