Dark Mode Palette Pair Generator
Pair each light-mode hex colour with a dark-mode counterpart using OKLCH lightness inversion.
Overview
The Dark Mode Palette Pair Generator takes an entire light-mode palette and produces a matching dark-mode counterpart by inverting OKLCH lightness while preserving hue and chroma. Paste in your design-system colours and the tool returns a paired table with the original swatch, the dark equivalent, and the WCAG contrast ratio against the mode-appropriate background.
It is the bulk version of dark-mode pair checking — useful when porting a full token set from light to dark, building a Tailwind config that supports both modes, or refreshing an existing dark theme to match a new light palette. Bulk pairing avoids the drift that happens when each token is converted by hand.
How it works
Each input colour is converted to OKLCH. The lightness component is mirrored around 0.5 (so a token at L 0.95 becomes L 0.05, and L 0.30 becomes L 0.70) while chroma and hue stay constant. The result is converted back to sRGB and clamped if it falls outside the displayable gamut.
Perceptually uniform OKLCH is important here because naive HSL inversion shifts hue and over-darkens cool colours. With OKLCH, a "light blue" reliably becomes a "dark blue" of the same hue and saturation, ready to slot into the equivalent token in the dark-mode theme.
Examples
#ffffff L 1.00 → #000000 L 0.00
#f8fafc L 0.98 → #050708 L 0.02
#3b82f6 L 0.60 → #325ab8 L 0.40
#dc2626 L 0.58 → #d24c4c L 0.42
FAQ
Why mirror lightness instead of inverting RGB?
RGB inversion (#fff → #000) gives complementary hues for chromatic colours, which is rarely what you want. OKLCH mirroring keeps the hue and only swaps the lightness, so brand colours stay recognisable across modes.
Are the resulting colours WCAG-compliant?
The lightness mirror preserves the contrast against pure-mirror backgrounds (white ↔ black) but not against intermediate greys. Always re-check the foreground/background pair after generation.
Should I always use the auto-generated dark token?
Use it as a starting point. Brand colours, error reds and call-to-action greens often need manual desaturation in dark mode to avoid neon glow.
Can I generate the inverse — dark palette to light?
Yes. The mirror is symmetric, so feeding the dark palette back through the generator returns the original (modulo any out-of-gamut clamping).