Modifiers tab
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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).
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).
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.
The remove property allows you to delete a value field.
Find the value to be removed.
Click "bin" icon to delete.
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.
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.
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.
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.
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.
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.