Color Tools

Linear Color Gradients

Linear gradients are a property of element colours that enable transitions between multiple colours.

The Page editor is based on the .svg format, hence the colour gradients of elements are constructed accordingly. It can be applied to fills, strokes, and flows.

Any number of colours can be added to the gradient. The fields next to the colours express the stopping points of each colour in percentage of the bounding box of the selected element from start side to end side. This can be rotated by the gradient angle field.

Fig. 1. How to add gradients to a polyline, and set the stopping points.

In order for the gradient to work, the bounding box of the element needs to have a non-zero area, therefore it will not work for single horizontal or vertical lines. Instead, modify one of the line’s coordinates very slightly.

Conditional Coloring

In case you need to change color of the pipings to show when a pump or fan is active or not, we could use an expression to change the color.

The expression below looks at the two tags and in case one of them is true, the line will have the color #0070C0. If false, the color will be #D0021B.

value("EMA01/EMA_CS1_P1_V") || value("EMA02/EMA_CS1_P1_V") ? '#0070C0' : '#D0021B';

When scripting colour in this manner, make sure that the Hexadecimal colour is expressed as a string and begins with a #!

Fig. 2. Line color

---