Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

  • Print
  • + Share This
From the author of

Creating Solid Colors: Color Picker

In addition to creating colors in the Mixer panel, you can create colors in the Color Picker window. This window offers a variety of color pickers. HSV (hue, saturation, and value) and HLS (hue, lightness, and saturation) present the available color space in a large circle that's easier to see than the small color-space bar in the Mixer panel. The CMYK Picker, RGB Picker, and HTML Picker work via color sliders. All the pickers display large swatches for comparing the current color with the new color you are defining.

With one exception, you can access the Color Picker from any fill-color or stroke-color box that pops up the current set of color swatches. (The Fill panel's fill-color box doesn't provide access to the Color Picker.) The following exercise shows one way to reach the Color Picker window and work with one of the color spaces.

To access the Color Picker:

  1. In the Toolbox or Mixer panel, click the fill-color or stroke-color box.

  2. A set of color swatches pops up.

  3. Click the Color Picker button (Figure 6). The Color Picker (Mac) or Color (Windows) window appears (Figure 7).

Figure 6

The Color Picker button appears on most of the swatch sets that you access via the fill- or stroke-color box. Click to access Color Picker window

Figure 7

The Mac's Color Picker window (top) offers six color pickers. Each picker has a set of sliders and value fields or visual representations of the color space. In Windows, you define a color by entering HLS and RGB values or selecting colors from the color-space window in the Color window (bottom).

To define a new fill color with the HLS Picker (Mac):

  1. Access the Color Picker from a fill-color box.

  2. From the scrolling list on the left side of the window, choose HLS Picker.

  3. The main portion of the window displays a circular representation of the HLS color space plus the appropriate sliders and entry fields.

  4. To define the new color, do one of the following:

    • Click and drag the crosshair cursor in the color space.

    • Enter new values in the Hue Angle, Saturation, and Lightness fields.

  5. Click OK.

  6. Flash updates the fill-color box in the Toolbox and relevant panels.

To define a new fill color in the Color window (Windows):

  1. Access the Color window from a fill-color box.

  2. Do one of the following:

    • To define a new color numerically, in the Hue, Saturation, and Luminosity (or Red, Green, and Blue) fields, enter the values for your new color.

    • To define a new color visually, click in the color-space window. The crosshair cursor moves to the spot you clicked and Flash updates the color values in the HLS and RGB fields.

  3. Click OK.

  4. Flash updates the fill-color box in the Toolbox and relevant panels.


  • You can ensure that your new color is safe for Web use. On the Mac, define the color by using the HTML Picker in the Color Picker window. Check Snap to Web color. Flash finds the nearest match for your color from the 216 Web-safe colors (Figure 8). In Windows, the Color window displays the current color in a split window; half of the window shows a dithered swatch, half shows a solid swatch. Double-click the solid swatch to force Flash to make the color solid, in other words, Web safe.

Figure 8

On the Mac, define a new Web-safe color using the HTML Picker in the Color Picker window (top). With Snap to Web color checked, Flash restricts the sliders to creating Web-safe combinations. In Windows, define Web-safe colors in the Color window (bottom). Double-clicking the Solid area of the current-color swatch forces the cross-hair to the nearest color that can be represented without dithering.

  • + Share This
  • 🔖 Save To Your Account