Skip to content
TextArray1.87.0
100% local

Dark mode palette generator

Turn a light theme color list into a dark counterpart with verified contrast.

Input
30
Output
Related tools
Color palette generatorRandom generators
Contrast checkerDeveloper tools
CSS color variable extractorDeveloper tools
i18n key diffDeveloper tools
TOML to JSON converterDeveloper tools
SQL to JSONDeveloper tools
Dark mode palette generator
Paste the colors from a light theme — one per line — and this tool generates a dark counterpart for each one, ready to drop into your stylesheet. It is built for the everyday handoff of shipping a dark theme after the light one already exists: give it your background, surface and accent colors and it returns the same set, inverted for a dark UI.
Name each line like a CSS custom property ("background: #ffffff", "--accent: #3366cc") or just paste a bare hex value. Dark theme background sets the page background the palette is built against, and every color's contrast is checked against it. Target contrast picks WCAG AA (4.5:1) or AAA (7:1) — accents (the more saturated entries, meant for text, links and icons) are pushed toward that ratio, while muted surfaces are reported honestly but never forced, since a card background isn't read as text. Desaturate softens colors that would otherwise glow at full saturation in the dark, Preserve accent hue keeps a brand color's hue and intensity untouched, and Map surfaces to elevation levels steps neutral shades into a subtle ramp above the background, the way a card sits above the page behind it.
A line the tool can't read as a color — a stray comment, a blank heading — is skipped rather than breaking the rest of the list, and the count shows up in the tally alongside how many colors were generated and how many accents reached the target contrast. Very long lists and Windows or Unix line endings are both handled without extra setup.
Everything runs locally in your browser: colors are never uploaded or sent anywhere. Copy the result, download it as a .txt file, or send the output straight back into the input to keep refining the palette.
FAQ
What input format does it expect?
One color per line, as a hex value. Name it like a CSS variable ("primary: #3366cc") for a readable variable name, or paste a bare hex code and the tool names it automatically.
How does it decide which colors are accents?
A color with noticeable saturation is treated as an accent — meant for text, links or icons — and is pushed toward your chosen contrast level. A near-gray color is treated as a surface and follows the elevation mapping instead.
Why doesn’t every color reach the target contrast ratio?
Only accents are pushed to the target, since that ratio is a text-contrast rule. Surface and background fills are not text, so their contrast is reported in the tally but not forced.
What does "Map surfaces to elevation levels" do?
It steps your neutral, low-saturation colors up from the new dark background in small, even increments, instead of mirroring their original lightness — the same layered look as cards sitting above a page background.
Is my color list uploaded anywhere?
No. The palette is generated entirely in your browser and never leaves your device.