> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/theme-styles/colors.md).

# Colors

{% hint style="info" %}
Color options were updated in 6.0.0 and later. Learn how to [update your theme](/stiletto/general/theme-updates.md) to access new features.
{% endhint %}

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 <i class="fa-gear">:gear:</i> **Theme settings** and 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 %}

<h2 align="center">Color schemes</h2>

***

{% columns %}
{% column %}
A **color scheme** consists of a set of colors that you can apply sections throughout your store. Color schemes help you create consistent palettes.

* In **Theme settings**, click a color scheme to edit its color options. Click **(+) Add scheme** to add a new color scheme.
* Apply color schemes to components of your theme and to sections in section settings
  {% endcolumn %}

{% column %}

<figure><img src="/files/Fb0mwESHMec0CSw9oN2F" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

### <mark style="color:$primary;">Color scheme options</mark>

Every color scheme has the following color options.

<sub><mark style="color:$info;">Find settings in Theme settings > Colors. Click or add a color scheme to edit.<mark style="color:$info;"></sub>

<table><thead><tr><th width="192">General colors</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Background</mark></td><td>The background of the section, which spans the full height and width.</td></tr><tr><td><mark style="color:blue;">Background gradient</mark></td><td>Some sections can use a gradient background instead of a solid color background.<br><br>You can choose the style, angle, position, and opacity of the gradient. See Shopify's <a href="https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients">color gradient guide</a> to learn more.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>All headings, subheadings, and body text.</td></tr><tr><td><mark style="color:blue;">Links</mark></td><td>All linked text added to rich text blocks.</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><tr><td><strong>Solid buttons</strong></td><td></td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>The button label text color</td></tr><tr><td><mark style="color:blue;">Background</mark></td><td>The background of the button</td></tr><tr><td><mark style="color:blue;">Background hover</mark></td><td>The background color that appears when hovered over</td></tr><tr><td><strong>Outline buttons</strong></td><td></td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>The button label text color</td></tr><tr><td><mark style="color:blue;">Background</mark></td><td>The background of the button</td></tr></tbody></table>

### <mark style="color:$primary;">Apply color schemes</mark>

Select a color scheme to apply to **Popovers, Modals,** and **Drawers**.

<sub><mark style="color:$info;">Find settings in Theme settings > Colors<mark style="color:$info;"></sub>

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Default color scheme</mark></td><td>Select the color scheme that applies to sections and pages by default.</td></tr><tr><td><mark style="color:blue;">Popovers and modals</mark></td><td>Select a color scheme for popups and modals, such as popups and information popups.</td></tr><tr><td><mark style="color:blue;">Drawers</mark></td><td>Select a color scheme for menus and cart drawers.</td></tr></tbody></table>

<h2 align="center"></h2>

<h2 align="center"></h2>

<h2 align="center">Custom theme colors</h2>

***

### <mark style="color:$primary;">Products</mark>

Select colors for elements used in product listings and product pages.

<sub><mark style="color:$info;">Find settings in Theme settings > Colors<mark style="color:$info;"></sub>

<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="/pages/Gv4517Rg6OOcDjzJI4ML">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>

### <mark style="color:$primary;">Notifications</mark>

Select colors for notification messages in forms.

<sub><mark style="color:$info;">Find settings in Theme settings > Colors<mark style="color:$info;"></sub>

<table><thead><tr><th width="184">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Success</mark></td><td>Success messages for forms.</td></tr><tr><td><mark style="color:blue;">Error</mark></td><td>Error messages for forms.</td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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