Using colors is the most common mode of styling vector artwork. Colors can be applied as a fill or outline style of an object. Text is styled with solid colors by default. Colors are used to create other object styling schemes like gradients, patterns or noise as well. Colors are also used as attributes of various image effects.

Selecting Colors

Colors can be selected from the Color Panel, the Color Palette panel, the palette bar (bottom of the document view), from the Color Variations panel or using the color selector popover or view (depending on the task). Colors are selected and stored using a Color Mode also known as a Color Space. The color mode determines what parameters are used to define a color and what kind of colors can be selected. The restriction of colors in a color mode is also called the color gamut.

The most typical mode of selecting colors is to use the Color Panel. The color panel provides a color spectrum in a color space for visual color selection and also numeric color selection sliders.

The color palette is used when the colors of the illustration are already prepared in a palette. There are numerous ways to use the color palette, including the Color Palette panel and the color palette bar. Multiple color palette panels can be kept open at the same time to access different color palettes. Color palettes can be imported and opened from various color palette file formats, including ASE, ACV, ACO, CPL, CSV and XML.

The Color Variations panel can be used to select variations of a color using customizable color generator schemes.

Color Modes

The base RGB colors and their combinations.

In VectorStyler, the color mode used for selecting colors can be Gray, RGB, CMYK, HLS, HSB, HWB, HSI, LAB or LCS. These color modes offer a different color gamut - this difference can be large (CYMK) or small (HSB) - to select colors.

The default color mode is RGB, and it is the most common color mode used for screen and web design. The typical target display for modern vector art is web and screen, where the color gamut is determined by a calibrated monitor displaying RGB colors. In the RGB color mode, colors are specified by setting the Red, Green and Blue component amounts. The RGB color space is also called an additive color space, as it represents the emitting of various light levels from none to a maximum level. This means that low levels of RGB values are dark (with zero being black), while high levels are light (with maximum being white).

The Gray color mode is used to represent gray levels only, using only a single color component. In the gray color mode, low levels of gray are light, while high levels are dark. This simulates the amount of black ink on a white paper. The gray color mode is useful to restrict an artwork palette to shades of gray, if it is reproduced in black and white print.

The CMYK color mode is the preferred color space used in print. When reproducing colors on a (white) paper, various levels of Cyan, Magenta, Yellow and Black inks are applied in a carefully designed pattern (of small dots, called halftone). The visual mixture of these inks creates the colors in printing. The CMYK color space is a subtractive color space, as it is represented by the levels of absorbing / reflecting light. With no ink, a white paper will reflect all (well most) of the light reaching it. Applying some amount of cyan ink, will reflect the green and blue colors and starts to absorb the red color depending on the amount of cyan ink applied. In a similar way the magenta ink reflects red and blue and absorbs green, while the yellow reflects red and green and absorbs blue.

The base CMYK colors and their combinations.

The combinations of various amounts of these inks will produce a gamut of colors that is much more limited (due to physical limitations of the paper and ink) than the color gamut offered by the RGB color mode. The black (K) component of the CMYK space is used to avoid large amounts of CMY color mixtures when dark colors are printed. Instead, in the process of color separation (dependent on the selected CMYK color profile), amounts of CMY are replaced by black ink, to reduce the total load of ink on the paper.

The HLS, HSB, HWB and HSI color modes are various Hue based color modes that operate on a similar gamut as the RGB color mode but providing a more intuitive selection of color components. In hue based color spaces, the color is selected from a hue wheel of colors. The hue circle represents all colors at their maximum brightness and saturation. The other two components (depending on the color mode) select the saturation and the brightness of the color.

The LAB color mode is an internal color space used for conversion between color spaces. For example: when separating colors for printing, the RGB colors are converted to the LAB space, and then to CMYK using color conversion profiles. The LAB color mode provides a larger gamut than RGB, therefore not all LAB colors can be displayed on screen (these will be approximated).

The LCH color mode is a user friendly version of the LAB color mode, providing the same color gamut but more intuitive color selection.

The Hue wheel with brightness and saturation square.

Palette Colors

The colors of a palette (in VectorStyler format) can be in one of the three color linking modes. The color linking mode is indicated in the palette by the shape of the color box.

Spot colors (shown with a cut corner and small circle) are used when printing with color separations, to create a separate color plate, containing tones of a single color. The spot colors are linked to the palette, and modifying the color in the palette will modify it in the document as well. Spot colors used in the document can be selected for separate spot color plate printing in the color separation section of the Print view (using the Add button). Spot colors are used when a special ink (selected from a palette of the ink distributor) is available and required for printing.

Process colors (shown with a cut corner) are colors that are linked to the palette, and are separated into their CMYK components when printed. When using process colors, the CMYK color components can be defined in the palette, and printed as specified without using the color profile for separation. Since instances of process color use are linked to the palette, modifying a process color in the palette will modify all instances of its use in the document.

Spot and process colors can be created and used from the document color palette only. The document color palette is stored with the document to ensure that color links to the palette are always valid.

The Expanded colors (shown in a box) are the most typical cases of palette colors. Expanded colors will be copied (expanded) when applied to an attribute (fill or outline) in the document, and no link to the palette is kept. Modifying an expanded color in the palette will not change the previously selected instances of that color in the document. External palettes (palettes loaded from a file and not stored with the document) contain only expanded colors.

Color Schemes

Color schemes are color styles generated from an other color (typically a color style as well), or a gradient. A color scheme generates a new color using an existing color style and a color adjustment scheme.

Color Scheme Options

Color Scheme from a Gradient

The color generated by a color scheme is accessible as a color style and can be used to fill or outline objects. When the original color changes, the color scheme automatically updates the generated color.

Color schemes can be created using the Color panel menu Create Color Scheme command. This command is also available in the Palette and Color Variations panel menus. The Color Scheme Style view is used to set the options of the color generator as follows:

  • Name - Set the name of the color generator style.
  • Tint - Set the tint for the color scheme. The tint controls how much of the color adjustment is applied to the base color.
  • Scheme - Select a color adjustment scheme. The base color is adjusted by this scheme using the amount of tint selected.
  • Color - Select the base color. This can also be a color style for dynamic color linking.
  • Gradient Color - Check to select the color from a gradient color position.
  • Gradient - Visible in gradient color mode, select the gradient used for the color scheme.

When an object with a color style is selected, the Color panel will show the Tint field to adjust the tint level of the color style. In case of color generators, this will override the tint value set in the color generator style

Working with Colors

Colors can be selected using various tools and panels. This chapter describes the color selection and management techniques available in VectorStyler. Depending on the use case, colors can be selected from the Color Panel, a color selector pop-up or modal view, a Color Palette or the Color Variations panel.

  • Color Panel - Describes how to use the color panel to select colors. In some instances (selecting colors from another view or panel) the color panel is shown as a color pop-up.
  • Color Selector - Describes how to use the color selector view. The color selector view is a modal view providing various color selection tools. The color selector is also used to setup new color harmony schemes, that can be used in the generation of color variations.
  • Color Palette - Describes how to use the color palette panel and color bar. The color palette panel contains the default palette of the document
  • Managing Palettes - Describes how to work with multiple palettes and how to import palettes from other applications.
  • Color Variations - Describes the color variations panel. The color variations panel can be used to select tonal variations of one or more colors generated using a color harmony scheme.
  • Color Settings - Describes the document and application level color calibration settings.