Color Panels in Animate

Color models describe the colors we see and work with in digital graphics. Each color model, such as RGB, HSB, or CMYK, represents a different method for describing and classifying color. Color models use numeric values to represent the visible spectrum of color. A color space is a variant of a color model and has a specific gamut (range) of colors. For example, within the RGB color model are a number of color spaces: Adobe® RGB, sRGB, and Apple® RGB. While each of these color spaces defines color using the same three axes (R, G, and B), their gamuts are different.

When you work with the colors in a graphic, you are actually adjusting numerical values in the file. It’s easy to think of a number as a color, but these numerical values are not absolute colors in themselves—they only have a color meaning within the color space of the device that is producing the color.

Because each device has its own color space, it can reproduce colors only in its gamut. When an image moves from one device to another, image colors may change because each device interprets the RGB or HSB values according to its own color space. For example, it is impossible for all the colors viewed on a monitor to be identically matched in a print from a desktop printer. A printer operates in a CMYK color space and a monitor operates in an RGB color space. Their gamuts are different. Some colors produced by inks cannot be displayed on a monitor, and some colors that can be displayed on a monitor cannot be reproduced using inks on paper.

When creating colors for use in Animate documents, keep in mind that even though it is impossible to perfectly match all colors on different devices, you can achieve good results by considering the graphic display capabilities of the devices in use by your target audience.

Adobe Animate lets you apply, create, and modify colors using the RGB or HSB color models. Using the default palette or a palette you create, you can choose colors to apply to the stroke or fill of an object you are about to create, or an object already on the Stage.

When applying a stroke color to a shape, you can do any of the following:

• Apply a solid color, gradient, or bitmap to a shape’s fill. To apply a bitmap fill to a shape, you must import a bitmap into the current file. Select any solid color, gradient, and the style and weight of the stroke.

• Create an outlined shape with no fill by using No Color as a fill.

• Create a filled shape with no outline by using No Color as an outline.

• Apply a solid color fill to text.

With the Color panel, you can create and edit solid colors and gradient fills in RGB and HSB modes.

To access the system color picker, select the Color Picker icon  from the Stroke Color or Fill Color control in the Color panel, the Tools panel or Shape Property inspector.

The Color panel lets you modify the color palette of a FLA and change the color of strokes and fills, including the following:

• Import, export, delete, and otherwise modify the color palette for a FLA file by using the Swatches panel.

• Select colors in hexadecimal mode.

• Create multicolor gradients.

• Use gradients to produce a wide range of effects, such as giving an illusion of depth to a two-dimensional object.

The Color panel contains the following controls:

Changes the color of the stroke, or the border, of a graphic object.

Changes the color of the fill. The fill is the area of color that fills up the shape.

Changes the fill style:

Removes the fill.

Provides a solid, single fill color.

Produces a gradient that blends on a linear path.

Produces a gradient that blends outward in a circular path from a central focal point.

Tiles the selected fill area with a bitmap image that you can select. When you choose Bitmap, a dialog box lets you select a bitmap image on your local computer, and add it to the library. You can apply this bitmap as a fill; the appearance is similar to a mosaic tile pattern with the image repeated within the shape.

Lets you change the Hue, Saturation, and Brightness of the colors in a fill.

Lets you change the density of the red, green, and blue (RGB) colors in a fill.

Sets the opacity for a solid fill, or the currently selected slider for a gradient fill. An alpha value of 0% creates an invisible (or transparent) fill; an alpha value of 100% creates an opaque fill.

Displays the currently selected color. If you select a gradient fill type (Linear or Radial) from the fill Type menu, the Current Color Swatch displays the color transitions within the gradient you create.

Lets you select a color visually. Click System Color Picker and drag the cross-hair pointer until you find the color you want.

Displays the current color’s hexadecimal value. To change the color using the hexadecimal value, type in a new value. Hexadecimal color values (also called hex values) are 6‑digit alphanumeric combinations that represent a color.

Lets you control colors applied past the limits of a linear or radial gradient.

(Default) Applies the colors you specify past the end of the gradient.

Causes the gradient colors to fill the shape using a reflective mirroring effect. The gradients you specify are repeated in a pattern from the beginning of the gradient to the end, and then repeated in the opposite sequence from the end of the gradient to the beginning, and then back to the beginning of the gradient to the end until the selected shape is filled.

Repeats the gradient from the beginning of the gradient to the end until the selected shape is filled.

 Overflow modes are supported only in Adobe Flash Player 8 and later.

Creates a SVG-compliant (Scalable Vector Graphics) linear or radial gradient.

Swatches panel

Swatches enable easy reuse and update of colors across documents. You can now create tagged swatches by selecting a color from your swatches. Once you create a tagged swatch and apply it to shapes and paths in your Animate content, changing the color in the tagged swatch will automatically update all the content that is using it.  

Color your creations with Animate

Your content is incomplete without the required color and blend. Want to learn how to add fill and stroke your creativity? Watch the tutorial at the end of this example and follow these steps.

How to apply color to your creations in Animate

Color palettes

Each Animate file contains its own color palette, stored in the Animate document. Animate displays a file's palette as swatches in the Fill Color and Stroke Color controls and in the Swatches panel. The default color palette is the web-safe palette of 216 colors. To add colors to the current color palette, use the Color panel.You can import and export both solid and gradient color palettes between Animate files, as well as between Animate and other applications.

The default palette and the web-safe palette

Save the current palette as the default palette, replace the current palette with the default palette defined for the file, or load the web-safe palette to replace the current palette.

• To load or save the default palette, in the Swatches panel, select one of the following commands from the menu in the upper-right corner:

  Load Default Colors:

  Replaces the current palette with the default palette..

  Save As Default:

  Saves the current color palette as the default palette. The new default palette is used when you create new files.

• To load the web-safe 216-color palette, in the Swatches panel, select Web 216 from the menu in the upper-right corner.

Organizing and reusing colors

Swatches panel allows you to organize colors and color palettes in a hierarchical structure using Folders and Color Palettes.

Creating a folder

By default, all colors are arranged within the Default Swatches folder. You can arrange existing colors within folders using the Swatches panel. To create a new folder, do the following:

You can also create a folder by selecting a folder, color palette, or swatch and selecting the Duplicate as Folder option from the fly-out menu.

Creating a color palette (swatch group)

Color Palette is a group of swatches (colors) that signifies a color theme for your content. You can create color palettes within folders and add swatches to them. To create a Color Palette, do the following:

You can also create a color palette by selecting a folder, color palette, or swatch and selecting the Duplicate as Palette option from the fly-out menu.

Creating or adding colors to a color palette

You can create swatches or add existing ones to color palettes. To create a swatch, do the following:

You can also create a swatch by selecting a folder, color palette, or swatch and selecting the Duplicate as Swatch option from the fly-out menu.

Create or edit a solid color

You can create any color using the Color panel. If an object is selected on the Stage, the color modifications you make in the Color panel are applied to the selection. You can select colors in RGB or HSB, or you can expand the panel to use hexadecimal mode. You can also specify an alpha value to define the degree of transparency for a color. In addition, you can select a color from the existing color palette.

You can expand the Color panel to display a larger color space in place of the color bar, a split color swatch showing the current and previous colors, and a Brightness slider to modify color brightness in all color modes.

Duplicate, delete, and clear colors

Duplicate colors in the palette, delete individual colors, or clear all colors from the palette.

• To duplicate or delete a color, select Window > Swatches, click the color to duplicate or delete, and select Duplicate Swatch or Delete Swatch from the panel menu. When duplicating a swatch, the paint bucket appears. Click in the empty area of the Swatches panel with the paint bucket to make a duplicate of the selected color.

• To clear all colors from the color palette, in the Swatches panel, select Clear Colors from the panel menu. All colors except black and white are removed from the palette.