# Dark color palettes: moody codes that still read

[Canonical HTML page](https://gradiently.design/guide/dark-color-palettes)

Dark palettes look expensive when they are made of near blacks with a trace of colour, and cheap when they are pure black with neon. Here are six that get it right, with every code.

## The short version

- A good dark color palette is built on a near black with a slight tint of colour rather than pure #000000.
- Text on a dark palette reads best in a soft off white, which keeps strong contrast without the glare of pure white.
- Accent colours on dark grounds should be lighter and less saturated than they would be on white, because vivid colours vibrate against black.
- Dark interfaces show depth by making raised surfaces slightly lighter, not by adding shadows.
- Every text colour in a dark palette still needs to pass a contrast check against the surface it actually sits on.

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

- Ground #0b0f1a: #0b0f1a
- Surface #151b2c: #151b2c
- Deep navy #2b3a67: #2b3a67
- Periwinkle #8fa3d9: #8fa3d9
- Text #e8e6f0: #e8e6f0

Cool, calm and technical. Text on the ground is 15.5:1; the periwinkle accent is 7.7:1, enough for links and small labels.

### Forest night

- Ground #0c1410: #0c1410
- Surface #15231c: #15231c
- Deep pine #2f5d46: #2f5d46
- Sage #9cc5a1: #9cc5a1
- Text #ece7da: #ece7da

Natural and quiet, good for wellness, outdoor and food brands. Text 15.1:1, sage 9.7:1.

### Oxblood and copper

- Ground #140a0b: #140a0b
- Surface #241214: #241214
- Oxblood #6b1e26: #6b1e26
- Copper #c9855b: #c9855b
- Text #f1e6dc: #f1e6dc

Warm and rich, at home on wine lists, theatre and evening events. Text 15.9:1, copper 6.5:1.

### Aubergine

- Ground #120b17: #120b17
- Surface #1e1326: #1e1326
- Plum #4a2a63: #4a2a63
- Orchid #c79ad8: #c79ad8
- Text #f3ecf6: #f3ecf6

Creative and nocturnal, a softer alternative to neon purple. Text 16.7:1, orchid 8.3:1.

### Charcoal and ember

- Ground #121212: #121212
- Surface #1e1e1e: #1e1e1e
- Graphite #3a3a3a: #3a3a3a
- Ember #ff8a3d: #ff8a3d
- Text #ededed: #ededed

Neutral greys with one hot accent, the classic for apps and dashboards. Text 16:1, ember 8:1.

### Deep teal

- Ground #071a1c: #071a1c
- Surface #0f2a2d: #0f2a2d
- Deep teal #1f5c5f: #1f5c5f
- Aqua #66c2b8: #66c2b8
- Text #e6f2ef: #e6f2ef

Oceanic and composed, suited to finance and health. Text 15.6:1, aqua 8.5:1.

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](https://gradiently.design/guide/dark-gradient-backgrounds) and [moody gradients](https://gradiently.design/guide/moody-gradients).

- Midnight ink: `radial-gradient(circle at 75% 25%, #2b3a67 0%, #151b2c 40%, #0b0f1a 80%)`
- Forest night: `radial-gradient(circle at 25% 75%, #2f5d46 0%, #15231c 45%, #0c1410 85%)`
- Oxblood: `radial-gradient(circle at 70% 70%, #6b1e26 0%, #241214 45%, #140a0b 85%)`
- Aubergine: `radial-gradient(circle at 30% 20%, #4a2a63 0%, #1e1326 45%, #120b17 85%)`
- Charcoal and ember: `radial-gradient(circle at 80% 80%, #ff8a3d 0%, #3a3a3a 25%, #121212 70%)`
- Deep teal: `radial-gradient(circle at 50% 0%, #1f5c5f 0%, #0f2a2d 45%, #071a1c 85%)`

Dark gradients band more than any other kind. Add a little grain and avoid heavy JPEG compression when you export.

## Rules for dark palettes that read

### Avoid

- Pure #000000 as the ground
- Pure #ffffff for long passages of text
- Fully saturated accents, which seem to vibrate
- Drop shadows to show which card is on top
- Thin, light weight type at small sizes

### Do

- A near black tinted towards your brand hue
- An off white tinted the same way
- Lighter, softer versions of accent colours
- Lighter surfaces for raised elements
- Regular or medium weights, slightly looser spacing

**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](https://gradiently.design/guide/color-contrast-accessibility).

## 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](https://gradiently.design/guide/hsl-colors). Here a coral brand colour, `#e0525d`, becomes a full dark set.

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. **Surface: one step up** Raise lightness to about 12% and lower saturation a touch: `#261718`. Cards and panels sit here.
3. **Deep: a rich mid tone for areas** Lightness around 28% gives `#68272d`, a muted wine for shapes and illustration, never for text.
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. **Text: an off white with a trace of the hue** `#f2e9e9` gives 16:1 on the ground and quietly matches everything else.

- Ground #170c0d: #170c0d
- Surface #261718: #261718
- Deep wine #68272d: #68272d
- Soft coral #ea868e: #ea868e
- Text #f2e9e9: #f2e9e9

A dark palette derived from one coral. Every colour shares the hue, which is why the set feels like a single brand at night.

## 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](https://gradiently.design/guide/dark-mode-design) covers the wider decisions, such as images, borders and charts.

```css
: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); }
```

The accent changes between themes: deep navy on light, periwinkle on dark. One colour rarely works on both.

## 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.

A dark Instagram portrait post announcing a late gallery opening, with light type on a deep background

A dark, moody post where the type sits on the calmest part of the background and the glow stays clear of the words.

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](https://gradiently.design/guide/luxury-color-palettes) and the [dark academia aesthetic](https://gradiently.design/guide/dark-academia-aesthetic).

## FAQ

### What colours go in a dark color palette?

A tinted near black for the ground, a slightly lighter surface colour, one deep mid colour for large areas, a lighter accent and a soft off white for text.

### Should I use pure black for dark mode?

Usually not. A near black such as #121212 or a tinted dark like #0b0f1a reduces glare with white text and still gives very high contrast.

### What text colour works best on a dark background?

A soft off white like #e8e6f0 or #ededed. It keeps contrast around 15:1 or more without the harshness of pure white.

### Why do bright colours look wrong on a dark background?

Saturated colours appear to vibrate against black. Use lighter, slightly less saturated versions for accents on dark grounds.