You can configure the color of a visualization element either statically via the property Color, or dynamically by assigning an application variable via the property Color variables. There are also color assignments in other properties, depending on the element, for example for the text color in the property Text of a labelled element.
For the static assignment of a color value you can always use the dialog Color in the properties editor, which offers a color palette for selection.
You can specify the color as a style color. Style colors are color names for color definitions from the actively used style. When configuring a corresponding property, you are shown a selection list of the available style colors. We recommend the use of style colors, because you can then change colors in a central place by means of a style selection or a style adaptation. Alternatively you can open the dialog Color in order to select a value from the color palette.
In addition you can define the fill color of an element as a Color gradient. The color then changes linearly, radially or axially from the start color to the target color. The Gradient setting is configured in the dialog Gradient editor.
See also
Designing a visualization element with a style color or a fixed color value
Notice
A color assignment with a style color enables simple global color changes!
Requirement: the visualization editor is opened.
Insert some elements of the type Rectangle.
Select an element.
⇒ The view Properties is active.
Click in the property Colors ‣ Normal state ‣ Fill color .
⇒ A selection list and the button 
appear.
Assign a style color to the rectangle. To do this, select, for example, the color Element fill color in the selection list.
Define the degree of transparency in the property Colors ‣ Normal state ‣ Fill color ‣ Transparency : Select the value 136 using the slider.
Select another rectangle. Click in the property Colors ‣ Normal state ‣ Fill color .
⇒ A selection list and the button appear.
Assign a fixed color value to the rectangle: To do this, click on the button .
⇒ The dialog Color opens.
Select a basic color or click on Define colors for fine tuning. Then click on OK.
⇒ The color is set as a fixed value. The color is displayed as a small rectangle. The RGB values are shown next to it.
Click in the property Colors ‣ Normal state ‣ Fill color ‣ Transparency .
Select the value 136 using the slider.
⇒ The color is semi-transparent.
See also
Designing a visualization element with a color gradient
Requirement: the visualization editor is opened.
Drag an element of the type rectangle into the visualization.
Activate the property Colors ‣ Use color gradient .
Click in the property Colors ‣ Gradient setting .
⇒ The dialog Gradient editor opens.
Define the color gradient for the element:
Gradient Type: Radial.
Standard radial: Center.
⇒ The fill color of the element changes radially from white to black.
See also
Configuring a visualization element for color animation
The property Color variables , which certain elements have, is for the color animation of the element. If you assign a variable there, then you can program color changes in the application code or configure a user input that leads to a color change.
You can see an example in the book Animation
See also
