Dark color palettes: moody codes that still read

A dark color palette that still reads has three parts: a near black ground with a hint of colour in it, a soft off white for text, and one or two accents that are lighter and calmer than you would use on white. Pure black with saturated neon looks harsh and tires the eyes. Tinted darks with gentle highlights look deliberate and expensive. The six palettes below follow that recipe, with hex codes you can copy and contrast ratios already checked.

Six dark color palettes with hex codes

Each palette has the same five roles, from left to right: ground (the page), surface (cards and panels, a step lighter), deep (a rich mid colour for shapes and large areas), accent (for links, buttons and highlights) and text.

Midnight ink

Forest night

Oxblood and copper

Aubergine

Charcoal and ember

Deep teal

The deep colours in each palette are for areas, not words: navy on the midnight ground, for example, is only about 1.7:1. Use them for shapes, illustrations and backgrounds behind text in the lighter colours.

The same palettes as dark gradients

Dark palettes come alive when the deep colour glows out of the ground like light in a dim room. These use only the codes above, so they match the flat palettes exactly. More techniques are in dark gradient backgrounds and moody gradients.

Rules for dark palettes that read

Why not pure black? Black with pure white text is the maximum contrast a screen can show, 21:1, and on bright displays it can feel glaring, especially across long passages. A tinted near black at around 15:1 is still far above every accessibility threshold and much easier to read for long. It also gives the palette a temperature, which pure black never has.

Why calmer accents? A saturated blue or red that looks fine on white seems to glow and wobble at its edges on black. Lift its lightness and lower its saturation slightly, as with the periwinkle and sage above, and it sits still. Check every accent you use for text with a contrast checker.

How to make a dark palette from your brand colour

You do not need to borrow one of the palettes above. Any brand colour can be turned into a dark palette by keeping its hue and changing only lightness and saturation. This works best in a format that separates the two, such as HSL. Here a coral brand colour, #e0525d, becomes a full dark set.

1. 1

   Ground: same hue, almost no light

   Keep the hue, drop saturation to about 30% and lightness to about 7%: #170c0d. It reads as black but feels warm.

2. 2

   Surface: one step up

   Raise lightness to about 12% and lower saturation a touch: #261718. Cards and panels sit here.

3. 3

   Deep: a rich mid tone for areas

   Lightness around 28% gives #68272d, a muted wine for shapes and illustration, never for text.

4. 4

   Accent: lighter and softer than the brand

   Lift the coral to about 72% lightness: #ea868e reaches 7.6:1 on the ground, while the original coral manages 5.1:1 and looks harsher.

5. 5

   Text: an off white with a trace of the hue

   #f2e9e9 gives 16:1 on the ground and quietly matches everything else.

Using a dark palette in CSS

Name colours by role so the same components work in light and dark themes. The pattern below defines Midnight ink as the dark theme and lets the system setting choose. Dark mode design covers the wider decisions, such as images, borders and charts.

:root {
  color-scheme: light dark;
  --ground:  #f7f7fb;
  --surface: #ffffff;
  --text:    #151b2c;
  --accent:  #2b3a67;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:  #0b0f1a;
    --surface: #151b2c;
    --text:    #e8e6f0;
    --accent:  #8fa3d9;
  }
}

body { background: var(--ground); color: var(--text); }
.card { background: var(--surface); }
a { color: var(--accent); }

Dark palettes for social posts

On a feed, a dark post stands out among bright photos, but only if the words read at phone size. Keep type large, keep the brightest part of the background away from the headline, and give the words the calmest area of the frame.

This is where a Gradiently Mark helps: it moves its calmest, best contrasting region behind the text and auto ink picks light or dark type for every line from the Mark's own palette, so a moody background never swallows the headline. For dark looks with a richer, premium character, see luxury colour palettes and the dark academia aesthetic.