博客 · 2026-08-07
Best Color Palette Practices for Dark Themes
Build readable dark mode palettes: surface elevation, accent contrast, and WCAG-safe text colors that still feel on-brand.
Dark themes fail when teams simply invert light colors. True dark UI needs layered surfaces, desaturated neutrals, and accents re-tuned for luminance—not pure #000 backgrounds with neon text.
Start with a neutral stack: several greys or tinted greys (blue-grey, olive-grey) for background, elevated cards, and borders. Elevation is communicated with lightness steps and subtle borders more than heavy shadows.
Keep brand hue, but raise lightness and often reduce saturation for large fills. Accents used for buttons may need higher chroma so they still pop on charcoal surfaces while text on those buttons stays AA-compliant.
Use ColorPicker’s dark pairing helpers and contrast checker together. Verify primary text, secondary text, links, and destructive actions on each surface token. Secondary text often fails first.
Avoid pure white (#FFFFFF) for long body text on pure black; slightly soft off-whites reduce eye strain. Reserve maximum contrast for critical short labels if needed.
Charts and status colors need revalidation in dark mode. A green that passed on white can disappear on dark grey. Build semantic tokens (success, warning, info) with dark-specific values instead of reusing light-theme HEX blindly.
Test in a dim room and on OLED hardware when possible. Banding and black crush differ from your bright office monitor. Ship theme packs with light and dark token sets side by side for engineers.
The best dark palette is quieter than the marketing site hero: restrained neutrals, disciplined accents, and measured contrast. Generate candidates quickly, then prove them with WCAG checks before release.