Dark mode palette generator
Enter one brand colour and get a proper, accessible dark-mode palette — dark-grey surfaces, off-white text and balanced accents — with the WCAG contrast checked for you and ready-to-paste prefers-color-scheme CSS. This is a real dark-mode transform, not a colour inversion.
Your product
This is how body text looks in light mode against the background.
Card surface
Raised content sits on a surface colour.
Your product
This is how body text looks in dark mode against the background.
Card surface
Raised content sits on a surface colour.
Dark mode tokens
Contrast badges show each colour against the dark background — checked for you. Click a token to copy.
How to make a dark mode palette
The single most important thing to know: dark mode is not an inversion of your light theme. Flipping hex values — turning #ffffff into #000000 and inverting every colour — produces muddy, oversaturated, uncomfortable results. A good dark palette is a deliberate transform built on a few well-established principles, and that is exactly what this tool applies.
Use dark grey, not pure black
Pure black (#000) backgrounds with pure white text cause eye strain and a shimmering effect called halation, especially for people with astigmatism. A dark grey background — roughly 12–18% lightness, often faintly tinted with your brand hue — is far more comfortable and is what Material Design and most design systems recommend. This generator uses a hue-tinted dark grey, not black.
Show elevation with lighter surfaces
In light mode you lift a card off the page with a shadow. On dark, shadows barely show, so elevation is conveyed by making raised surfaces lighter than the background. That is why the palette includes a background, a surface, and a higher surface — each a step lighter — plus a subtle border.
Soften your accent colour
A vivid accent that pops against white is often harsh and glaring on dark. The fix is to desaturate it slightly and raise its lightness so it stays recognisably your brand colour while sitting comfortably on a dark surface. The generator does this automatically, and shows the resulting contrast so you can confirm it is readable.
Off-white text, not pure white
Pure white text on dark is too high-contrast and tiring to read in long passages. A slightly muted off-white for primary text and a dimmer grey for secondary text reads more comfortably while still passing accessibility thresholds.
Ready-to-paste prefers-color-scheme CSS
The export gives you more than hex values — it scaffolds the @media (prefers-color-scheme: dark) structure with your tokens as CSS custom properties, so your site can switch automatically based on the visitor's system setting. Drop it into your stylesheet and your light and dark themes are wired up. Every token's contrast against the dark background is shown above, so the "accessible" part is verified, not assumed.