# Color

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

<figure><img src="https://1067416430-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlTStQZOwgDUXNvGAAWK%2Fuploads%2FZ2wrpFy3P7IgvBPXgiz7%2FScreenshot%202024-10-28%20at%2009.55.15.png?alt=media&#x26;token=a50d65cd-9129-4027-ae83-b2aea6f7c550" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/wlTStQZOwgDUXNvGAAWK/blobs/McXymnjpz936Po0dVyZB/Screenshot%202024-02-27%20at%2009.51.19.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1067416430-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlTStQZOwgDUXNvGAAWK%2Fuploads%2FVcBDj37XBaCfit7Dx6R1%2FScreenshot%202024-10-28%20at%2009.34.26.png?alt=media&#x26;token=beaf81b5-22ec-4f63-811d-201c6890e3e0" 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.

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

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

&#x20;3\. **Text Color** is the color of the content text.

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

4\. **Accent** **Color** is the color of the content text.

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

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

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

&#x20;Example: Color categories, color date-time, color subtitle ...

7\. **Dark Color** is the color light used for sub-description.

8\. **Background field** **Color** is the color Background field used for sub-description.

9\. **Linear start color** .

10\. **Linear end color** .

<figure><img src="https://1067416430-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlTStQZOwgDUXNvGAAWK%2Fuploads%2FlzCu52s1JiKFtgGD3QNY%2FScreenshot%202024-10-28%20at%2009.44.08.png?alt=media&#x26;token=e4f9aeb5-ee19-4f79-8fd8-5bad975df3a4" alt=""><figcaption></figcaption></figure>

* Show **Linear gradient color.**

Linear gradient color is used in many cases for example : button , sub-description,  content ,...

<figure><img src="https://1067416430-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlTStQZOwgDUXNvGAAWK%2Fuploads%2FV4MjU1fvzHXANFHdzBXU%2FScreenshot%202024-10-28%20at%2009.45.19.png?alt=media&#x26;token=429322a0-2f6d-4faa-9e98-7bbd9a652287" alt=""><figcaption></figcaption></figure>

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