Primitive 02

Palette builder

Pick a foreground × surface pair and read the WCAG verdict instantly. The OKLCH wheel positions every swatch by hue + chroma.

Production answer

Palette builder is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Palette builder states
Generative search brief

Palette builder: Pick a foreground × surface pair and read the WCAG verdict instantly. The OKLCH wheel positions every swatch by hue + chroma.

Three states

Default Mufflermen palette (passing), the Heritage Cream palette (period correct, light surfaces), and a deliberately failing pair to show the fail verdict in red.

State 01 · Mufflermen
Umbrella · Palette

Palette builder

OKLCH-aware preview with live WCAG contrast against your chosen surface.

AA Large · 4.46:1
OKLCH preview

Signal Red · oklch(58.0% 0.22 27.0)

Palette swatches
Signal Red#E62028 · primary
Workshop Amber#FF9A1F · warning
Diagnostic Teal#27D6CB · secondary
Pass Green#3FE07A · success
Obsidian Canvas#050508 · surface
Body text#C7C9D0 · text
Contrast preview

The Mufflermen badge stays legible on every supported surface.

Body copy at 13/1.5 over Obsidian Canvas — 4.46:1.

State 02 · Heritage Cream
Umbrella · Palette

Palette builder

OKLCH-aware preview with live WCAG contrast against your chosen surface.

AAA · 13.90:1
OKLCH preview

Body text · oklch(21.0% 0.04 60.0)

Palette swatches
Signal Red#7A1F1F · primary
Workshop Amber#C08A2E · warning
Diagnostic Teal#27D6CB · secondary
Pass Green#3FE07A · success
Obsidian Canvas#F4ECD8 · surface
Body text#2A1D12 · text
Contrast preview

The Mufflermen badge stays legible on every supported surface.

Body copy at 13/1.5 over Obsidian Canvas — 13.90:1.

State 03 · Failing pair
Umbrella · Palette

Palette builder

OKLCH-aware preview with live WCAG contrast against your chosen surface.

AA · 4.76:1
OKLCH preview

Body text · oklch(51.0% 0.01 270.0)

Palette swatches
Signal Red#E62028 · primary
Workshop Amber#FF9A1F · warning
Diagnostic Teal#27D6CB · secondary
Pass Green#3FE07A · success
Obsidian Canvas#050508 · surface
Body text#7A7A7E · text
Contrast preview

The Mufflermen badge stays legible on every supported surface.

Body copy at 13/1.5 over Obsidian Canvas — 4.76:1.