Dark Mode Color Palette

What this tool is used for

• Deriving a dark theme from an existing light palette as a starting point.
• Producing surface and background steps rather than a single dark colour.
• Adapting text colours so they remain readable on dark surfaces.
• Generating a dark counterpart for each semantic token.
• Getting a first pass you then correct by eye.

Frequently Asked Questions

Why isn't the dark background pure black?

It is generated at 8% lightness, not 0%. Pure black against near-white text is a maximum-contrast edge that causes halation — the text appears to smear for many readers, and especially for people with astigmatism. Material Design's #121212 sits at almost exactly this level.

Why are the colours desaturated?

Background, surface, text and border are clamped to at most 15–20% saturation, because a saturated colour over a dark field vibrates. Brand hues go the other way: primary and accent gain saturation and are lifted to at least 55% lightness, since a dark brand colour disappears entirely.

Can I just invert my light palette?

No — that is the classic mistake. Inverting makes shadows into glows, turns a subtle grey border into a bright line, and produces exactly the pure-black background above. Dark mode is a separate palette that shares hues, which is what this generates.

How is elevation shown without shadows?

By lightness. A shadow is nearly invisible on a dark background, so a raised surface is drawn *lighter* than the one beneath it — here, 13% against the 8% background. Stack no more than three or four levels before the difference stops reading.

How do I ship both themes?

Define the palette as custom properties on `:root`, then override them inside `@media (prefers-color-scheme: dark)`, and add a `[data-theme]` selector if you offer a manual toggle. Components then reference `var(--surface)` and never a literal colour.

Why does light text on dark look bolder than it should?

Halation — light bleeds visually into the surrounding dark, thickening the strokes. It is why dark themes often use a slightly lighter font weight than their light counterparts, and why pure white on pure black is the worst case.

Common errors and gotchas

• Inverting the palette, which produces wrong hues and unreadable text rather than a dark theme.
• Using pure black as the background, where a slightly lifted surface reads better and shows elevation.
• Keeping saturation constant, when saturated colours read as harsher on dark backgrounds.
• Reusing the light theme's shadows, which are invisible on dark surfaces.
• Shipping without re-checking contrast, since the ratios change entirely.