Dark Mode Color Palette Generator
Build a dark theme from explicit roles: a canvas, a raised surface, readable text and an accent. Start with the CSS palette below, then check the pairs you actually use.
This guide explains the workflow. Use the main tool linked below to generate colors and export files.
Start with roles, not an inverted screenshot
A dark theme needs its own hierarchy. Use separate colors for the page and raised surfaces, then test text and controls on both. Preserve the meaning of status colors and offer a clear way to choose the theme.
A dark palette you can use in CSS
Project overview
A raised surface gives this content its own level. Text, secondary text and the action use separate color tokens.
Check the action colors:root[data-theme="dark"] {
--canvas: #111827;
--surface: #1F2937;
--text: #F9FAFB;
--text-secondary: #9CA3AF;
--accent: #93C5FD;
--on-accent: #111827;
}
body { background: var(--canvas); color: var(--text); }
.panel { background: var(--surface); }
.panel p { color: var(--text-secondary); }
.action { background: var(--accent); color: var(--on-accent); }This is a starting palette, not a certification of an entire interface. The example fixes both foreground and background colors so the checks are reproducible.
Test these exact foreground/background pairs
For WCAG AA, normal-size text generally needs 4.5:1 and large text 3:1. Meaningful graphics and the visual information needed to identify controls generally need 3:1 against adjacent colors. Decorative separators are not automatically subject to the same requirement.
Adapt the palette to your interface
- Generate shades from #93C5FD and compare possible hover and focus states.
- Use lighter surfaces to separate sections where useful. Dark mode does not require pure black or prohibit pure white.
- Check text, links and meaningful control boundaries on their actual backgrounds. Recheck changed colors and transparency.
- Preview the real page at different sizes and with user theme preferences. Include labels and other cues for status colors.
Can I just invert a light palette?
Inversion can change the meaning of status colors and produce weak accents. Choose colors by role, preserve the intended meaning and measure the actual pairs.
Is pure white text forbidden in dark mode?
No. WCAG does not ban white text or black backgrounds. Choose a combination suited to the content and let people use their preferred theme. Contrast alone does not describe reading comfort.
Does a high contrast ratio make the whole theme accessible?
No. Contrast checks cover color pairs, not keyboard navigation, labels, focus visibility or the rest of the interface. Check the final product as well as its tokens.