Color Panel

The Color panel can be opened from the Panels menu or by pressing Option+C (Mac) or Alt+C (Windows). The color panel is used to select colors for the fill and outline of the selected object. When using the gradient or the mesh gradient editors, the color panel can be used to set the color of the selected color stop or mesh node.

In the color panel, colors can be selected either numerically, by setting the color component values, or picked from a color spectrum. The color panel can also show a short list of color styles available in the document, for quick access.

Color changes

The following color selection tools are accessed from the color panel:

• - Map the color to the closest printable color using the current CMYK profile settings. When selecting colors in a color mode other than CMYK, the color may be outside of the gamut available using the CMYK printing process. These colors are automatically mapped into the gamut when printed. Mapping the colors into the gamut from the color panel enables the correct on screen preview of the printing results.
• Clicking the button swaps the current fill and outline colors.
• Clicking the button sets the current target color to the empty fill. This means that the fill or outline of the object is removed with all of its attributes.
• Clicking one of the buttons will set the current target color to black or white.
• The button activates the color picker mode, used to pick colors from the canvas.

Setting the color target

The target of the color selection can be either the fill or the outline of the selected objects. The target is set using the box in the upper-left corner of the panel.

• To set the fill of the selected objects, click on the filled box.
• To set the outline of the selected objects, click on the outlined box.
• The current color target is indicated by showing the filled or outlined box in front.

The color target also depends on the current object content selected in the Appearance panel, for more details see the Layers and Objects chapter.

Numeric color components

The color can be set by setting the color component numeric values. This allows for a precise control over the color components. The color components are set using the current color mode.

In VectorStyler, the color mode is part of the color and it is stored in the document. To automatically convert colors to the document color mode, disable the Keep Color Mode in the document color settings, accessed using the Document Setup command of the File menu. When disabled, colors are converted to the document color space. This will cause the numeric colors fields in the panel to automatically swap to the document color space, unless the Keep Color Mode menu item is checked in the color panel menu.

• The color panel contains a numeric editor for each component in the current color mode.
• The numeric color mode can be selected from the panel menu.
• Adjust the sliders or edit the numeric color amounts of each color component.
• The changes to the color are applied automatically as the editing is done.

Hexadecimal color

The color can be set using the hexadecimal values of the RGB color (regardless of the current color mode). Hexadecimal color representation is common when using CSS or other web specific formats. The Hex field of the color panel can be used to read or change the hexadecimal RGB color values:

• The current color is displayed in RGB hexadecimals in the Hex field.
• To set the color, edit the hexadecimal value in the Hex field, the # prefix must be present.
• Use the clipboard (Command+C and Command+V on Mac) or (Control+C and Control+V on Windows) to copy and paste hexadecimal color values into the Hex field.

The color spectrum

The color panel displays a color spectrum selector used to visually pick a color. The default color spectrum uses the HSB color space to show a hue wheel and a saturation and brightness square.

• Click on the hue wheel to select the hue of the current color.
• Click inside the square area to select the saturation and brightness of the color.
• The current color mode will not be changed when using the color spectrum selector.

The visual color spectrum selector can be changed to another mode using the various Wheel and Spectrum commands of the color panel menu.

The color panel menu

The color panel menu can be selected using the panel menu button (upper-right corner of the panel). The menu contains commands used to control and extend features of the color panel menu.

• The Edit Color view opens the modal color selector view, described in the next section. The color selector view provides additional color selection features.
• The various commands suffixed with Sliders (line RGB Slider or CMYK Slider) select the color mode of the edited color, and by that the numeric color component sliders. The color sliders are automatically updated to the current color picked from the document (when selecting objects).
• The various commands suffixed with Wheel or Spectrum (like HSB Wheel or Hue Spectrum) pick an alternative visual color selection modes for the color panel.
• Show Color Styles - Set the display of color styles and presets of the current document in the color panel. By default, a document contains no color styles. If a color style or preset is defined, these can be quickly accessed from the bottom of the color panel, when the Show Color Styles option is enabled.
• Show Hex Color - Enable or disable the display of the hexadecimal color editing widget. This option is enabled by default.
• Keep Color Mode - Keep the color mode in the panel fixed, regardless of the picked color mode. When enabled, the selected color of the document is shown using a fixed color mode picked from the panel menu. This option is disabled by default, meaning that the color mode (and the numeric color sliders) is automatically swapped to the mode of the selected color from the document.
• Adjust Style Opacity - Check to set the opacity of the fill or stroke only from the color panel. When unchecked, the whole object opacity is set.
• Create Color Preset - Create a new color preset from the current color. Color presets can be stored in the document, at application level or in an external preset group.
• Color Presets - Opens a list of the available color presets. Shown when there are color presets either in the document or at application level.
• Create Style - Create a new color style from the current color. Color styles are stored in the document.
• Create Color Scheme - Creates a color generator variable. Color generators are variables that generate a new color from an other color using a color scheme. Color generators can be used to link to existing color variables and create alternate tones of those colors, updating the color as the original color changes.
• Color Styles - Opens a list of the available color styles. Shown when there are color styles or objects with color role defined in the document.

Color styles

Using color styles enables a more structured workflow when creating complex documents. A color style is defined once and then it is easily accessible from the various color selection tools.

When a color is used in multiple places of a document, it is recommended to define and use color styles. In this case, changing all instances of a color is reduced to a single editing of the color style.

The available color styles and presets can be shown in and selected from the color panel, using the Show Color Styles option of the color panel menu. To select a color style, just click on the box containing the color.

In VectorStyler the workflow of using color styles is further simplified by the use of objects with color roles as references. When using color roles, the fill color of the reference objects is available as a color style, without the definition of a color style.

To use color roles for color styling:

• Select an object whose fill color should be visible as a color style.
• Select the Object Options command from the Objects menu.
• Set a name for the object (will be displayed as a style name) and enable the Color role using the Role button.
• Apply the object options by pressing the Ok button.
• The various color style lists will now contain a new color style showing the object fill color.
• Use this style as a color in coloring other objects.
• IMPORTANT: do not use this color in the original object (with the color role), as it will lead to an empty fill (caused by self reference to the style).
• Modify the color of the object with the color role, all objects using the style are automatically updated.