Dark color palettes
Six dark schemes, five colors each, ordered darkest to lightest. Every hex copies in a click.
A dark palette is not a light palette inverted, and that is the mistake this page exists to prevent. Inverting produces pure black grounds and pure white text, which on an OLED screen is genuinely uncomfortable and on any screen produces a halo around the type. What you actually need is a ramp of very dark surfaces: four or five steps between roughly #0E1014 and #3A4049: so that elevation can be expressed by lightness the way it is in a light theme.
-
Slate ramp
-
Warm dark
-
Midnight
-
Carbon
-
Forest dark
-
Plum dark
Two rules carry most of the weight. First, tint the grays: a dark surface with a slight blue or warm bias looks intentional where a pure neutral looks like a switched-off screen, and it costs nothing. Second, desaturate your accents. A brand color that sings on white will usually glow unpleasantly on a dark ground: it needs pulling down maybe fifteen or twenty percent in saturation and up in lightness to read as the same color. Body text should be a light gray rather than white, somewhere around #E9EBF0, which is where these rows end for that reason.
Other palettes.
Same format, different mood. Every hex on every one of them copies in a click.
- Fall color palettes Rust, ochre and oxblood, each row anchored by one genuinely dark brown.
- Winter color palettes Two families that behave nothing alike: quiet blue-grays, and forward jewel tones.
- Spring color palettes Fresh greens and blossom pinks, kept from going saccharine by one dark leaf green.
- Summer color palettes Sea blues, sun yellows and coral, with a deep blue doing the structural work.
- Pastel color palettes Soft schemes that each break the pastel rule once, because five pastels have no hierarchy.
- Neutral color palettes Warm and cool neutrals. Not gray: every color carries the same faint hue bias.
All thirteen palette collections · Pull a palette out of an image · Check a pair for contrast
Start with the design
you already have.
Install the Figma plugin, send a frame across, and finish it on the canvas.