Can I edit the generated dark values?

Yes. Every dark hex in the table is editable. The tool generates a first pass; fine-tuning by eye is expected and encouraged.

Does this tool handle semantic tokens?

It flips primitives. Semantic tokens (background, foreground, accent) continue to reference the same primitive keys — only the primitive values change between light and dark. That is the correct architecture for a dark mode.

How do I add tokens to the schema?

Use the Color Ramp Generator to create a colour ramp, or save individual colours from the Contrast Checker. Any colour primitive in the schema will appear in this tool.

Tools — 17

Dark mode is not an inversion. It is a second opinion on your own palette.

A dozen standalone dark-palette generators exist, and none of them know your tokens. This tool reads the colours already in your schema, flips their lightness in OKLCH, validates contrast per pair, and exports the result as a dark theme layer. Your system, previewed — not a new palette conjured from nothing.

Token pairs

Each light token is flipped by inverting its OKLCH lightness. Edit the dark hex to fine-tune.

Token	Light	Dark	Contrast

Side-by-side preview

Light

Headline

Body copy in the light theme. Compare this with the dark preview beside it.

Primary Secondary

Dark

Headline

Body copy in the dark theme. Compare this with the light preview beside it.

Primary Secondary

Export

CSS dark-mode layer

@media (prefers-color-scheme: dark) {
  :root {

  }
}

Reference

A dark mode is not an inversion — it is a new set of token values that preserves the semantic intent of the light set. Lightness inversion in OKLCH, with chroma reduced slightly, produces a first-pass dark palette that holds hue and avoids the washed-out or oversaturated results of naive colour inversion.

Why does simple colour inversion produce bad dark modes?

Inverting RGB channels flips both lightness and hue. Blue becomes orange, green becomes magenta. The result bears no visual relationship to the light palette.

Inverting lightness alone in a perceptual colour space (OKLCH) preserves hue and produces a colour that is recognisably the same colour at a different value — which is the entire point of a dark mode.

Why does this tool reduce chroma for dark mode?

High-chroma colours on a dark background appear to glow or vibrate, a well-documented effect of simultaneous contrast. Reducing chroma by 10–20% counteracts this without desaturating the palette visibly.

This is the same approach used by Material Design 3 and Apple's Human Interface Guidelines for their dark-mode colour generation.

Why does this tool only work on existing tokens?

Deliberately. The dark-mode generator market is oversaturated with tools that create a palette from scratch. This tool is positioned as "preview my own system in dark mode" — it operates exclusively on tokens already in the shared schema, which is what makes it useful to someone who already has a light palette and needs to validate its dark counterpart.

Common questions

Can I edit the generated dark values?: Yes. Every dark hex in the table is editable. The tool generates a first pass; fine-tuning by eye is expected and encouraged.
Does this tool handle semantic tokens?: It flips primitives. Semantic tokens (background, foreground, accent) continue to reference the same primitive keys — only the primitive values change between light and dark. That is the correct architecture for a dark mode.
How do I add tokens to the schema?: Use the Color Ramp Generator to create a colour ramp, or save individual colours from the Contrast Checker. Any colour primitive in the schema will appear in this tool.