> For the complete documentation index, see [llms.txt](https://help.ecombe.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.ecombe.com/pages-and-section-creations/general/global-theme-styles/how-to-use-colors-in-global-styles.md).

# How to use Colors in Global styles

In this article we will guide you to setup Color in Global styles to have a consistent style in all pages.

## How to use Colors

By default, Color will have 3 Schemes and 1 option set for Other colors. You can click **Add Scheme** to create your own Scheme.

<figure><img src="https://2549070089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2ch1rVRFTw7xu44bUNyO%2Fuploads%2FItshvcmK2JAcmZe9TT6N%2FScreenshot%202025-12-11%20at%2020.13.45.png?alt=media&amp;token=0d660793-e0d2-42ca-b292-71650f71f0b7" alt=""><figcaption></figcaption></figure>

## What's in a Scheme

<figure><img src="https://2549070089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2ch1rVRFTw7xu44bUNyO%2Fuploads%2F6iIolUzQ5lb9A9ClSr6j%2FScreenshot%202025-12-11%20at%2020.15.19.png?alt=media&amp;token=785e8ff5-7cd6-4d26-a7b9-1351426067c3" alt=""><figcaption></figcaption></figure>

#### 1. Section colors

The basic colors of a section include: Background, Heading text and Body text.

#### **2. Button colors**

Button color has two states:

**Normal:**

* **Background**: the button’s background color.
* **Label**: the text color.
* **Outline**: the outline color of the button.

**Hover:**

* **Background tone:** add a color layer on top of the button background.&#x20;
* **Label:** add a color layer on top of the text.
* **Outline:** add a color layer on top of the outline.

<figure><img src="https://2549070089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2ch1rVRFTw7xu44bUNyO%2Fuploads%2Fen103h6ytXXGVTiJsh6A%2FScreenshot%202025-12-11%20at%2020.28.15.png?alt=media&amp;token=2b99473f-1490-46e8-937e-7a40f5e1ece1" alt=""><figcaption></figcaption></figure>

Dragging the slider to the left applies a white tone layer, while dragging to the right applies a black tone layer.\
The further you move the slider toward either side, the less transparent the tone layer becomes.

## How to change color in Scheme?

You can change a color by clicking the **color box** and using the **color picke**r, or by entering a **Hex code** directly.

<figure><img src="https://2549070089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2ch1rVRFTw7xu44bUNyO%2Fuploads%2Ft1SJVGnVbl9uVrNjBGY9%2FScreenshot%202025-12-11%20at%2020.39.32.png?alt=media&amp;token=943b7386-9aec-45c3-9c9a-95204972789a" alt=""><figcaption></figcaption></figure>

We hope this article helps you understand how to use Color in Global styles to set consistent colors for your theme.

{% hint style="info" %}
Have a question?

Contact us via **in-app live chat**. We'll reply in few minutes.
{% endhint %}