> 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/colour-tab.md).

# Colour tab

Cwicly Global Colours come with an extensive array of features to effortlessly maintain brand consistency and enhance visual appeal.

The Colour tab regroups the base settings for a global colour.

You have the option to specify a colour for both light and dark modes, input a friendly name, customise the CSS variable, generate an 11 point palette.

## Open

The Colour tab can be accessed by selecting a global colour.

* In the Block Inspector, open the Global Styles tab.
* Open the Colours tab.
* Select a global colour to open the colour tab.

<figure><img src="/files/sdqPMIdZLjR6ujd63f5C" alt=""><figcaption></figcaption></figure>

## Light Mode

The Light mode property allows you to set a light background with dark text. It is the default mode.

* In the Block Inspector, open the Global Styles tab.
* Open the Colours tab.
* Select a global colour to open the colour tab.
* Open the Light Mode tab (default).
* Adjust Light Mode colour as required.

<figure><img src="/files/cBbk6beVtv4qccrykwfb" alt=""><figcaption></figcaption></figure>

## Dark Mode

The Dark mode property allows you to set a dark background with lighter text.

* In the Block Inspector, open the Global Styles tab.
* Open the Colours tab.
* Select a global colour to open the colour tab.
* Open the Dark Mode tab.
* Adjust Dark Mode colour as required.

<figure><img src="/files/coIEOHGjqdI9cYtMpEQI" alt=""><figcaption></figcaption></figure>

## Name

You can input a friendly name which will be used throughout your editing experience.

* In the Block Inspector, open the Global Styles tab.
* Open the Colours tab.
* Select a global colour to open the colour tab.
* Input a friendly name as required.

<figure><img src="/files/mpxy4GEZn3CFQj7q0USe" alt=""><figcaption></figcaption></figure>

## CSS Variable

You can also customise the CSS variable to suit your colour system.

* In the Block Inspector, open the Global Styles tab.
* Open the Colours tab.
* Select a global colour to open the colour tab.
* Input a CSS variable as required.

<figure><img src="/files/EOhTyavKtO8xmpTOyh9n" alt=""><figcaption></figcaption></figure>
