# Site Colors

Add a unique style to your website with the help of Global Colors, and assign colors and text styles to elements across the site easily.

**Predefined Global Colors**

By default, the predefined colors (*Primary*, *Secondary*, *Text,* and *Accent*) are pre-populated from the Sequoia theme’s CSS. Change them here to override the theme’s settings.

![](https://2425882545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCl8bwZ72WkAolEEjK0qm%2Fuploads%2FUEbuUIcNNZfHB61m9tFW%2Fglobalcolors.avif?alt=media\&token=1b53f918-0990-41cf-a157-01acff6d0743)

* **Primary Colors** are used for *Headings* and *Icons*.
* **Secondary Colors** are used for *List Items*, *Subheadings*, *Animated Headings*, and *Price Table backgrounds*.
* **Text Colors** are used for *Paragraphs* and *Menu items*
* **Accent Colors** are used for *Links*, *Button backgrounds*, *Tab and Accordion headings*, and *Badges*

![](https://2425882545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCl8bwZ72WkAolEEjK0qm%2Fuploads%2FPphTZTgIfCwyoeH4lmsb%2Fglobalcolors-colorpicker.avif?alt=media\&token=2d7e5e97-b3bd-49cb-be92-8bd08d13c8e7)

Each of the colors will be used in various widgets in ways similar to the examples above. Below are some color examples to help visualize the areas in which each color is used.

#### Primary Color Examples

![](https://2425882545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCl8bwZ72WkAolEEjK0qm%2Fuploads%2F9w7nq5whxh3MsotABA2U%2Fprimarycolor.avif?alt=media\&token=568d5fa6-763a-4428-ae8f-e35ddfbb7c6a)

#### Secondary Color Examples

![](https://2425882545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCl8bwZ72WkAolEEjK0qm%2Fuploads%2F98r4Jd5IgX0Lhjl4IgB4%2Fsecondarycolor.avif?alt=media\&token=c4065569-e450-49d0-bc69-ec43bba6db06)

#### Text Color Examples

![](https://2425882545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCl8bwZ72WkAolEEjK0qm%2Fuploads%2FWyRy7NIfjSDZrE82P9DI%2Ftextcolor.avif?alt=media\&token=d2a107ad-ce73-4519-8c72-7a3f912b760e)

#### Accent Color Examples

![](https://2425882545-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCl8bwZ72WkAolEEjK0qm%2Fuploads%2FdsYC1uCFeqY1rydO1kgh%2Ftextcolor-2.avif?alt=media\&token=78a20926-69ef-4bee-acaf-1e0ee22a826d)

#### **New Global Colors**

You can add any more colors to the global palette for use in all of Elementor's color options, in addition to the four basic global colors (Primary, Secondary, Text, and Accent).

#### Reorder Global and Custom Colors

You may change the order of your colors by clicking and dragging to the desired position. This allows you to group your color pallets and improve your workflow.

#### Inline Custom Colors

You can also select any custom color to be used inline, without adding it to the global colors palette.

From any Elementor page or post, click the **hamburger menu** in the upper left corner of the Widget Panel, then navigate to *Global Style > Global Settings > Colors & Typography*.

1. **Edit Color**: To choose a different color for any existing color, click the color swatch. You can change the names as well. For example, you could change Primary to Main, Accent to Highlight, etc.
2. **Add Color**: Click **Add Color button** to add a new global or inline custom color.
3. **Delete Color**: Hover over the color swatch and click the **trash can icon** that appears.

{% hint style="warning" %}
**Note**: By deleting a global color, all of its instances will inherit their values from an unknown source, possibly your theme, or your browser, etc.
{% endhint %}