OKLCH Color System

Perceptually uniform colors from hue symbols and algorithmic scales.

Explore

What changed

🎨

No raw colors

Zero hex values, zero Tailwind class names. Pure semantic expressions.

🎨

Hue symbols

sky, violet, rose, amber, emerald, slate, neutral — bind intent to hue angles.

🎨

Scale expressions

primary.500, neutral.50 — algorithmic 11-step scales using OKLCH lightness stops.

Available Hues

Each hue symbol binds to an OKLCH hue angle and peak chroma value:

  • sky — H: 220° (cool blue)
  • violet — H: 280° (purple)
  • rose — H: 10° (red/pink)
  • amber — H: 75° (yellow/orange)
  • emerald — H: 145° (green)
  • slate — H: 220° (neutral with cool tint, C: 0.009)
  • neutral — achromatic (C: 0)

Scale Expressions

From any hue, get 11 shades using step 50–950:

primary.500  → oklch(63.7% 0.19 220)   [vivid]
primary.100  → oklch(93.6% 0.027 220)  [pale]
neutral.900  → oklch(39.6% 0 0)         [dark gray]

Each step has its own lightness and chroma multiplier. Change the primary hue from sky to violet, and the entire palette shifts.

Try it: swap primary hues via generate_theme

View Example

2026 Gutenberg with OKLCH