Dark mode converter
Turn a light palette into a dark one, not into a negative. The rules are printed on the page, the output can be recomputed by hand, and every pair ships with its contrast.
Pick a light palette
Only palettes with a bright enough background are listed. Click one to convert it.
Or enter three colors
The rules
Three rules, all written below. Change any number and the output changes, so this derivation is reproducible rather than a black box.
Structural roles get fixed lightness
Background drops to L9, cards to L14, body text rises to L93, secondary text to L70, borders to L26. Dark mode is not inverted lightness; it is elements reassigned to a few fixed layers.
Saturation damping
Structural roles have their saturation multiplied by 0.30 to 0.40 and capped (background at 16, text at 12). High saturation on a dark surface glares, and that is the most common dark mode failure.
Brand and state colors only brighten
Primary, state and accent colors keep their hue and move to L55 through L78. Carried over unchanged they smear into the dark surface; darkened they lose the brand.
Worked examples from the library
Three light palettes from the library, run through the rules above. Every ratio is measured. These are outputs of the rules, not entries in the library.
Aa
Aa
- Text on background
15.18:1AAA - Primary on background
5.93:1AAA · large text - Text on card
13.27:1AAA
Aa
Aa
- Text on background
15.14:1AAA - Primary on background
4.60:1AAA · large text - Text on card
13.15:1AAA
Aa
Aa
- Text on background
15.45:1AAA - Primary on background
6.82:1AAA · large text - Text on card
13.26:1AAA
Why not just invert
Subtracting each channel from 255 gives you a photographic negative, not a dark theme: a warm gray background turns a strange cold blue, and brand colors land in a completely different hue range.
A real dark theme keeps hue, reorders the lightness hierarchy and pulls saturation down. The eye is more sensitive to color in a dark environment, so the same saturation reads louder on a dark surface.
Which three numbers to check
Text on background: below 4.5:1, do not ship. The most common dark mode complaint is unreadable text.
Primary on background: button borders, links and icons depend on it. 3:1 is the floor for non-text UI.
Text on card: cards sit one layer above the background. This step gets skipped, yet list screens are read almost entirely inside cards.
Test in the contrast checker →Text color picker →Color tools →