Color, Gradient and Image Fill

The Color Panel

The Color panel lets you choose plain colors, create gradients, or select an image to use it as a texture. To open the panel, click on the appropriate color button. For example, each Stroke item in the Appearance panel has own color button.

The Color panel has individual sections for plain color, gradient and image. You can apply only one of these features at a time. You may need to use more than one feature, for example, image and a color that tints that image. In this case, you should add two Fill attributes to the object: one for the image, and another for the tint color.

Color

The Color tab lets you select a plain color.

The Color section of the Color panel

1 - Opacity. You can set up the opacity of the selected color. Unlike the opacity of an object or layer, here you can adjust the transparency of object's part, for example, object's body, while the stroke will remain opaque.

2 - Sample of the currently selected color.

3 - Eyedropper tool. It helps you copy colors from other objects. Read Selecting Colors for more details.

4 - Values of the base colors that create the final color. The Grayscale color model has only one parameter here. If you select the HSB color model, the panel will show the Hue, Saturation and Brightness parameters.

5 - Opacity of the current color. This opacity will be preserved if you save this color as a swatch.

6 - Color field. You can select a color you like by clicking on it.

7 - Library of color swatches. You can save a color to the library in order to use it later.

8 - Save the current color as a swatch.

9 - Blend modes. If you wish to select a blend mode for the whole object, use the Layers panel.

10 - Color mode. You can select RGB, SMYK or HSB. There is also an option to choose Grayscale.

11 - Hexadecimal representation of the current color.

12 - Delete the selected swatch.

Using Swatches

You can save a color as a swatch in order to use it later. The library of swatches can save your time when you need to apply the same color many times. The library contains a number of colors by default.

To save the current color as a swatch, click on the plus button below the library.

To restore a color from a swatch, click on that swatch.

In order to delete a swatch, click on it to select it. Then click on the trash bin icon in the bottom right corner of the panel.

You can change the order of swatches in the library. To do this, drag and drop a swatch to a new position.

The library of swatches works with gradients in the same way as described above.

Gradient

You can create either linear or circular gradients. To select one of the types, click the corresponding button that are located above gradient preview field. The Gradient Fill section explains how to create and modify gradients.

Linear Gradient

The Gradient section of the Color panel showing settings of linear gradient

1 - Opacity of the whole gradient. You can also adjust the opacity of the colors that create your gradient. This lets you create a transition from some color to a fully transparent area.

2 - Buttons to select the linear or circular gradient type.

3 - Gradient preview field. This is not only a preview, but a tool to adjust your gradients. We will see later how to use it.

4 - Scale adjusts the width of the color transition area in relation to the whole size of the gradient.

Scale: 100%
Gradient with the default Scale value.
Scale: 20%
Gradient with Scale set to 20%.

With 20% scale, the pure black and red colors took most of the image space.

Note that the preview doesn't change when you adjust this parameter. You should use an object with your gradient applied in order to see the result.

5 - The angle of the gradient. You can rotate a gradient in relation to the object it was applied. Changing the angle doesn't affect the gradient preview field.

6 - Library of swatches. You can save a gradient to the library in order to use it later.

7 - Save the current gradient as a swatch.

8 - Blend modes. If you wish to select a blend mode for the whole object, use the Layers panel.

9 - Reverse the direction of the gradient. The result will be similar to rotating the gradient by 180 degrees.

10 - Offset of the gradient from the centered position. Drag the round handle and preview the result on the object to which the gradient was applied.

Centered
Gradient with the centered position.
Off the center
Gradient with some offset.

11 - Delete the selected swatch.

Circular Gradient

Circular gradients share most of options with linear gradients. Let's look at those which are specific to circular gradients.

The Gradient section of the Color panel showing settings of circular gradient

1 - Scale adjusts the width of the color transition area in relation to the whole size of the gradient. By adjusting this parameter, you can create objects that look like a sphere under different lighting conditions.

Scale: 99%
Gradient with Scale set to 99%.
Scale: 46%
Gradient with Scale set to 46%.

Note that the preview doesn't change when you adjust this parameter. You should use an object with your gradient applied in order to see the result.

2 - Roundness changes the aspect ratio of the gradient. It is circular at 100%. If you decrease the value to 50%, the gradient will look as an oval with the height two times smaller than the width.

Gradient with Roundness to 50%.

3 - The angle of the gradient. You can rotate a gradient in relation to the object it was applied. Changing the angle doesn't affect the gradient preview field.

4 - Offset of the gradient from the centered position. The original transition between colors will be preserved. Drag the round handle and preview the result on the object to which the gradient was applied.

5 - Offset of the gradient from the centered position. The transition between colors will change. Drag the round handle and preview the result on the object to which the gradient was applied.

Image

The Image tab lets you use an image as a texture. There are various options that define the position and size of the image inside the object boundary.

For more details, read the Image Fill section.