Building a dark mode colour palette: surface steps, text greys and a calmer accent
A dark mode colour palette isn't the light palette inverted. It needs a near-black ground with a few slightly lighter surface steps, an off-white for text, a muted grey that still passes 4.5:1, and an accent that's lighter and less saturated than its light-theme twin, so it reads clearly without buzzing against the dark.
Start with the ground
Pure black (#000000) is a valid choice, especially on OLED screens where black pixels are switched off, but it makes surfaces hard to separate: there's nothing darker to put behind a card. Most dark interfaces use a very dark grey or a dark tinted neutral instead, somewhere around 5% to 10% lightness. A slight tint helps the palette feel deliberate: a warm near-black for an editorial or food brand, a cool blue-black for software.
In dark themes, elevation is shown by getting lighter rather than by casting shadows, because shadows barely show against a dark ground. Plan two or three surface steps above the ground: one for cards and panels, one for raised elements such as menus or dialogs, perhaps one for hover states.
| Token | Example | Job |
|---|---|---|
| Ground | #12110d | Page background |
| Surface | #1c1a15 | Cards, panels, form fields |
| Line | Text colour at about 16% opacity | Borders and dividers |
| Text | #f1ede2 | Body and headings, about 16:1 on the ground |
| Muted | #a7a194 | Captions, dates, hints, about 7.3:1 on the ground |
| Accent | #9db8e0 | Links and buttons; a lighter, softer blue than the light theme's |
Text: off-white and a muted grey that passes
White on black is 21:1, far above what's needed, and many readers find large areas of it glaring; thin strokes can appear to bloom. An off-white with a hint of the ground's tint, still well above 7:1, is easier on the eyes. The bigger risk is the muted colour. A grey that looked subtle in a design file can fall below WCAG's 4.5:1 minimum for normal text once it's on a real screen. Check muted text against both the ground and the surface, since the surface is lighter and lowers the ratio.
Adjusting the accent
Saturated colours that work on white often fail on dark. A strong blue such as #1d4ed8 is about 6.7:1 on white but only about 2.8:1 on a near-black ground. It also tends to vibrate, the edge seeming to shimmer, because a highly saturated colour on a dark ground produces strong simultaneous contrast. The fix is to lighten the accent and lower its saturation slightly: the same blue family at #7aa7ff is about 7.9:1 on that ground and looks calmer.
- Give every brand colour its own dark-theme value, checked separately.
- When a button is filled with a light accent, its label should be dark, not white.
- Status colours (error red, success green) need dark versions too. A dark red on charcoal is nearly invisible.
- Photos and illustrations may need a slight dimming or a border so they don't glow against the dark page.
Following the visitor's setting
The prefers-color-scheme media query tells a page whether the visitor's device is set to light or dark. A site can use it to switch between two palettes, and the color-scheme property tells the browser to draw its own scrollbars and form controls to match. Whether to follow the setting is a design decision: some brands are dark by nature, and switching them to light loses their character. Others should offer both. The wider trade-offs are on dark mode website design.
Dark palettes in Anticode
Each of Anticode's seven design systems defines a dark palette alongside its light one, with its own ground, surface, text, muted, line and action tokens. The example table above is Editorial's dark palette. Technical and Luxury are dark by default; the others are light by default. Each of the eight action colours also has a separate dark-theme value, lighter than its light-theme one, so switching to Dark doesn't leave a dim accent behind.
The theme setting has three options: Auto, which uses the design system's own default palette, Light and Dark. Auto does not switch with the visitor's device setting, so the palette you preview is the one every visitor sees. The page declares its color-scheme so browser controls match. You can tune individual colour tokens in the code editor in Pro mode.
Questions people ask
Should dark mode use pure black?
It can, but a very dark grey or tinted near-black makes it easier to show surfaces and elevation. Pure black suits minimal, photography-led designs.
What text colour works on a dark background?
An off-white rather than pure white, comfortably above 7:1, with a muted grey for secondary text that stays above 4.5:1 on every surface it sits on.
Why does my brand colour look wrong in dark mode?
Saturated colours lose contrast and can appear to vibrate on dark grounds. Use a lighter, slightly desaturated version of the same hue for the dark theme.