Modifiers tab

The Modifiers tab allows you to build dynamic colour variations on the base colour. Visually craft a custom colour system with ease and consistency directly within the editor. Break free from the constraints of having to constantly reference a base colour.

You can create variations on: Opacity, Lighten, Darken, Saturate, Desaturate, Spin.

You can add as many variations as required and set custom values between 0 and 100.

Select Modifier

• In the Block Inspector, open the Global Styles tab.

• Open the Colours tab.

• Select a global colour.

• Open the Modifiers tab.

• Select the required modifier (Opacity, Lighten, Darken, Saturate, Desaturate, Spin).

Add Values(s)

You can add as many values as required and set custom values between 0 and 100 or 0 and 100 (spin).

• Open the Colours tab.

• Select a global colour.

• Open the Modifiers tab.

• Select a modifier.

• Click the "+" icon to add a variation.

• Input required value (0 to 100 for Opacity, Lighten, Darken, Saturate, Desaturate) or (0 to 360 for Spin).

Reset

The reset property allows you to reset the input value.

• Find the value to be reset.

• Click blue dot next to the required Value to reset.

Remove

The remove property allows you to delete a value field.

• Find the value to be removed.

• Click "bin" icon to delete.

Opacity

The Opacity modifier allows you to set variations on the transparency of the selected colour.

You can add new values, copy your values or paste a set of values you have created elsewhere.

pageOpacity

Lighten

The Lighten modifier allows you to set variations on the lightness of the selected colour.

You can add new values, copy your values or paste a set of values you have created elsewhere. You can also use a Dark Mode reverse to flip the palette order.

pageLighten

Darken

The Darken modifier allows you to set variations on the darkness of a selected colour.

You can add new values, copy your values or paste a set of values you have created elsewhere. You can also use a Light Mode reverse to flip the palette order.

pageDarken

Saturate

The Saturate modifier allows you to set variations on the saturation of the selected colour. You can Add new values, Copy your values or Paste a set of values you have created elsewhere.

pageSaturate

Desaturate

The Desaturate modifier allows you to set variations on the saturation of the selected colour. You can Add new values, Copy your values or Paste a set of values you have created elsewhere.

pageDesaturate

Spin

The Spin modifier allows you to spin the colour a given amount, from 0 to 360. You can Add new values, Copy your values or Paste a set of values you have created elsewhere.

pageSpin