Color, Gradient and Image Fill

The Recolor Panel

The Recolor panel is used to adjust object colors. To open the panel, select Recolor in the menu of the Appearance panel. Another way is to choose Recolor from the popup menu below the Appearance buttons on the right screen side.

The panel is designed to change many different colors of one or multiple objects at once. This is useful when you need to try different color schemes. The panel is also capable of decreasing the variety of colors by using one color tone instead of several similar ones. The key part of the panel is the list of colors where you map the original colors into new ones.

1 - Shows how objects on the canvas would look if you apply new colors.

2 - Changes the Hue of all output colors.

3 - Changes the Saturation of all output colors.

4 - Changes the Brightness of all output colors.

5 - Merge Tolerance defines a threshold for merging close color tones into one color.

6 - Input color which is one of the object's original colors. Several original colors may appear in the same line if they were set to be replaced with one output color.

7 - The lock icon lets you prevent an original color from being changed by any tool in the panel.

8 - The menu of the Recolor panel.

9 - Changes the order of colors in the list (e.g., by lightness).

10 - Output color that an object's element will receive if you apply changes.

Tapping on an original color in the list lets you select it. To select multiple lines with colors, swipe over each of them horizontally. Selecting colors is needed to manipulate them directly.

The panel lists stroke and fill colors, as well as base colors of raster effects. If an object has a gradient with several base colors, all of them will appear in the list.

The panel cannot recolor an image used to fill a shape.

The panel has a menu with these commands:

• Merge merges selected input colors.
• Split splits input colors that are displayed in the same line. This command does the opposite to Merge.
• Lock lets you keep the output color unchanged. This command repeats the function of the lock icon.
• Unlock deactivates the lock option.
• Restore makes the output color identical to the corresponding input color. This command also splits input colors if they were merged.
• Reset All restores the original object colors.

Change the Hue, Saturation and Brightness

The Hue, Saturation and Brightness sliders affect all of the output colors. If you don't want a certain output color to be modified, lock it using the lock icon.

Set an Output Color Directly

You can set an output color directly. To do this, tap on the circle with the output color. This opens the Color panel. The field with the Hex color representation allows you to copy or paste a value. To do this, long-press on the field and choose a command from the context menu.

In order to make the output color the same as the corresponding input color, choose the Restore command from its context menu.

Merging Colors

Merging colors lets you represent input colors with a smaller number of output colors. This can be done by replacing multiple similar input colors with the same output color. This is an equivalent for the posterize function from raster graphics editors.

You can merge colors automatically or manually. Also you can combine these two methods.

Once two or more colors have been merged, they appear in the same line, and consequently have the same output color. The new output color is the same as one of output colors before merging.

The following image shows two green colors merged. The output color was taken from the second green color.

Merging Colors Automatically

To merge colors automatically, just move the Merge Tolerance slider to the right. The Merge Tolerance set to 0% turns the automatic merging off. By increasing the tolerance, you allow more different color tones to get into the same group.

To prevent a particular color from being merged, lock it.

Merging Colors Manually

In order to merge input colors manually, drag one of them on top of another. The output color will be taken from the input color onto which you drop other colors. In other words, if you drag a red color onto a blue one, the output color of this group will be the same as the blue color had before merging.

Another way to merge colors is to select multiple of them in the list. Then choose the Merge command from the menu.

In order to separate merged colors, select Split in the menu. Or just drag one of merged colors to a new line.