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