How to build a dark mode color palette
Updated 2026-09-12 · by the ColorSwoop team
Dark mode is not light mode inverted. It has its own rules, and most of them are about restraint.
1. Start from near-black, not black
Pure black creates harsh halos around text and leaves no room for elevation. Use a tinted near-black (#0F0F12, #121826, #1A1B26) and build surfaces upward: each raised layer is 3-6% lighter. Our dark palettes are filtered so every one includes at least one color below 35% lightness.
2. Text is off-white, not white
#FFFFFF on #111 is 19:1, which is more contrast than the eye wants for long reading. Off-white (#E5E7EB, #F2F2F5) at 14-16:1 is easier on the eyes and still passes AAA. Secondary text can drop to a mid gray around 7:1.
3. Desaturate accents
A brand blue that looks confident on white can glow on black. Lower saturation by 10-20% and lift lightness a little; the generator lets you lock the hue and nudge lightness with the + and - buttons.
4. Use color for elevation, not shadows
Shadows disappear on dark backgrounds. Communicate layers with lightness steps and thin 1px borders at 10-15% white.
5. Test the palette in both modes
Every palette page on ColorSwoop has an Invert button in the UI preview that swaps background and text roles, which is the fastest way to see whether a scheme survives dark mode.
Ready-made starting points
- Midnight Coral: charcoal, slate, teal accent, off-white text
- Tokyo Night: the classic editor theme structure
- Tech palettes and cyberpunk palettes for neon-on-dark
FAQ
Should dark mode use pure black?
Usually not. Pure #000000 makes text vibrate and hides elevation. Most design systems use a very dark gray or a tinted near-black such as #0F0F12 or #121826 and lighten surfaces by a few percent per level.
Why do brand colors look neon in dark mode?
Saturated colors on dark backgrounds appear brighter than on white. Reduce saturation 10-20% and raise lightness slightly for the dark-mode version of your primary color.
What contrast ratio does dark mode need?
The same as light mode: 4.5:1 for body text and 3:1 for large text and UI components. Light gray text on near-black (e.g. #E5E7EB on #111827) passes comfortably.