Dark Mode Color Palette: Hex Codes, Backgrounds & UI Examples

A dark background alone does not make a good interface. Users still need readable body copy, visible borders, distinguishable cards, and accents that signal interactivity—each with enough luminance separation to pass WCAG. This guide defines a practical dark mode color scheme using named roles (background, surface, border, text, accent), lists common dark theme background color hex codes, and packages three complete palettes you can paste into CSS variables or design tokens today.

What Makes a Good Dark Mode Color Palette?

Strong dark mode palettes share three traits. First, layer separation: the page background, card surfaces, and modals each step slightly lighter or use a visible border so users perceive depth without skeuomorphic shadows. Second, restrained accents: one primary interactive hue (indigo, cyan, gold) plus semantic reds and greens—never five saturated accents at equal weight. Third, verified contrast: body text, placeholders, disabled states, and focus rings each tested on the surface they actually render on—not on abstract brand swatches alone.

Avoid the two most common failures: mid-gray (#6B7280) body copy on #121212 that looks “fine” but fails 4.5:1, and pure white paragraphs on pure black that cause halation for light-sensitive users. A thoughtful dark mode color palette uses off-white text (#F5F5F5–#E4E4E7), near-black backgrounds (#0A0A0A–#121212), and accents bright enough to spot but not neon unless your brand demands it. For accessibility-focused depth, see our accessible dark mode palette guide.

Dark Mode Background Colors — Hex Codes

Your canvas sets the mood for the entire dark mode hex system. Pure black (#000000) maximizes OLED power savings but can feel stark; most products choose a dark theme background color one or two steps lighter so cards and sidebars can elevate without jumping to gray. Google Material standardized #121212; many developer tools prefer #0A0A0A; media and finance apps sometimes tint toward navy (#0A0A2E) for brand warmth.

Dark Mode Text Colors — Hex Codes

Text tokens need at least two steps: primary for headings and body, secondary for captions and metadata. Pure white (#FFFFFF) on #121212 often passes with room to spare but can glare during long reading sessions; #F5F5F5 is a common default body color. Muted white (#E0E0E0) suits secondary labels when primary text uses #F5F5F5—verify the pair still clears WCAG AA on your exact background hex.

3 Complete Dark Mode Palettes with Hex Codes

Copy any row below into your design system as semantic tokens: --color-canvas, --color-surface, --color-border, --color-text, --color-accent. Extend with semantic success, warning, and error hues only after the base five roles are stable.

When implementing in CSS, map light and dark themes to the same token names so components never hard-code hex values. Test hover states by lightening surfaces ~4–8% and borders ~6–10%—not by opacity overlays alone, which can muddy contrast math. Export both themes from the palette generator when you need harmonized accent ramps.

WCAG Contrast in Dark Mode

WCAG Success Criterion 1.4.3 applies regardless of theme: normal text needs 4.5:1 against its background at Level AA; large text needs 3:1. Dark mode failures cluster on secondary text, placeholder inputs, disabled buttons, and purple links that looked acceptable in Figma’s default dark preview but fail on #121212 in production.

Test every pair in your dark mode color scheme: body on surface, body on canvas, accent label on accent fill, icon on surface, focus ring on surface. Run the same checks after brand updates—dark mode is not “set once” when marketing ships a new accent. Use our free WCAG contrast checker with exact hex values from the tables above before merging token changes.

Non-text contrast (WCAG 2.1 SC 1.4.11) matters too: input borders, chart slices, and focus indicators need 3:1 against adjacent colors. A dark border (#27272A) on a dark surface (#171717) often fails—bump border luminance or add a focus glow with tested contrast.

FAQ

What is a good dark mode background color hex?

Popular dark theme background colors include #121212 (Google Material), #0A0A0A (rich black), and #1A1A1A (off-black). Pure #000000 works but many products use near-black to reduce glare and separate surface layers.

What colors should a dark mode color palette include?

Define at minimum: canvas background, raised surface, border or divider, primary text, secondary text, link or accent, and semantic colors if needed. Test every text-on-surface pair with a WCAG contrast checker.

Does WCAG apply to dark mode?

Yes. WCAG contrast requirements apply on dark backgrounds the same as light ones—4.5:1 for normal text and 3:1 for large text at Level AA. Muted gray body copy on #121212 is a common failure.

Should dark mode use pure white text?

Not always. #F5F5F5 or #E4E4E7 body text on near-black backgrounds reduces halation while still passing contrast. Reserve #FFFFFF for headings and primary labels; verify each pairing.

Related: Accessible Dark Mode Color Palette · Accessibility Contrast Checker Guide · Navy Blue Color Palette