> For the complete documentation index, see [llms.txt](https://docs.cwicly.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cwicly.com/global-styles/global-styles/global-colours/modifiers-tab.md).

# 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).

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FkUPfA4EDgOrNQEQal06R%2Fmodifiers%20tab.jpg?alt=media&amp;token=e7f32464-8134-47d0-9ec9-a706e984bbc5" alt=""><figcaption></figcaption></figure>

## 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).

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FJ8f5yj6Sd8u1OAlKVTZk%2Fadd%20values.jpg?alt=media&amp;token=47ed752a-2710-45f2-b940-aff710e2e87a" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FnFRm5PR8UtBKG8OrPAgf%2Freset%20dot.jpg?alt=media&amp;token=99d77e9e-cb25-45c0-8f5d-fc31e853fd0d" alt=""><figcaption></figcaption></figure>

### Remove

The remove property allows you to delete a value field.

* Find the value to be removed.
* Click "bin" icon  to delete.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F4YbM8WN3UAVBMprhqav6%2Fdelete%20modifier.jpg?alt=media&amp;token=edfc4b91-5ed4-4a88-820a-014567852601" alt=""><figcaption></figcaption></figure>

## Opacity

The Opacity modifier allows you to set variations on the transparency of the selected colour.&#x20;

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

{% content-ref url="/pages/SvRmzdqcsDwscrUxwLVA" %}
[Opacity](/global-styles/global-styles/global-colours/modifiers-tab/opacity.md)
{% endcontent-ref %}

## 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.

{% content-ref url="/pages/Dz5uxxsuB7CPsVnsyu9d" %}
[Lighten](/global-styles/global-styles/global-colours/modifiers-tab/lighten.md)
{% endcontent-ref %}

## 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.

{% content-ref url="/pages/hFkbR1PiFGWmOH4HsQMd" %}
[Darken](/global-styles/global-styles/global-colours/modifiers-tab/darken.md)
{% endcontent-ref %}

## 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.

{% content-ref url="/pages/QZyLJ553D8JdycvDJTpp" %}
[Saturate](/global-styles/global-styles/global-colours/modifiers-tab/saturate.md)
{% endcontent-ref %}

## 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.

{% content-ref url="/pages/u1r9GVnVc7Y9hJgfTb1X" %}
[Desaturate](/global-styles/global-styles/global-colours/modifiers-tab/desaturate.md)
{% endcontent-ref %}

## 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.

{% content-ref url="/pages/h3JKXY8bMso0b398clpC" %}
[Spin](/global-styles/global-styles/global-colours/modifiers-tab/spin.md)
{% endcontent-ref %}