Dark color palettes

Where dark palettes work

• Code editors, terminals, and developer dashboards
• Media players, photo editors, and creative tools where the content should stand out
• Monitoring screens used in dim rooms or overnight
• Dark landing pages for games, audio, and film

Reading a dark ramp as elevation

Many palettes in this collection are ramps within one hue, such as #0a2647, #144272, #205295, #2c74b3. In a dark interface, lighter means closer: use the darkest step for the page, the next for cards, the third for raised menus or hover, and the lightest for active controls.

The steps are close in contrast. #144272 on #0a2647 is 1.49:1, which is enough to tell surfaces apart but not enough to show a control's edge. #2c74b3 reaches 3.08:1 on the base, so it can serve as a focus ring or input border, and it holds white text at 4.93:1.

Worked example: navy with an ice-blue accent

#0b2447, #19376d, #576cbc, #a5d7e8 has a clear light color, which makes it easy to complete.

• Body text: #a5d7e8 on #0b2447 is 9.93:1, softer than white (15.47:1) and still well above 4.5:1.
• Primary button: #576cbc with white text at 4.91:1.
• Borders and focus: #576cbc on #0b2447 is 3.15:1, enough for control outlines but not for text.
• Muted text: a grey such as #6b7280 drops to 3.20:1 on this navy. A blue-grey such as #8a9bb8 reaches 5.50:1.

:root {
  --bg: #0b2447;
  --surface: #19376d;
  --accent: #576cbc;
  --text: #a5d7e8;
  --text-muted: #8a9bb8; /* added */
}

The mid-tone trap

About a third of the swatches in this collection sit in the 40–80% lightness range, and those mid-tones are where dark themes fail. In #2c3333, #2e4f4f, #0e8388, #cbe4de, the teal #0e8388 looks clearly visible on #2c3333 but measures 2.84:1, below the 3:1 needed even for an icon or border. Use #cbe4de for text (9.64:1) and keep the teal for larger fills.

Pairing the colors

Use the darkest swatch for the page and step up one level per layer: cards, then menus, then active controls. Add one hue from outside the ramp for emphasis, such as ice blue on navy or mint on indigo, and keep it to links, focus, and key data.

Contrast and readability

About two thirds of the swatches here pass 4.5:1 with white text, so labels on fills are rarely the problem; outlines and muted text are. In #37306b, #66347f, #9e4784, #d27685, the berry #9e4784 holds white text at 5.69:1 but is only 2.05:1 against the base, too low to mark a control's edge. The rose #d27685 reaches 3.71:1.

Questions

What is a good dark background color other than black?

A near-black with a hue gives surfaces room to step up in lightness. Examples from this collection include navy #0b2447, ink violet #18122b, near-black indigo #03001c, and green-grey #2c3333.

Should text be pure white in a dark theme?

It does not have to be. A tinted off-white such as #a5d7e8 or #cbe4de still clears 4.5:1 by a wide margin on the dark surfaces above, and leaves pure white available for the most important headings.