Dark Mode Color Palettes That Actually Work (Design Guide)

Why dark mode is harder than it looks

Many designers approach dark mode by simply inverting their light palette. The result? Washed-out colors, lost hierarchy, and eyestrain. A well-designed dark mode isn't just "light mode flipped" — it's a parallel system with its own rules.

This guide covers everything you need to know to build dark mode palettes that look polished and professional.

The core principle: raise surfaces, not just backgrounds

In Material Design (and validated by perceptual research), dark UI uses a system of surface elevations — different layers of a UI use progressively lighter background shades to create depth:

• Base background (darkest): oklch(0.10–0.14 ...)
• Cards / panels: oklch(0.14–0.20 ...)
• Modals / popovers: oklch(0.18–0.26 ...)
• Hover states: slightly lighter than the component's resting surface

This is NOT about pure blacks. True black (#000000) creates too much contrast with slightly-lighter elements, producing a "flat" look. Modern dark UIs use very dark but not fully-black backgrounds.

The warm vs. cold dark mode debate

Your surface hue affects the overall mood:

• Neutral dark (no hue tint): clean, technical, developer-friendly
• Warm dark (slight yellow/orange tint): cozy, approachable — good for creative apps
• Cool dark (slight blue tint): trustworthy, futuristic — good for SaaS/fintech

Even a tiny chroma of 0.01–0.03 in OKLCH on your surface makes a noticeable difference in personality.

Making primary colors work in dark mode

The fundamental problem: a blue that looks great on white doesn't have enough contrast on dark. Move primary colors lighter — often significantly:

• Light mode primary: L ≈ 0.45–0.60
• Dark mode primary: L ≈ 0.65–0.80

Don't reduce chroma — dark themes can actually support higher chroma because the dark background provides more contrast for vivid colors to pop against.

Text hierarchy on dark

Avoid pure white (#fff) as body text on dark backgrounds — it creates too much contrast and causes eye strain. Instead:

• Primary text: ~92% white (oklch 0.95 0 0)
• Secondary text: ~65% white (oklch 0.72 0 0)
• Placeholder / muted: ~45% white (oklch 0.55 0 0)
• Dividers / borders: ~20% white (oklch 0.30 0 0)

Semantic colors in dark mode

Status colors (error, warning, success, info) need lightness adjustment for dark backgrounds:

• Error red: shift to oklch L ≈ 0.65 (lighter, more salmon than blood red)
• Warning amber: shift to oklch L ≈ 0.75 (golden, visible without being harsh)
• Success green: shift to oklch L ≈ 0.68 (lime-leaning, readable)
• Info blue: shift to oklch L ≈ 0.70 (sky blue, not navy)

Common dark mode mistakes

1. Inverting light mode colors directly — produces the wrong surface hierarchy.
2. Pure black backgrounds — too harsh; use dark grays (L ≈ 0.10–0.14).
3. Keeping light-mode primary colors — they lose contrast; lighten them.
4. Ignoring shadows — shadows don't work well on dark; use glow effects or border-based elevation instead.
5. Not testing on OLED — pure blacks look jarring on OLED screens if adjacent elements are very light.

Testing your dark palette

Use LiveTheme's dark theme templates to preview your palette on real UI components. Switch the preview device to simulate OLED-like viewing. The color picker's built-in contrast checker confirms WCAG compliance as you edit.