OKLCH Theme Generator

Define Brand, Surface and Error seed colors → generates perceptually uniform Primitive Token scales in the OKLCH color space, maps them to ready-to-use Semantic Tokens (shadcn/ui compatible), and previews your theme across Light, Dark and High Contrast modes.

          Surface Chroma
          Chroma intensity for background and surface tokens
        

        Grey
        Vibrant
      

Theme Preview

Primitive Tokens

Full chroma — buttons, switches, checkboxes, interactive elements

Step	Color	Hex	OKLCH	L	C	Zone

Surfaces · containers — 25% chroma

Step	Color	Hex	OKLCH	L	C	Zone

Full chroma — destructive actions, alerts, validation states

Step	Color	Hex	OKLCH	L	C	Zone

Error surface palette — 25% chroma

Step	Color	Hex	OKLCH	L	C	Zone

0% chroma — High Contrast surfaces · #fff and #000 included

Step	Color	Hex	OKLCH	L	C	Zone

Export

Click the button in the top-right corner to copy the entire block

Semantic Layer References Primitive Tokens — paste after your :root block