Colors for Dark Mode

Dark mode is not simply an inverted light theme. Colors behave differently on dark backgrounds, and a naive inversion often looks harsh. This guide covers the adjustments that make a dark palette comfortable.

Avoid pure black and pure white

Pure black backgrounds with pure white text create excessive contrast that can cause eye strain and halation. Use a very dark gray for surfaces and a soft off-white for text instead.

Desaturate bright colors

Highly saturated colors that look great on white can appear to glow on dark backgrounds. Reduce their saturation and adjust lightness so accents remain legible without vibrating.

Re-check contrast

Contrast requirements do not change in dark mode, but which pairs pass does. Always re-test text and UI colors against your dark surfaces rather than assuming a light-mode pair still works.

Try these tools

Tint and Shade Generator Generate tints and shades of a color as a scale, with WCAG text hints and export. Color Contrast Checker Check the contrast ratio between two colors with clear WCAG pass/fail results. Color Palette Generator Generate color schemes with lock, reorder, and export to CSS, JSON, SVG, and PNG.