# Color

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

<div align="left"><figure><img src="https://content.gitbook.com/content/fdoOlWGNf1AyRDKHrU0f/blobs/MtHnwl7bYChbBA5FkoVE/Screenshot%20at%20Sep%2007%2014-31-19.png" alt=""><figcaption></figcaption></figure></div>



<div align="left"><figure><img src="https://content.gitbook.com/content/fdoOlWGNf1AyRDKHrU0f/blobs/NqCTslymPMUQAFyLdZle/Screenshot%20at%20Sep%2007%2014-31-57.png" alt=""><figcaption></figcaption></figure></div>



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

<figure><img src="https://2975617308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfdoOlWGNf1AyRDKHrU0f%2Fuploads%2FvAKeUaKVCiEODCex4mpg%2FScreenshot%202024-01-17%20at%2015.32.47.png?alt=media&#x26;token=1dc66a86-5720-4fce-bc7d-05529ff8206b" alt=""><figcaption></figcaption></figure>

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

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

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

&#x20;Example: Color Button, Color Link, and some other places.

&#x20;2\. **Body Color** is the color of the content text.

&#x20;Example: Color content, description ... in a single blog, single product, page ...

&#x20;3\. **Heading Color** is the color of the heading text.

&#x20;Example: Color Title, Title Tab ...

&#x20;4\. **Border Color** is the color border block.

&#x20;Example: border product block, border form input, and places with borders ...

&#x20;5\. **Light Color** is the color light used for sub-description.

&#x20;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.
