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 do this:

  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. This name should not contain spaces or special characters.

    Working with style sheets? Choose a name that informs about 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.

    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 broad array of colors. This model is typically used for electronic devices.

    If applicable, check Spot color. Note that spot colors can only be used on certain printers.

  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). If your printer can use spot colors and you want a spot color to be used in a Print context, you can define the color as described above, with two differences:

  • Check the option Spot color instead of Color.
  • Make sure that the color’s name matches that of the spot color used in the printer.

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. Click the Type drop-down and 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). The color’s name can be used in style sheets. This name should not contain spaces or special characters.
  5. Select one of the existing colors in the template as t 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 color names on w3schools), 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:

p {
color: MyColor;
}
CMYK colors

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: 

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

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 color names on w3schools), 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%).
  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.

  
  • Last Topic Update: 24/01/2017 09:32
  • Last Published: 7/6/2017 : 9:49 AM