--- title: Colors description: Use Olyx OKLCH color roles and component color tokens correctly. --- Olyx uses an **OKLCH color system inspired by Material color roles**. The color file exposes only the role tokens listed here, and component styles should depend only on these tokens. --- ## Seed Variables ```css :root { --base-lightness: 0.5; --base-chroma: 0.18; --base-hue: 200; } ``` | Variable | Range | Purpose | |----------|-------|---------| | `--base-hue` | `0` to `360` | Primary hue and neutral hue | | `--base-chroma` | `0` to `0.4` | Accent color intensity | | `--base-lightness` | `0` to `1` | Accent role lightness calculation | Harmony modes change secondary and tertiary hue offsets when applied to the root theme: ```html ... ``` Supported values are `complementary`, `triadic`, `analogous`, and `monochromatic`. --- ## Accent Roles Use each fill token with its matching `on-*` token. | Preview | Token | Use | |---------|-------|-----| |

| `--color-primary` / `--color-on-primary` | Primary filled actions and strong active indicators | |

| `--color-primary-container` / `--color-on-primary-container` | Selected tonal states and active containers | |

| `--color-secondary` / `--color-on-secondary` | Secondary filled accents | |

| `--color-secondary-container` / `--color-on-secondary-container` | Secondary tonal containers | |

| `--color-tertiary` / `--color-on-tertiary` | Tertiary accents | |

| `--color-tertiary-container` / `--color-on-tertiary-container` | Tertiary tonal containers | --- ## State Roles State roles follow the same role pairing. | Preview | Token | Use | |---------|-------|-----| |

| `--color-success` / `--color-on-success` | Success fills | |

| `--color-success-container` / `--color-on-success-container` | Success badges, banners, and alerts | |

| `--color-info` / `--color-on-info` | Informational fills | |

| `--color-info-container` / `--color-on-info-container` | Informational badges, banners, and alerts | |

| `--color-warning` / `--color-on-warning` | Warning fills | |

| `--color-warning-container` / `--color-on-warning-container` | Warning badges, banners, and alerts | |

| `--color-error` / `--color-on-error` | Error and destructive fills | |

| `--color-error-container` / `--color-on-error-container` | Error messages and invalid state backgrounds | --- ## Surface Roles Surface roles are the neutral system used for component backgrounds, borders, dividers, disabled states, and lower-emphasis text. | Preview | Token | Use | |---------|-------|-----| |

| `--color-surface` / `--color-on-surface` | Default page and component surface | |

| `--color-surface-container-lowest` | Menus, popovers, and lowest container elevation | |

| `--color-surface-container-low` | Hover state and low-emphasis containers | |

| `--color-surface-container` | Disabled fills and grouped neutral containers | |

| `--color-surface-container-high` | Strong hover states and raised neutral containers | |

| `--color-surface-container-highest` | Borders, dividers, and highest neutral elevation | |

| `--color-surface-variant` / `--color-on-surface-variant` | Alternative neutral surfaces and subdued text/icons | --- ## Component Rules | Need | Use | |------|-----| | Text/icons on a filled role | Matching `--color-on-*` token | | Selected tonal state | `--color-primary-container` + `--color-on-primary-container` | | Subtle border or divider | `--color-surface-container-highest` | | Strong neutral icon or disabled indicator | `--color-on-surface-variant` | | Focus ring | `color-mix(in oklab, var(--color-primary) 35%, transparent)` | | Error focus ring | `color-mix(in oklab, var(--color-error) 35%, transparent)` | | Disabled fill | `--color-surface-container` | | Disabled content | `color-mix(in srgb, var(--color-on-surface) 38%, transparent)` | | Overlay | `color-mix(in srgb, var(--color-on-surface) 32%, transparent)` | | Tooltip dark variant | `--color-on-surface` background with `--color-surface` text | --- ## Source The token generation lives in the shared color files: --- ## Further Reading - [M3 Color System Overview](https://m3.material.io/styles/color/system/overview) - [M3 How the System Works](https://m3.material.io/styles/color/system/how-the-system-works) - [M3 Color Roles](https://m3.material.io/styles/color/roles)