# Color

**Step 1** - you can go to any elementor edit page.

![](https://4214174464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFyhPShmMNZ4yNrk43d9A%2Fuploads%2Fyo6m6AHtctWR6inliD0f%2Fimage%20\(4\)%20\(1\).png?alt=media\&token=b8068d6d-8c4d-4bb6-9425-720e4b8f3f11)

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

![](https://4214174464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFyhPShmMNZ4yNrk43d9A%2Fuploads%2FITm2LX08a0oT7R6UIU1w%2FScreenshot_7%20\(1\).png?alt=media\&token=603cc85c-16a4-45e9-aa5b-4182d5503afd)

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

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

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

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

 2\. **Body Color** is color of the content text.

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

 3\. **Heading Color** is color of heading text.

 Example: Color Title , Title Tab ...

 4\. **Border Color** is color border block.

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

 5\. **Light Color** is 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.