Convert an existing light-theme palette into dark-mode equivalents. Each colorβs lightness is flipped in OKLCH β neutrals mirror fully, brand colors partially β and chroma is damped, because saturated colors that behave on white tend to vibrate on near-black. Shown as before/after pairs.
Generated locally in your browser β your colors, settings and code never leave this page.
Dark mode is a translation, not a negation
The naive dark mode — invert everything — fails within minutes of contact with a real interface: brand colors turn alien, saturated accents scream against black, mid-grays go nowhere. What dark mode actually is: a translation of the palette’s relationships into a different lighting regime. Structure flips (light surfaces become dark), identity persists (your blue stays your blue), and intensity adapts (chroma comes down). This generator performs exactly that translation, color by color, and shows each before/after pair for review.
The mechanics of the flip
Each color’s OKLCH lightness mirrors around the midpoint — but conditionally. Near-neutrals (structural colors) mirror fully: a 0.97 background lands near 0.16. Chromatic colors mirror partially, compressed toward the middle, because a fully flipped brand color usually leaves its recognizable range. Chroma is damped by your slider — the perceptual reality being that the same chroma reads louder on dark ground, so dark themes that keep light-theme chroma look garish. Hue is untouched, always.
Why the defaults look like every major design system
Near-black-not-black backgrounds (elevation needs headroom below and above), damped accents, lightened-not-neon interactive colors — these conventions were converged on independently by every serious dark theme because the constraints are physical: OLED smearing, halation around saturated-on-dark edges, perceived loudness shifts. The generator’s defaults encode the convergence; the slider lets house style deviate knowingly.
After the translation, re-certify
Contrast relationships approximately survive the flip — approximately. Muted text is the usual casualty: light-theme muted gray at 4.6:1 can land at 4.1:1 after translation. Run the dark set through the Palette Contrast Matrix as a matter of routine, and art-direct the moments that deserve it (heroes, illustrations, elevated cards). Mechanical translation plus targeted judgment is how good dark modes actually get made.
A translation, traced
Five typical light-theme colors through the flip, showing the conditional logic in action:
| Light theme | Dark result | What happened |
|---|---|---|
| #f5f7fa (background) | #16181c | neutral β mirrored fully |
| #111827 (text) | #e8eaf0 | neutral β mirrored fully |
| #1e90ff (brand) | #4f9dfa | chromatic β lightened, chroma damped |
| #10b981 (success) | #34c795 | chromatic β partial flip |
| #ef4444 (danger) | #f26b6b | chromatic β lifted off the black |
The two neutrals swap ends of the lightness axis while the three brand colors move far less — identity preserved, context translated. If a translated palette ever looks wrong, this table is the debugging frame: check whether the misbehaving color was treated as structure or identity, and adjust its chroma to change its classification.
How to use the Dark Mode Palette Generator
- Paste your light-theme colors, comma separated.
- Set how much chroma to shed on dark surfaces.
- Review each before/after pair.
- Export the dark set.
Frequently asked questions
What transformation is applied to each color?
Lightness flips around the axis in OKLCH – near-white surfaces become near-black, dark text becomes light – while brand-ish colors flip partially so they stay recognizable, and chroma is damped by your chosen amount. Hue never changes: your blue stays your blue.
Why damp chroma at all in dark mode?
Saturated colors on near-black grounds produce a vibrating, halation-like effect (worst for reds and blues) and feel louder than the same color on white. Every major design system quietly ships desaturated dark variants; the slider makes that explicit and tunable.
Why do neutrals flip completely but colors only partially?
Neutrals are structure – background must become dark, text light, or it is not a dark mode. Brand colors are identity: a full flip would turn a navy brand baby-blue. The generator detects low-chroma colors and mirrors them fully, high-chroma ones gently.
Is pure black a good dark background?
Rarely – #000 makes elevation impossible (nothing is darker for shadows, everything lighter glows) and maximizes smearing on OLED scrolling. The flip lands near-black around OKLCH L 0.15-0.2, matching the grays real systems use.
Do my light-theme contrast ratios survive the conversion?
Approximately but not exactly – flipped lightness roughly mirrors contrast relationships, then chroma damping shifts things a little. Verify the pairs that matter in the Palette Contrast Matrix; dark modes have their own AA failures, typically muted text.
Should dark mode be generated or designed?
Generated first, art-directed second. The mechanical flip gets 80% right in seconds; human judgment then fixes the brand moments – hero sections, illustrations, elevated cards. This tool is the honest 80%.
What about images and shadows in dark mode?
Beyond palette scope but worth flagging: shadows need lighter surfaces (not darker shadows) to signal elevation, and images often want a slight dim (opacity 0.85-0.9) to sit comfortably. The palette sets the stage; those two details finish it.
