Palette Core

Explore every shipped OKLCH color scale, copy CSS variables or resolved values, and learn how palette tokens support semantic themes.

Semantic roles stay coordinated

Surface, text, outline, accent, and feedback colors are relationships rather than isolated swatches.

Default

Subtle

Accent

Success

.panel {
  color: var(--text-default);
  background: var(--surface-default);
  border: 1px solid var(--outline-default);
}

.panel[data-status="success"] {
  color: var(--text-success);
  background: var(--surface-success);
  border-color: var(--outline-success);
}

More examples

Each example introduces a different part of the shipped API.

Contrast travels with the fill

Use the matching on-color token whenever a semantic fill becomes a foreground surface.

<button class="form-button btn-primary">Accent</button>
<button class="form-button btn-success">Success</button>
<button class="form-button btn-warning">Warning</button>
<button class="form-button btn-error">Error</button>

Overview

The palette system provides a comprehensive, perceptually uniform color system using OKLCH color space. It includes accent colors, semantic feedback colors, extended color ranges, and systematic scales for consistent theming.

Palette explorer

Choose a group, then select any swatch to copy it.

Copy

Live token editor

Edit the real palette input tokens. Changes are scoped to this explorer and update every dependent swatch immediately.

CSS variable Value

No overrides applied.

:root

Showing all 31 color scales. Scroll horizontally to see every step.

Accent accent-palette

Secondary secondary-palette

Tertiary tertiary-palette

Gray gray

Neutral neutral

Success success-palette

Warning warning-palette

Error error-palette

Info info-palette

Brown brown

Gold gold

Olive olive

Orange orange

Amber amber

Yellow yellow

Lime lime

Green green

Emerald emerald

Teal teal

Cyan cyan

Sky sky

Blue blue

Slate slate

Indigo indigo

Violet violet

Purple purple

Fuchsia fuchsia

Magenta magenta

Pink pink

Rose rose

Red red

Open Live token editor to change palette inputs in place. The editor writes overrides to the explorer’s isolated token host, so you can safely tune brand and feedback hues, shared lightness/chroma values, gamut clamps, and the seven named-family chroma profiles. The generated :root block contains only the values you changed; Reset selected and Reset all remove those overrides.

Color Space: OKLCH

The palette uses OKLCH (LCH in OKLab color space) for:

Perceptual Uniformity: Equal changes correspond to equal perceived differences
Intuitive Manipulation: Separate control of lightness (L), chroma (C), and hue (H)
Wide Gamut: Access to colors outside traditional RGB/HSV spaces

Scale Structure

Each color scale includes 13 steps (0-12):

Steps 0-2: Very light, subtle colors
Steps 3-5: Light colors for backgrounds and highlights
Steps 6-8: Medium colors for primary UI elements
Steps 9-11: Dark colors for text and strong elements
Step 12: Darkest color for maximum contrast

Color Calculation

Most colors use the shared lightness, chroma, and gamut-clamp tokens. Families that need perceptual correction expose dedicated chroma steps; Yellow is representative:

oklch(
  var(--scale-l-[step])     /* Lightness from scale */
  var(--palette-yellow-chroma-[step])
  var(--hue-yellow)         /* Hue angle */
)

Chroma Clamping

Chroma values are clamped to prevent out-of-gamut colors:

Base clamps: --clamp-max-c-0 through --clamp-max-c-6
Special clamps: Higher chroma allowed for error/warning colors
Neutral clamps: Reduced chroma for gray/neutral scales
Named-family profiles: Brown, gold, olive, orange, yellow, cyan, and slate expose --palette-[color]-chroma-0 through --palette-[color]-chroma-12 so each family keeps the expected visual character across the full scale

Hue angles are not equally vivid to the eye. Gold and Olive deliberately use restrained chroma so they read as metallic and earthy instead of duplicating Yellow or Lime; Slate uses a low-chroma blue-gray profile, while Yellow uses a stronger profile. Override both the hue and chroma-step tokens when creating a substantially different family.

Palette Categories

Accent Colors (`palette-accent.css`)

Primary, secondary, and tertiary color scales for branding and theming.

Accent Palette: Main brand color scale
Secondary Palette: Supporting color scale
Tertiary Palette: Additional accent scale

Base Colors (`palette-base.css`)

Foundation colors including grays and neutrals.

Gray Scale: Pure gray colors (chroma = 0)
Neutral Scale: Low-chroma colors with slight hue tint
Hue Definitions: Additional color hues (brown, gold, olive, magenta)

Feedback Colors (`palette-feedback.css`)

Semantic colors for status communication.

Success Palette: Green scale for positive states
Warning Palette: Orange/amber scale for caution states
Error Palette: Red scale for error states
Info Palette: Blue scale for informational states

Extended Colors (`palette-extended.css`)

Comprehensive color library with 20+ color scales.

Warm Colors:

Brown, Gold, Olive, Orange, Amber, Yellow

Cool Colors:

Blue, Slate, Indigo, Violet, Purple

Bright Colors:

Red, Green, Emerald, Teal, Cyan, Sky

Vivid Colors:

Magenta, Pink, Rose, Fuchsia

Usage in Design System

Surface Colors

--surface-default: var(--neutral-1);
--surface-subtle: var(--neutral-2);
--surface-muted: var(--neutral-3);

Text Colors

--text-default: var(--neutral-11);
--text-subtle: var(--neutral-9);
--text-muted: var(--neutral-7);

Accent Colors

--accent: var(--accent-palette-6);
--accent-subtle: var(--accent-palette-4);
--accent-overt: var(--accent-palette-8);

Feedback Colors

--success: var(--success-palette-6);
--warning: var(--warning-palette-6);
--error: var(--error-palette-6);
--info: var(--info-palette-6);

Implementation Details

Variable Dependencies

The palette requires variables from tokens.css:

Lightness scales: --scale-l-0 through --scale-l-12
Chroma scales: --scale-c-0 through --scale-c-10
Hue values: named scales use --hue-[color] (for example, --hue-red); configurable accent scales use --accent-h, --secondary-h, and --tertiary-h
Family chroma profiles: --palette-[color]-chroma-0 through --palette-[color]-chroma-12 for perceptually tuned named families
Max chroma clamps: --max-chroma-0 through --max-chroma-6

Layer Organization

@import url("core/palette-base.css") layer(palette);
@import url("core/palette-accent.css") layer(palette);
@import url("core/palette-feedback.css") layer(palette);
@import url("core/palette-extended.css") layer(palette);

All palette definitions are organized under the palette cascade layer.

Color Accessibility

Contrast Ratios

Scale distance is not a contrast guarantee. The final ratio depends on the hue, chroma, font size, and the two exact steps being paired. Test semantic foreground/background combinations with a contrast checker; do not assume that a fixed number of steps always meets WCAG.

Gamut Awareness

Clamping: Prevents colors from exceeding display capabilities
Fallbacks: Graceful degradation in limited-gamut displays

Customization

Brand Colors

Override hue values for custom branding:

:root {
  --accent-h: 280; /* Custom purple hue */
  --secondary-h: 200; /* Custom blue hue */
}

Extended Palettes

For a single stop, the experimental --palette-color() function removes the repeated OKLCH construction:

--brand-palette-7: oklch(var(--scale-l-7) var(--brand-chroma-7) var(--brand-h)); /* fallback */

@supports (color: --palette-color(50%, 0.2, 85)) {
  --brand-palette-7: --palette-color(var(--scale-l-7), var(--brand-chroma-7), var(--brand-h));
}

There are three whole-palette recipes:

@apply --palette-scale(var(--brand-h)) uses your local --palette-chroma-0 through --palette-chroma-12 profile.
@apply --palette-clamped-scale(var(--brand-h)) generates all 13 steps from the library’s standard gamut-limited curve.
@apply --palette-seed-scale(var(--brand-seed)) derives the scale from an OKLCH seed color while preserving its hue.

Each emits scoped --palette-step-0 through --palette-step-12 tokens. @apply --palette-roles adds convenient positional aliases, and @apply --palette-alpha-scale(var(--palette-step-7)) produces nine opacity variants. See Mixins Core for complete examples. Keep direct declarations as production fallbacks because mixin support remains experimental.

Performance Considerations

CSS Size

Complete palette: 31 scales × 13 steps, plus supporting hue and clamp tokens
Default import: index.css includes the complete palette; import individual files when building a smaller custom entry point
Compression: Well-suited to GZIP compression

Runtime Performance

Native calculations: Browsers resolve the OKLCH expressions from CSS custom properties
No JavaScript: Pure CSS color system
Efficient resolution: CSS variable lookups are fast

Browser Support

The palette uses the library’s core browser baseline because the semantic theme depends on relative OKLCH colors. See Browser Support for exact versions and fallback guidance.

Integration with Framework

The palette system integrates with:

Theme Layer: Semantic color role assignments
Components Layer: Color application in UI elements
Engine Layer: Dynamic color adjustments
Mixins Layer: Color manipulation functions

Best Practices

Use semantic names: Prefer --accent over --blue-6
Consistent steps: Use same step numbers for related colors
Test contrast: Verify color combinations meet accessibility standards
Document overrides: Comment custom hue values for maintenance