Select a color or edit a gradient

Choose a color picker
Select a color with the eyedropper tool
Select a color with the Adobe Color Picker
Edit a gradient
Using Adobe Kuler swatches in After Effects

In many contexts, you can click an eyedropper button to activate the eyedropper tool, or you can click a color swatch to open a color picker. If you use the Adobe Color Picker, you can also activate the eyedropper from the Adobe Color Picker dialog box.

If you click a gradient swatch for a stroke or fill in a shape layer, or click Edit Gradient in the Timeline panel, the Adobe Color Picker opens as the Gradient Editor, with additional controls for editing gradients included at the top of the dialog box.

Andrew Devis shows how to modify gradient fills and strokes for shape layers, plus other options, in a video on the Creative COW website.

Note: The sampleImage expression method is another way to sample color values. Use this method to use color values of specific pixels as input into an expression. (See Layer General attributes and methods (expression reference).)

A.: Opacity stop
B.: Color stop
C.: Opacity midpoint
D.: Eyedropper
E.: New-color rectangle
F.: Original-color rectangle

Choose a color picker

Choose Edit > Preferences > General (Windows) or After Effects > Preferences > General (Mac OS), and do one of the following:

To use the color picker provided by the operating system, select Use System Color Picker.
To use the Adobe Color Picker, deselect Use System Color Picker.

Jeff Almasol provides the PickerSwitcher script on his redefinery website, which toggles the Use System Color Picker setting. Use this script when you prefer to use the Adobe Color Picker for certain tasks, but the operating system color picker for others, and want a quick way to change this setting. This script works especially well in conjunction with the LaunchPad panel, with which running the PickerSwitcher script is as easy as clicking a button. To download the LaunchPad script, go to the After Effects Exchange on the Adobe website.

Select a color with the eyedropper tool

Click the eyedropper button, and move the pointer to the pixel that you want to sample. The color swatch next to the eyedropper button dynamically changes to the color under the eyedropper.
Do one of the following:
- To select the color of a single pixel, click the pixel.
- To sample the color average of a 5-pixel-by-5-pixel area, Ctrl-click (Windows) or Command-click (Mac OS) the area.
Note: When sampling from within the composition frame of the Composition panel, the eyedropper by default ignores the composition background color and samples only straight color channels. To sample color channels premultiplied with the composition background color, press Shift as you click with the eyedropper. Shift-clicking with the eyedropper samples colors as they appear in the composition frame in the Composition panel.

You can use the Sampler Sizer Radio script from the Leapfrog Productions website to change the area sampled by the eyedropper tool.

Press the Escape key to deactivate the eyedropper.

Select a color with the Adobe Color Picker

Click a color swatch to display the Adobe Color Picker.
(Optional) To prevent panels from updating with the results of your color selection until you accept the color by clicking OK, deselect Preview in the Color Picker dialog box. The Preview option is not available in all contexts.
Note: Selecting Preview is convenient for seeing the results of your color selections before you commit them, but it can also decrease performance, as new images are rendered for the preview in the Composition panel or Layer panel.
Select the component you want to use to display the color spectrum:
H

Displays all hues in the color slider. Selecting a hue in the color slider displays the saturation and brightness range of the selected hue in the color spectrum, with the saturation increasing from left to right and brightness increasing from bottom to top.
S

Displays all hues in the color spectrum with their maximum brightness at the top of the color spectrum, decreasing to their minimum at the bottom. The color slider displays the color that’s selected in the color spectrum with its maximum saturation at the top of the slider and its minimum saturation at the bottom.
B (in the HSB section)

Displays all hues in the color spectrum with their maximum saturation at the top of the color spectrum, decreasing to their minimum saturation at the bottom. The color slider displays the color that’s selected in the color spectrum with its maximum brightness at the top of the slider and its minimum brightness at the bottom.
R

Displays the red color component in the color slider with its maximum brightness at the top of the slider and its minimum brightness at the bottom. When the color slider is set to minimum brightness, the color spectrum displays colors created by the green and blue color components. Using the color slider to increase the red brightness mixes more red into the colors displayed in the color spectrum.
G

Displays the green color component in the color slider with its maximum brightness at the top of the slider and its minimum brightness at the bottom. When the color slider is set to minimum brightness, the color spectrum displays colors created by the red and blue color components. Using the color slider to increase the green brightness mixes more green into the colors displayed in the color spectrum.
B (in the RGB section)

Displays the blue color component in the color slider with its maximum brightness at the top of the slider and its minimum brightness at the bottom. When the color slider is set to minimum brightness, the color spectrum displays colors created by the green and red color components. Using the color slider to increase the blue brightness mixes more blue into the colors displayed in the color spectrum.
Do any of the following:
- Drag the triangles along the color slider, or click inside the color slider to adjust the colors displayed in the color spectrum.
- Click or drag inside the large square color spectrum to select a color. A circular marker indicates the location of the color in the color spectrum.
  
  Note: As you adjust the color using the color slider and color spectrum, the numeric values change to indicate the new color. The top rectangle to the right of the color slider displays the new color; the bottom rectangle displays the original color. Click the bottom rectangle to reset the color to the original color.
- For HSB, specify hue (H) as an angle, from 0° to 360°, that corresponds to a location on the color wheel. Specify saturation (S) and brightness (B) as percentages (0–100).
- For RGB, specify component values. You can set colors to under-range and over-range values (outside the range 0.0–1.0) in an HDR project.
- For #, enter a color value in hexadecimal form. This color format is common in web workflows.

Edit a gradient

A gradient is defined by color stops and opacity stops. Each stop has a location along the gradient and a value for color or opacity. The values between stops are interpolated. By default, the interpolation is linear, but you can drag the opacity midpoint or color midpoint between two stops to alter the interpolation.

To add a color stop or opacity stop, click below or above the gradient bar in the Gradient Editor dialog box.
To remove a stop, drag it away from the gradient bar, or select the stop and click Delete.
To edit the value of a stop, select it and adjust the Opacity value or use the Adobe Color Picker controls beneath the gradient editor controls.
To choose a gradient type, click the Linear Gradient or Radial Gradient button in the upper-left corner of the Gradient Editor dialog box.
Note: Use the Style property to choose a gradient type for the Gradient Overlay layer style.

Using Adobe Kuler swatches in After Effects

Adobe provides the Swatch You Want script in a package of scripts for After Effects on the After Effects Exchange on the Adobe website. The Swatch You Want script imports and converts Adobe Swatch Exchange (.ase) files for use in After Effects.

Jerzy Drozda, Jr. provides a video tutorial and example project on his Maltaannon website that show how to copy and paste from the Adobe Kuler desktop application to bring color swatches into After Effects.

Mathias Möhl provides a script on the After Effects Scripts website with which you can load and use Kuler color themes. Mathias also provides a tutorial on the AETUTS+ website that demonstrate how to use Kuler with After Effects.

Jorrit Schulte provides a tutorial on the AETUTS+ website that demonstrates how to make an animation preset for importing and working with Kuler color swatches.