# Color

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

![](https://4034537021-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhFOKbQeGqzNteNoA4DjZ%2Fuploads%2FjvICstez7k49ntrrHFDK%2F1.png?alt=media\&token=184fa4c0-880d-4aed-a1f7-0d6a4142060c)

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

<figure><img src="https://4034537021-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhFOKbQeGqzNteNoA4DjZ%2Fuploads%2FqT1cpoDWFpbTpFlK1Qyb%2FScreenshot%20at%20Feb%2002%2017-10-51.png?alt=media&#x26;token=ed551641-62a0-4259-b9f0-0961247152c5" alt=""><figcaption></figcaption></figure>

**Step 3** - Settings 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 color of the content text.

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

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

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

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

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

&#x20;5\. **Light Color** is 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.