Guide
How to create dark mode color palettes
Good dark mode is more than inverting colors. Here is how to build a dark palette that stays readable and comfortable.
Use dark grey, not pure black
A near-black like #0F172A reduces harsh contrast and lets you show elevation with slightly lighter surfaces.
Soften your text
Off-white (around #E5E7EB) is easier on the eyes than pure white while still passing contrast.
Lift your accents
Saturated colors read darker on black — nudge lightness up so accents stay vivid.
Keep contrast in check
Verify text against the background with the contrast checker, and grab a starting point from the dark mode collection.
Frequently asked questions
Should dark mode use pure black?
Usually not. A very dark grey reduces glare and lets lighter surfaces convey depth and elevation.
How do I convert a light palette to dark?
Flip background and text roles, darken surfaces, and lift accent lightness — then re-check contrast for the new pairings.