Color Panels in Animate CC

  1. Adobe Animate User Guide
  2. Introduction to Animate
    1. What's New in Animate
    2. Visual Glossary
    3. Animate system requirements
    4. Animate keyboard shortcuts
    5. Work with Multiple File Types in Animate
  3. Animation
    1. Animation basics in Animate
    2. How to use frames and keyframes in Animate
    3. Frame-by-frame animation in Animate
    4. How to work with classic tween animation in Animate
    5. Brush Tool
    6. Motion Guide
    7. Motion tween and ActionScript 3.0
    8. About Motion Tween Animation
    9. Motion tween animations
    10. Creating a Motion tween animation
    11. Using property keyframes
    12. Animate position with a tween
    13. How to edit motion tweens using Motion Editor
    14. Editing the motion path of a tween animation
    15. Manipulating motion tweens
    16. Adding custom eases
    17. Creating and applying Motion presets
    18. Setting up animation tween spans
    19. Working with Motion tweens saved as XML files
    20. Motion tweens vs Classic tweens
    21. Shape tweening
    22. Using Bone tool animation in Animate
    23. Work with character rigging in Animate
    24. How to use mask layers in Adobe Animate
    25. How to work with scenes in Animate
  4. Interactivity
    1. How to create buttons with Animate
    2. Convert Animate projects to other document type formats
    3. Create and publish HTML5 Canvas documents in Animate
    4. Add interactivity with code snippets in Animate
    5. Creating custom HTML5 Components
    6. Using Components in HTML5 Canvas
    7. Creating custom Components: Examples
    8. Code Snippets for custom Components
    9. Best practices - Advertising with Animate
    10. Virtual Reality authoring and publishing
  5. Workspace and workflow
    1. Creating and managing Paint brushes
    2. Using Google fonts in HTML5 Canvas documents
    3. Using Creative Cloud Libraries and Adobe Animate
    4. Use the Stage and Tools panel for Animate
    5. Animate workflow and workspace
    6. Using web fonts in HTML5 Canvas documents
    7. Timelines and ActionScript
    8. Working with multiple timelines
    9. Set preferences
    10. Using Animate authoring panels
    11. Create timeline layers with Animate
    12. Export animations for mobile apps and game engines
    13. Moving and copying objects
    14. Templates
    15. Find and Replace in Animate
    16. Undo, redo, and the History panel
    17. Keyboard shortcuts
    18. How to use the timeline in Animate
    19. Creating HTML extensions
    20. Optimization options for Images and Animated GIFs
    21. Export settings for Images and GIFs
    22. Assets Panel in Animate
  6. Multimedia and Video
    1. Transforming and combining graphic objects in Animate
    2. Creating and working with symbol instances in Animate
    3. Image Trace
    4. How to use sound in Adobe Animate
    5. Exporting SVG files
    6. Create video files for use in Animate
    7. How to add a video in Animate
    8. Working with video cue points
    9. Draw and create objects with Animate
    10. Reshape lines and shapes
    11. Strokes, fills, and gradients with Animate CC
    12. Working with Adobe Premiere Pro and After Effects
    13. Color Panels in Animate CC
    14. Opening Flash CS6 files with Animate
    15. Work with classic text in Animate
    16. Placing artwork into Animate
    17. Imported bitmaps in Animate
    18. 3D graphics
    19. Working with symbols in Animate
    20. Draw lines & shapes with Adobe Animate
    21. Work with the libraries in Animate
    22. Exporting Sounds
    23. Selecting objects in Animate CC
    24. Working with Illustrator AI files in Animate
    25. Apply patterns with the Spray Brushtool
    26. Applying blend modes
    27. Arranging objects
    28. Automating tasks with the Commands menu
    29. Multilanguage text
    30. Using camera in Animate
    31. Using Animate with Adobe Scout
    32. Working with Fireworks files
    33. Graphic filters
    34. Sound and ActionScript
    35. Drawing preferences
    36. Drawing with the Pen tool
  7. Platforms
    1. Convert Animate projects to other document type formats
    2. Custom Platform Support
    3. Create and publish HTML5 Canvas documents in Animate
    4. Creating and publishing a WebGL document
    5. How to package applications for AIR for iOS
    6. Publishing AIR for Android applications
    7. Publishing for Adobe AIR for desktop
    8. ActionScript publish settings
    9. Best practices - Organizing ActionScript in an application
    10. How to use ActionScript with Animate
    11. Best practices - Accessibility guidelines
    12. Accessibility in the Animate workspace
    13. Writing and managing scripts
    14. Enabling Support for Custom Platforms
    15. Custom Platform Support Overview
    16. Creating accessible content
    17. Working with Custom Platform Support Plug-in
    18. Debugging ActionScript 3.0
    19. Enabling Support for Custom Platforms
  8. Exporting and Publishing
    1. How to export files from Animate CC
    2. OAM publishing
    3. Exporting SVG files
    4. Export graphics and videos with Animate
    5. Publishing AS3 documents
    6. Export animations for mobile apps and game engines
    7. Exporting Sounds
    8. Export QuickTime video files
    9. Controlling external video playback with ActionScript
    10. Best practices - Tips for creating content for mobile devices
    11. Best practices - Video conventions
    12. Best practices - SWF application authoring guidelines
    13. Best practices - Structuring FLA files
    14. Best Practices to optimize FLA files for Animate
    15. ActionScript publish settings
    16. Specify publish settings for Animate
    17. Exporting projector files
    18. Export Images and Animated GIFs
    19. HTML publishing templates
    20. Working with Adobe Premiere Pro and After Effects
    21. Quick share and publish your animations

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 CC 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.

note: 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.  

  1. Click Window > Color

  2. 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. 

  3. 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)
    Tagged color definition dialog box

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

    The newly created tagged swatch in color, swatch, and tools panels

  4. 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.

  5. 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.  

  6. 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.

    Unlink option

    Select a different color for the shape from the color panel

Color palettes

Each Animate CC file contains its own color palette, stored in the Animate document. Animate CC 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 CC 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.
  1. 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:

  1. In Animate CC, select Window > Swatches

  2. On the Swatches panel, click the button.
  3. 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:

  1. In Animate CC, select Window > Swatches.

  2. On the Swatches panel, select any folder and click the button to create an empty palette.
  3. 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:

  1. In Animate CC, select Window > Swatches.

  2. 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.

  1. 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.

  2. Navigate to the desired file, select it, and click OK.
  1. In the Swatches panel, select Save Colors from the menu in the upper-right corner and enter a name for the color palette.
  2. 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.

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

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

    Note:

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

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

  4. 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.

      note: 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 .

      note: 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.

  5. 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.

Adobe logo

Sign in to your account