# Colors

{% columns %}
{% column %}
You can change the **Colors** of elements across your store, including general colors, header colors, footer colors, and product colors.

In the theme editor, click the **Theme settings** icon, then click to open the **Colors** tab.

{% hint style="info" %}
We recommend using WebAIM's [contrast checker](https://webaim.org/resources/contrastchecker/) when matching colors to make sure your text is clear and readable for everyone.
{% endhint %}
{% endcolumn %}

{% column %}
![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-877a694ac322771d8ad5f2508ef851b0929fd723%2Ftheme-settings-colors.jpeg?alt=media)

{% endcolumn %}
{% endcolumns %}

### General colors

***

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-37257d58487dc7b908edbce395f2c620c85d5ac1%2Ftheme-colors-general.jpeg?alt=media)

<table><thead><tr><th width="218">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Background</mark></td><td>The background on all pages including the home page. Appears in sections that have no background color set.</td></tr><tr><td><mark style="color:blue;">Links</mark></td><td>All links added to rich text blocks.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>All headings, subheadings, and body text. The Header and Logo text are set separately.</td></tr><tr><td><mark style="color:blue;">Lines and borders</mark></td><td>All lines and borders that appear between or within sections.</td></tr></tbody></table>

&#x20;

### Header colors

***

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-3883aa48d04114569483d3b32128a241194267bc%2Ftheme-colors-header.jpeg?alt=media)

<table><thead><tr><th width="210">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Text</mark></td><td>The color of all menu links, icons, borders, and additional text in the Header.</td></tr><tr><td><mark style="color:blue;">Background</mark></td><td>The background of the Header bar.</td></tr></tbody></table>

&#x20;

### Footer colors

***

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-dc25bdcf424afdf8c830e4d3dd9daca18be9094f%2Ftheme-colors-footer.jpeg?alt=media)

<table><thead><tr><th width="210">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Text</mark></td><td>All menu links and text in the Footer.</td></tr><tr><td><mark style="color:blue;">Background</mark></td><td>The background of the Footer.</td></tr></tbody></table>

&#x20;

### Button colors

***

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-1786dda8b1f96c4fb74075ee038345bed53fd0ca%2Ftheme-colors-buttons.jpeg?alt=media)

<table><thead><tr><th width="204">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Buttons</mark></td><td>All button backgrounds for Solid button styles. Button style options are included in button block settings per section.</td></tr><tr><td><mark style="color:blue;">Button text</mark></td><td>All button text for Solid button styles. Button style options are included in button block settings per section.</td></tr></tbody></table>

&#x20;

### Product colors

***

<table><thead><tr><th width="210">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Sale price</mark></td><td>Sale prices listed beneath products with "compare at price."</td></tr><tr><td><mark style="color:blue;">Rating star</mark></td><td>Rating stars in the <a href="../product-pages/product-page-sections/product-reviews">Product reviews</a> app block.</td></tr><tr><td><mark style="color:blue;">In stock</mark></td><td>The "In stock" label for the Stock level indicator.</td></tr><tr><td><mark style="color:blue;">Low in stock</mark></td><td>The "Low stock" label for the Stock level indicator.</td></tr><tr><td><mark style="color:blue;">Out of stock</mark></td><td>The "Out of stock" label for the Stock level indicator.</td></tr></tbody></table>