> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/core-concepts/color.md).

# Color

How Analog builds color schemes from a few roles, including derived tints, scheme slots, and contrast colors.

You set a few colors for each scheme. Analog uses them to generate the tints, lines, and badge fills it needs. Sections select a complete scheme, so changing the scheme updates everything inside the section.

## Color schemes

A color scheme is a named set of roles. Every element in a section reads its color from the selected scheme. Analog uses Shopify's native color scheme group, so choose a scheme from the section's "Color scheme" setting. Don't add hex codes to individual elements.

## Roles in a scheme

Each scheme exposes seven roles under global theme settings › Color.

| Role             | Setting                     | Notes                                                         |
| ---------------- | --------------------------- | ------------------------------------------------------------- |
| Canvas           | "Background"                | The surface everything sits on                                |
| Content          | "Text"                      | Must contrast with "Background". This is the required pairing |
| Muted            | "Muted text"                | Secondary and supporting text                                 |
| Secondary        | "Text links"                | Text links                                                    |
| Sale             | "Sale text"                 | Sale prices                                                   |
| Primary          | "Primary"                   | The accent that highlights the purchase path                  |
| Primary contrast | "Text contrast for primary" | The label color used on top of "Primary"                      |

Start with "Background" and "Text". They must have enough contrast. The other roles also render against the background, but the theme cannot correct this first pair for you.

## The primary accent is the exception

"Primary" can be close to the background when the design calls for it. It has a separate "Text contrast for primary" setting for button labels and other text rendered on the primary color. Match it to "Text" by default. Change it when the primary color needs light text on a dark scheme or dark text on a light scheme.

{% hint style="warning" %}
Use black text on a bright yellow or gold primary color. Some WCAG AA checkers pass white text on these colors even though it is hard to read. APCA handles high-luminance colors better. Your eyes will also make the problem obvious.
{% endhint %}

## The five scheme slots

Schemes are assigned to five named jobs in the Color settings, and each section picks any scheme from its own "Color scheme" setting.

| Slot         | Used for                                                                   |
| ------------ | -------------------------------------------------------------------------- |
| "Default"    | Pages and sections without a color scheme setting, like the gift card page |
| "Success"    | Successful password resets and form submissions                            |
| "Error"      | Failed logins and incomplete forms                                         |
| "Dark mode"  | Overlaying text on dark images, where light text is preferable             |
| "Light mode" | Overlaying text on light images, where dark text is preferable             |

Four schemes cover the required slots: light, dark, success, and error. Add more when sections need more variety, then assign the closest scheme to each slot.

Success and error schemes can share the default background and use only text color to show status. You can also use faint green and red backgrounds for a stronger status treatment.

## You do not pick tints

Analog mixes each role into the background at steps from 5% through 95%. Badge fills, sale-price backgrounds, borders, and soft tints use these steps. Change a scheme and they all update. Dark schemes use different blend strengths because the values that work on white disappear into black on an LCD screen.

## Transparent headers borrow the overlay schemes

A transparent header uses the "Dark mode" or "Light mode" scheme based on the banner's overlay style. This keeps the logo and navigation readable over the image. See [Header, toolbar & navigation](/features/header.md).

## The color palette

Use "Color palette" for individual color settings found in sections and blocks. Add a color to the palette once, then update every use from the same place.

## For developers

A scheme renders a `vars-{scheme-id}` class and sets role variables for its subtree. Colors use OKLCH with RGB fallbacks for older browsers. See the [color utilities reference](/reference/utilities/color.md) for `bg-canvas`, `text-content`, `bg-content-mix-10`, and the other classes.

## See also

* [Global settings & local overrides](/core-concepts/settings-cascade.md): how a block overrides its section's scheme
* [Typography](/core-concepts/typography.md): font roles and type presets
* [Header, toolbar & navigation](/features/header.md): transparent headers and overlay schemes