> 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/reference/utilities/color.md).

# Color utilities

Utilities for coloring elements from the active color scheme: the semantic palette, the mix palette, scheme-switching vars- classes, and the stain indirection.

Utilities for coloring elements with the active color scheme's palette.

| Class                                                                                               | What it does                                                                                                                                                           |
| --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `bg-{color}`, `text-{color}`, `border-{color}`, `fill-{color}`, `stroke-{color}`, `ring-{color}`, … | Solid palette color. `{color}` is `canvas`, `content`, `primary`, `secondary`, `muted`, `sale`, `success`, `error`, `black`, `white`, or any of those plus `-contrast` |
| `{color}/{opacity}`                                                                                 | Alpha modifier, e.g. `text-content/50`                                                                                                                                 |
| `bg-{color}-mix-{5\|10\|20\|30\|40\|50\|60\|70\|80\|90\|95}`                                        | `color-mix()`: n% of the color blended into its contrast partner                                                                                                       |
| `text-muted-subtle`                                                                                 | Muted at 50% into canvas                                                                                                                                               |
| `bg-sale-bg`                                                                                        | Sale at 10% into canvas, for sale badges and price highlights                                                                                                          |
| `border-line-subtle` / `border-line` / `border-line-bold`                                           | Content at the scheme's three line alphas. A bare `border` already defaults to `line`                                                                                  |
| `ring-focus-outline` / `outline-focus-outline`                                                      | The focus indicator color (`--focus-outline-color`)                                                                                                                    |
| `bg-page-canvas` / `text-page-content`                                                              | The page-level scheme's colors, regardless of the local scheme                                                                                                         |
| `vars-scheme-{1…n}`                                                                                 | Re-points the whole palette to that scheme from "Color schemes", for the element and its subtree                                                                       |
| `vars-scheme-light` / `vars-scheme-dark`                                                            | The schemes picked in the "Light mode" / "Dark mode" settings                                                                                                          |
| `vars-scheme-success` / `vars-scheme-error`                                                         | The status schemes                                                                                                                                                     |
| `vars-scheme-success-if-valid` / `vars-scheme-error-if-invalid`                                     | The status scheme, applied only while the element or a descendant matches `:user-valid` / `:user-invalid` (and is not empty)                                           |
| `vars-stain-{color}`                                                                                | Copies a palette color into the `stain` slot; `bg-stain`, `text-stain-contrast`, `bg-stain-mix-20`, … then read it                                                     |

Every color reads from scheme variables such as `--content-oklch` and `--primary-oklch`, so the same class works in every scheme. Canvas pairs with content. Primary pairs with the scheme's "Primary contrast" color. Secondary, muted, and sale pair with canvas.

The mix steps use per-scheme `--mix-{n}` variables instead of fixed percentages. Dark schemes increase the low steps because screens flatten small differences between dark colors. `bg-content-mix-5` is the standard subtle fill.

Tailwind compiles a class only when it appears as a literal in source. Analog safelists all `vars-*` classes, `bg-` and `text-` classes for `canvas`, `content`, `primary`, `secondary`, `muted`, and `sale`, plus the `bg-` and `text-` mixes of `canvas` and `content`. Other combinations must appear literally in source.

## Examples

### Basic palette colors

Use `bg-{color}` and `text-{color}` for the semantic roles of the active scheme:

```html
<div class="bg-canvas text-content">
  <h3 class="type-h5">Portable turntable</h3>
  <p class="type-p text-muted">Ships in 2–3 days.</p>
</div>
```

### Tinting with the mix palette

Use low `{color}-mix-{n}` steps for fills and high steps for softer text:

```html
<div class="bg-content-mix-5 rounded-md p-r6">
  <p class="type-p text-content-mix-70">Sold out. Back in spring.</p>
</div>
```

### Switching schemes on a subtree

Use `vars-scheme-{n}` to apply another scheme to an element and its children:

```html
<aside class="vars-scheme-2 bg-canvas text-content p-r8">
  <h3 class="type-h4">Join the list</h3>
</aside>
```

`vars-scheme-light` and `vars-scheme-dark` work the same way; the theme uses them for text over images, where the merchant's "Light mode" and "Dark mode" picks decide the palette.

### Status colors on forms

Use `vars-scheme-error-if-invalid` on a field wrapper so the error scheme applies only once the input is invalid after user interaction:

```html
<div class="vars-scheme-error-if-invalid">
  <input type="email" required class="border-line text-content">
  <p class="text-r2 text-content">{{ 'contact.email_error' | t }}</p>
</div>
```

The theme's `field` snippet wraps every input this way, and renders server-known errors with the unconditional `vars-scheme-error` instead.

### Reusable components with stain

Use `vars-stain-{color}` to pick a color once and write the component against `stain`:

```html
<span class="vars-stain-primary bg-stain text-stain-contrast rounded-pill px-r4">
  New
</span>
```

Change the `vars-stain-*` class or bind it to a setting to recolor the component. Mixes update too, so `bg-stain-mix-10` follows the current stain.

## Customizing

Schemes, their colors, and the light/dark/status assignments are merchant settings, documented once in [Color](/core-concepts/color.md).