User Guide Cancel

Color Panels in Animate

Last updated on Jan 19, 2022 03:38:23 AM GMT

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

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:

Stroke Color

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

Fill Color

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

Color Type menu

Changes the fill style:

None

Removes the fill.

Solid Color

Provides a solid, single fill color.

Linear Gradient

Produces a gradient that blends on a linear path.

Radial Gradient

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

Bitmap Fill

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.

HSB

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

RGB

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

Alpha

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.

Current Color Swatch

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.

System Color Picker

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

Hexadecimal value

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.

Flow

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

Extend Color

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

Reflect Color

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.

Repeat Color

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.

Linear RGB

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.

Click Window > Color.

On the Swatches tab of the Colors panel, select the color that you want to convert to a tagged swatch and click the Convert to Tagged Swatch button on the bottom part of the panel.

On the Tagged Color Definition dialog box, specify the following:

A name for the new swatch.
Choice of solid color, linear gradient, or radial gradient.
A Color by specifying either the HSB values (Hue, Saturation and Brightness) or RGB (Red, Green, and Blue)

The new tagged swatch appears in both the Colors and Swatches tabs of the Colors panel and in the Tools panel.

Tagged-Swatch-Display — The newly created tagged swatch in color, swatch, and tools panels

When you open the Color panel after selecting the object that uses the tagged swatch, you will see options to edit the color properties. If you make changes to the color properties, the changes are automatically reflected on all the elements on stage that use the tagged swatch.

You can double-click on a swatch or select a swatch and click Edit to open the Tagged Color Definition dialog box and make changes to the color in the swatch.

To unlink a shape that uses a swatch from the swatch color, select the shape and then click the Unlink button. You can select a new color from the colors panel for the shape.

Select-color-shape-swatch — Select a different color for the shape from the color panel

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.

In the Properties, click the Color panel.

Choose the required stroke color and fill color.

Select Add to Swatches and click Swatches panel

How to apply color to your creations in Animate

Watch the video to know how you can create and use colors in external applications like Adobe capture CC and share colors via CC Libraries.

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.

In the Swatches panel, select Sort by Color 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:

In Animate, select Window > Swatches

On the Swatches panel, click the

button.

Provide a meaningful name for the swatches folder.

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:

In Animate, select Window > Swatches.

On the Swatches panel, select any folder and click the

button to create an empty palette.

You can drag an existing color or click the

button to add swatches to the color palette.

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:

In Animate, select Window > Swatches.

On the Swatches panel, select any color palette within a folder, and click the

button to create a swatch. A new swatch is created using the current selected fill color in the Colors panel. You may also select an existing swatch and click the

button to duplicate the swatch within the palette.

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.

In the Swatches panel, select one of the following commands from the menu in the upper-right corner:

To append the imported colors to the current palette, select Add Colors.
To replace the current palette with the imported colors, select Replace Colors.

Navigate to the desired file, select it, and click OK.

In the Swatches panel, select Save Colors from the menu in the upper-right corner and enter a name for the color palette.

For Save As Type (Windows) or Format (Macintosh), select Animate Color Set or Color Table. Click Save.

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.

To apply the color to existing artwork, select an object or objects on the Stage, and select Window > Color.

Click the Stroke or Fill icon to specify which attribute to modify.

Click the icon, not the Color control, or the Color Picker opens.

If you selected the Fill icon in step 3, verify that Solid is selected in the Type menu.

If an object is selected on the Stage, the color modifications you make in the Color panel are applied to the selection. Do one of the following:

To select a color, click in the color space in the Color panel. To adjust the brightness of the color, drag the Brightness slider.

To create colors other than black or white, make sure the Brightness slider is not set to either extreme.
Enter values in the color value boxes: Red, Green, and Blue values for RGB display; Hue, Saturation, and Brightness values for HSB display; or hexadecimal values for hexadecimal display. Enter an Alpha value to specify the degree of transparency, from 0 for complete transparency to 100 for complete opacity.
To return to the default color settings, black and white (black stroke and white fill), click the Black and White button .
To swap colors between the fill and the stroke, click the Swap Colors button .
To apply no color to the fill or stroke, click the No Color button .

You cannot apply a stroke or fill of No Color to an existing object. Instead, select the existing stroke or fill, and delete it.
Click the Stroke or Fill Color control, and select a color.

To add the new color to the color swatch list for the current document, select Add Swatch from the menu in the upper-right corner.

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.