How to build a dark mode color palette
Dark mode is not light mode inverted. It has its own rules, and most of them are about restraint. Each one below is shown on the surface it applies to.
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 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
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.
4. Use color for elevation, not shadows
Shadows disappear on dark backgrounds. Communicate layers with lightness steps (rule 1) and thin 1px borders at 10–15% white. Here is a dark palette poured into a page — the cards separate from the background by lightness alone:
Layers without shadows
Four colors, one page: background, text, a primary action and an accent — the roles a real interface needs.
Primary action Secondary5. 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 — the fastest way to see whether a scheme survives dark mode. The same palette, both ways:
Light mode
Four colors, one page: background, text, a primary action and an accent — the roles a real interface needs.
Primary action Secondary#EEEEEE · text #222831 · primary #00ADB5 · accent #575D65 — open Midnight CoralDark mode, one click later
Four colors, one page: background, text, a primary action and an accent — the roles a real interface needs.
Primary action SecondaryReady-made starting points
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.