Dark Mode Mapper
Paste your light theme — CSS variables or a plain list of colors — and get a dark counterpart mapped through OKLCH. Hue is preserved, lightness is inverted into a range that leaves the dark theme room to breathe, and saturation is eased back so colors do not glare.
Paste CSS variables or a plain list of colors — anything that is not a color is left untouched.
The same chroma reads brighter on a dark background.
How dark the darkest surface is allowed to go.
Keeping this under 1 avoids pure white text.
Mapping
- --background#FFFFFF#090909
- --foreground#09090B#C9C9CC
- --card#FFFFFF#090909
- --primary#6366F1#6E75F2
- --primary-foreground#FAFAFA#0C0C0C
- --secondary#F4F4F5#0F0F0F
- --muted-foreground#71717A#63636B
- --border#E4E4E7#171719
- --destructive#E7000B#EC3A30
Dark palette
Same structure as your input, with every color remapped.
--background: #090909;
--foreground: #c9c9cc;
--card: #090909;
--primary: #6e75f2;
--primary-foreground: #0c0c0c;
--secondary: #0f0f0f;
--muted-foreground: #63636b;
--border: #171719;
--destructive: #ec3a30;Frequently asked
Why not just invert the lightness?
Because `L' = 1 - L` crushes both ends: white becomes pure black, black becomes pure white, and the result feels harsh. Real dark themes rarely use either extreme. Here the inverted lightness is compressed into a range you control, so surfaces stay slightly above black and text stays slightly below white.
Why is saturation reduced by default?
The same chroma reads brighter against a dark background — a saturated blue that looks calm on white can glare on near-black. Keeping about 90% of the original chroma usually preserves the character without the glare. The slider lets you go either way.
Does it change my brand hue?
No. Hue is passed through untouched. Only lightness and chroma are adjusted, which is what keeps the dark palette recognisably yours.
What can I paste?
Anything line-based. A :root block of CSS variables, a list of hex codes, Tailwind config fragments — each line is scanned for a color and everything else is left exactly as it was, so the output keeps your structure.
Should I check the result for contrast?
Yes. This tool maps colors relative to each other; it does not guarantee any particular text contrast. Run the output through the contrast matrix to confirm the pairs you actually use are readable.