Color table

Background

You can use the Color table to define frequently used colors and store them as a variable. This eliminates the need to repeatedly use the color picker to set colors when creating symbols or HMI screens. Furthermore, should you ever need to change a color throughout your project, you only need to do it once (that is, in the color table).

To open the Color table, choose Edit  Color table. A new window will open (Figure 1). The Color table will be empty in case of a new project (Figure 2).

color table
Figure 1. Color table
color table empty
Figure 2. Color table - empty

Create color variable

To create a new color variable, follow the steps below.

  1. Press Insert on your keyboard. A new row is inserted at the bottom of the table. (Figure 3).

color table new row
Figure 3. Adding a new row

  1. In the first column (Color name), set a unique and distinctive variable name.

  2. Click the color box in the second column (Color). A color picker window will open (Figure 4).

color picker
Figure 4. Color picker

  1. Pick a standard color or define a custom color using the RGB color mode (or one of its alternatives).

  2. Click Ok. The color variable will show the color you just picked (Figure 5).

color table updated
Figure 5. Updated color variable

  1. To save your changes, click Update in the bottom left corner.

  2. Once saved, you can use the color variable throughout the project.

Edit existing color variables

To edit existing colors, follow the above steps from step 3 onwards.

Use color variable

Now that you have created one or more color variables you can use them throughout your project, either in existing symbols (through symbol parameters) or in the symbol editor.

Existing symbols

Right-click and choose Basic  Edit symbol or press E on your keyboard while hovering your mouse over a symbol to open the symbol parameters.

circle 1 Click on the color field in your symbol (Figure 6).
circle 2 Click Color table in the upper bar.

Next, select a color variable and click Ok.

color symbol parameters
Figure 6. Use the Color table in existing symbols

Symbol editor

To create a link to the Color table in the symbol editor, use #<variableName> as input in the color field. Replace <variableName> with the name of the variable in the Color table (for example: #colorName).

If a variable is not defined in the color table, it will be white. Be sure to specify the correct variable.

Clean table

The Clean table function will delete all color variables that are not being used in your project (Figure 7). After cleaning the table you will need to click Update in the bottom left corner to save your changes.

color table clean table
Figure 7. Clean table function