How to Create a Dark Mode Color Palette (2026)

Dark Mode Design Principles

Dark mode isn’t just inverting your light theme — that produces harsh contrasts, muddy colors, and accessibility failures. A well-designed dark mode uses a layered surface system where elevation is communicated through lighter shades of dark gray rather than shadows. The base background should be a very dark gray (#121212 to #1A1A2E), not pure black (#000000). Pure black next to white text creates excessive contrast causing halation, where bright text appears to bleed into the dark background. This site uses #0B0D17 — a dark blue-gray that feels richer than pure neutral gray.

Choosing Background and Surface Colors

Use 3–4 surface levels above your base: surface-1 at 4% white overlay, surface-2 at 8%, surface-3 at 12%, surface-4 at 16%. These subtle lightness differences replace shadows as depth indicators. Cards float at surface-1, modals at surface-2, tooltips at surface-3. Borders should be very subtle (6–10% white opacity). For backgrounds with personality, add a slight color tint to your dark gray — a hint of blue, warm gray, or deep purple creates a more refined feel. Use the Color Palette Generator to build your surface scale from your chosen base color.

Text and Accent Color Adjustments

Don’t use pure white (#FFFFFF) for body text on dark backgrounds — it’s too harsh. Use 87% white opacity (roughly #DEDEDE) for primary text, 60% for secondary, and 38% for disabled text. Your accent colors from light mode likely need adjustment: increase lightness and decrease saturation slightly so they remain vibrant without being neon. A button that’s #2196F3 in light mode might become #64B5F6 in dark mode. Test that accents maintain at least 4.5:1 contrast against your dark surfaces. Status colors (success, error, warning) also need lighter variants.

Testing Dark Mode Accessibility

Test your dark mode under real conditions: in a dark room, in a bright room, on OLED screens (where pure black is truly black), and on LCD screens (where ‘black’ is dark gray). Test all text/background combinations with the Contrast Checker for WCAG AA compliance. Check that interactive elements remain clearly distinguishable. Test with actual long-form content, not just component mockups. Consider offering an ‘auto’ mode that follows the user’s OS preference via the prefers-color-scheme media query.