# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/stiletto/theme-styles/colors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.