Dark Mode Palettes
Great dark mode isn't just black — it's layered surfaces, softened text, and carefully tuned accents. These palettes are built for real dark UIs.
Effective dark mode design avoids pure black. Instead it uses a very dark base with slightly lighter surfaces stacked on top, softened off-white text rather than pure white, and accents that stay vivid without glaring.
Each palette below is ordered by role: background, surface, primary text, muted text, and accent — tuned so the combinations stay readable and easy on the eyes. Copy any HEX value or the full palette.
Slate Dark
Default dark-mode app interface
True Dark
OLED-friendly, near-black interfaces
Warm Charcoal
Cozy, content-focused dark themes
Midnight Indigo
Premium, branded dark experiences
Best use cases
- Dark-mode themes for apps, dashboards, and developer tools.
- OLED-targeted interfaces where near-black saves battery.
- Reading and content apps that want a low-glare night experience.
Design tips
- Avoid pure black backgrounds — a very dark gray reduces harsh contrast and eye strain.
- Use off-white (not #ffffff) for body text to soften glare on dark surfaces.
- Desaturate accents slightly so they stay vivid without vibrating against the dark base.
Frequently asked questions
Should dark mode use pure black?
Usually not. A very dark gray like #0f172a or #1a1a1a is easier on the eyes and lets you layer lighter surfaces on top. Pure black is best reserved for OLED battery savings.
How do I keep dark mode accessible?
Use softened off-white text instead of pure white, keep at least 4.5:1 contrast for body text, and verify accent colors against the dark background in the Contrast Checker.