Dark Mode Palette Generator
Generate a complete palette (backgrounds, surfaces, text, accent, states) for a coherent dark-mode interface, starting from a single accent color. All color calculations happen entirely in your browser.
How it works
A good dark interface is not just inverted black and white: backgrounds should stay slightly tinted and never pure black to avoid harsh contrast, and the accent color must be bright enough to remain readable on a dark background. This tool calculates these nuances automatically from the hue of your accent color, in HSL, to produce a coherent set of colors ready to paste into your stylesheet as CSS variables.
Why avoid a pure black background (#000000) in dark mode?
Pure black paired with pure white text creates extreme contrast that tires the eyes and causes a halo effect (visual vibration) on some OLED screens. Professional dark interfaces (macOS, Material Design) instead use very dark, slightly tinted grays, which this palette reproduces.
Should I also adapt the accent color to dark mode?
Yes: an accent color that works well on a light background can look dull or too dark on a black background. This tool slightly lightens the accent you provide so it keeps good contrast and remains clearly visible on the generated dark backgrounds.
No color or preference is sent to a server: all colorimetric calculations run locally, in your browser.