Colors

Colors make an important contribution to the look and feel of your templates. This topic explains how to define and apply colors and how to keep them consistent in different output channels.

Defining colors, spot colors and tints

Color selectors, such as the drop-down list on the toolbar, initially contain a small set of colors. Add your own colors so that they can be used throughout the templates, in all contexts and in color selector dialogs as well as with their names in style rules (see Styling and formatting).

Defining colors

To define colors:

  1. Select Edit > Colors on the menu.

  2. Add a color. There are two ways to do this:

    • Click the New button (the green plus).

    • Select an existing color from the list and copy it using the Duplicate button. (The Filter drop-down limits the list to colors of a certain type.) Select the new color and click the Edit button.

  3. In the Edit color dialog, type a name for the color (or let the Designer create a name based on the values that you select). The color’s name can be used in style sheets. It should not contain spaces or special characters.

    Tip: Working with style sheets? Choose a name that reflects the purpose of the color, rather than a name that describes the color. This way you won't have to change the color's name in the style sheets when you change the color.

  4. Click Color. (Tint is used for transparent colors.)

  5. Select the color type: CMYK or RGB.

    The letters CMYK stand for Cyan (a greenish-blue color), Magenta (reddish-purple), Yellow and Key (black). In color printing, these are the usual primary colors.

    Note: CMYK colors may look different in Designer when compared to the output, but the colors in the output match the colors configured in the template.

    RGB stands for Red, Green and Blue. In the RGB color model, red, green, and blue light are added together in various ways to reproduce a wide range of colors. This model is typically used for electronic devices.

    In order to define a PANTONE color, set up a Spot Color and set its name to the PANTONE swatch name.

    For information about the Spot color and Overprint options see Defining a spot color.

  6. Drag the slider bars to set the values for the color and click OK or Apply.

Defining a spot color

A spot color is any color generated by an ink (pure or mixed). Note that spot colors can only be used on certain printers.
If your printer can use spot colors and you want a spot color to be used in a Print context, define the color as described above, making sure to:

  • Match the color’s name to that of the spot color used in the printer.

  • Check the option Spot color.

  • If applicable, check the Overprint option for this spot color. Overprinting refers to the process of printing one color on top of other colors. This is sometimes required, for example to deal with special print applications, such as applying UV ink or varnish to a certain area, or to avoid mis-registration when printing black on top of colored areas.

    Note: Black overprint can be enabled for text smaller than a given size; see Overprint and black overprint.

Defining a tint

A tint is a transparent color, based on another color in the template. To define a tint:

  1. Select Edit > Colors on the menu.

  2. Click the New button (the green plus) to add the tint.

  3. From the Type drop-down, select Tint.

  4. In the Edit color dialog, type a name for the color (or let the Designer create a name based on the values that you select). This name should not contain special characters.
    The color’s name can be used in style sheets; see Using colors in style sheets.

  5. Select one of the existing colors in the template as the Source of the color. The tint or opacity will be applied to this color.

  6. Check Use opacity if you want to set the Tint slider to use Opacity instead.

  7. Use the slider to set the percentage of the tint or opacity, or type the percentage directly in the input box and finally click OK.

Applying a color

Colors can be applied to elements in your templates locally or through style sheets.

Using colors in style sheets

It is highly recommended to use style sheets in templates right from the start. Even more so if the communications are going to be output to different output channels, or if they consist of different sections (for example, a covering letter followed by a policy). Using CSS with templates allows a consistent look and feel to be applied. A style sheet can change the look of multiple elements, making it unnecessary to format each and every element in the template, time and again, when the company's layout preferences change. See Styling templates with CSS files.

In style sheets, you can color every type of element that has a CSS color property, such as color, background-color or border-color.

Use the color's name as it is defined in the Designer, or any legal color value: a valid color name (see MDN Web Docs - named color), hexadecimal color code (see w3school's color picker), RGB color value, for example rgb(216,255,170) or CMYK color value, for example cmyk(15%, 0%, 33%, 0%).

The following CSS rule applies MyColor, which is a custom color (see Defining colors, spot colors and tints), to the text of all paragraphs:

Copy 
p {
color: MyColor;
}

Note: Spaces need to be escaped.

Copy 
p {
color: Empire\ Green;
}

CMYK() function

You may use the custom cmyk() CSS function to assign a CMYK color to any element, or a series of elements. The following example assigns a steel blue color as a background for all H1 elements:

Copy 
h1 {
background-color: cmyk(33%, 17%, 0%, 20%);
}

Note: CMYK colors may look different in Designer when compared to the output, but the colors in the output match the colors configured in the template.

Coloring text

Instead of using a style sheet (see above), you can color text locally:

  1. Select text or an HTML element that contains text (see Selecting an element).

  2. On the menu, select Format > Color, or click the black triangle on the Text color toolbar button.

  3. Select one of the colors in the list, or click Other to set all aspects of the text style, including text color and/or background color.

Coloring backgrounds and borders

Instead of using a style sheet (see above), you can color a background or border locally. This is how:

  1. Select an HTML element (see Selecting an element).

  2. On the Format menu, click the element. For a div element, click Box. The Formatting dialog opens up.

  3. Click the Border or Background tab.

  4. Click the downward pointing arrow next to Color to select a color from the list of predefined colors (see Defining colors, spot colors and tints).
    Alternatively, click the small rectangle to the right of the color list to open the Color Picker dialog. In this dialog you can select a color from the color wheel. You can also choose the color mode: RGB or CMYK. For an explanation of these two modes, see Defining colors, spot colors and tints; for an explanation of the other options in this dialog, see Color Picker.
    You could also type a name or value in the Color field directly. It must be a valid color name (see MDN Web Docs - named color), a hexadecimal color code (see w3school's color picker), RGB color value, for example rgb(216,255,170) or CMYK color value, for example cmyk(15%, 0%, 33%, 0%).
    Use the slider to set the color saturation.

  5. Click OK or Apply.

Color management

Color profiles can keep colors consistent across different outputs. To manage color profiles, select Edit > Color settings; for an explanation of the options in the Color settings dialog, see Color Settings.