> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/theme-settings/colors.md).

# Colors

Build reusable color schemes once, then assign them to sections across your store.

![Colors setting panel — color scheme editor overview](/files/OaVm3jma0dLOWYmybU9K)

***

## Schemes

A color scheme is a named palette — background, text, heading, border, and button colors that belong together. Define it once and point sections at it.

{% hint style="info" %}
Change a color inside a scheme, and every section using that scheme updates instantly — one edit, applied everywhere.
{% endhint %}

### Where schemes are used

Almost every section and block has a **Color scheme** setting. The area adopts that scheme's background, text, and button colors — letting one store mix a light content area, a dark hero, and a branded footer while staying coherent.

![Same page with different color schemes across sections — light content, dark hero, branded footer](/files/1Hq5ddeJVx88As3ec90Q)

### How to use them

1. In **Theme settings → Colors**, create or edit your schemes (duplicate a scheme to start from an existing look).
2. Open any section or block in the theme editor and set its **Color scheme**.
3. To restyle everywhere at once, edit the scheme itself rather than each section.

![Color scheme assigned to a section — scheme selector dropdown in section settings](/files/b1QmgjN2coHoZB9EPxCL)

### What a scheme controls

| Color                                                                                 | What it affects                                                 |
| ------------------------------------------------------------------------------------- | --------------------------------------------------------------- |
| Background                                                                            | The section's background canvas.                                |
| Headings                                                                              | Heading text color.                                             |
| Heading highlight                                                                     | Accent color for highlighted words inside a heading.            |
| Text                                                                                  | Body text color.                                                |
| Border                                                                                | Border lines on cards, dividers, and inputs.                    |
| Sale price                                                                            | The discounted price color, set per scheme so it stays legible. |
| Shadow                                                                                | Drop-shadow color for elevated elements.                        |
| **Primary button** — Background, Label, Hover border, Hover background, Hover label   | The primary button in every state.                              |
| **Secondary button** — Background, Label, Hover border, Hover background, Hover label | The secondary button in every state.                            |
| Outline & subtle button                                                               | A shared accent color for outline and subtle button styles.     |

![Color scheme token editor — all color fields within a single scheme](/files/p6wyvxrnqgbNZkorfIOn)

{% hint style="info" %}
**Hover border** is the outline a solid button takes on hover. Set it to the same color as the hover background for a button that stays flat, or to a contrasting color to have an outline appear as the cursor lands on it.
{% endhint %}

{% hint style="info" %}
Every color supports an **alpha (opacity)** value for translucent backgrounds, borders, and shadows.
{% endhint %}

***

## Sale badge

Global colors for the **Sale** badge on discounted products, applied across every section. Typically red.

| Setting          | Description                   |
| ---------------- | ----------------------------- |
| Background color | Fill color of the sale badge. |
| Text color       | Color of the badge label.     |

***

## Sold out badge

Global colors for the **Sold out** badge on unavailable products. Typically a neutral grey.

| Setting          | Description                       |
| ---------------- | --------------------------------- |
| Background color | Fill color of the sold-out badge. |
| Text color       | Color of the badge label.         |

{% hint style="info" %}
These are the global default badge colors. For full badge behavior — sale badge type, collection, and custom badges — see [Badges](/helix/theme-settings/badges.md).
{% endhint %}