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.

All thirteen palette collections · Pull a palette out of an image · Check a pair for contrast

  • Figma plus Siter.io

    Start with the design you already have.

    Install the Figma plugin, send a frame across, and finish it on the canvas. The free plan builds and previews as much as you like; publishing to your own domain starts at $7/mo billed yearly.

    Get the plugin ->

  • Start for free with Siter.io

    Start for free ->
Hey there 👋  Friends from designmodo are here to help!
More Products