# Color

**Step 1** - You can go to any **Elementor** edit page.

<figure><img src="https://content.gitbook.com/content/PDk1vhyS2gZTLBOlB6NV/blobs/24sykEPnR0sKROY2ynoT/layout1.jpg" alt=""><figcaption></figcaption></figure>

**Step 2** - Site Settings -> Global Colors

<figure><img src="https://901576551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPDk1vhyS2gZTLBOlB6NV%2Fuploads%2FRbRG9PfvXnUVNbACTeKM%2Fimage.png?alt=media&#x26;token=c9cbdabe-c248-4729-aa1e-546c4b4fdf40" alt=""><figcaption></figcaption></figure>

<figure><img src="https://901576551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPDk1vhyS2gZTLBOlB6NV%2Fuploads%2FNBzdNzfAZVimyh7BRmMs%2Fimage.png?alt=media&#x26;token=cecd5f4e-10cc-4867-9d8e-53711c1022cc" alt=""><figcaption></figcaption></figure>

**Step 3** - Setting color for your site

<figure><img src="https://901576551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPDk1vhyS2gZTLBOlB6NV%2Fuploads%2FAzJ1AWM8iktzabfYSI0c%2FScreen%20Shot%202024-07-05%20at%208.55.59%20AM.png?alt=media&#x26;token=d872b5cb-e2bb-45ab-80fe-aa80bbaee30d" alt=""><figcaption></figcaption></figure>

1\. **The Primary Color** is the main color of your site.

* Regular: original color
* Hover: color when hovering items

Example: Color Button, Color Link, and some other places.

2\. **Secondary Color** is the color of the heading text.

3\. **Text Color** is the color of the content text.

Example: Color content, description ... in a single blog, single product, page ...

Example: Color Title, Title Tab...

4\. **Accent Color** is the color button...

5\. **Border Color** is the color border block.

Example: border product block, border form input, and places with borders ...

6\. **Light Color** is the color light used for sub-description.

Example: Color categories, color date-time, color subtitle ...

Note: Color is sometimes used for many special places to see which colors apply correctly to what cases you can select and test.