Night color palettes

Where night palettes work

• Dark themes for reading apps, dashboards and developer tools
• Music, podcast and video players where the artwork supplies the color
• Evening venues and late-night services such as cinemas, bars and transit

Night palettes are blue-gray, not black

Across the 218 night palettes on this page, about half of all swatches sit in the blue and teal range, and roughly 28% are very dark (under 25% lightness). Pure black is rare. The usual shape is a ramp: a near-black navy or plum, one or two dusky mid-blues, and a pale moonlight tint such as #A5D7E8 or #DDE6ED.

Saturation is held back. Only about 18% of night swatches are strongly saturated midtones, compared with 39% in the space collection. That restraint is what makes these palettes usable for long sessions: the eye gets depth from value steps, not from glowing color.

Worked example: #0B2447, #19376D, #576CBC, #A5D7E8

This palette maps almost directly onto a dark theme. Navy #0B2447 is the page, #19376D is the raised card, French blue #576CBC is the interactive color, and baby blue #A5D7E8 is the text.

#A5D7E8 reads at 9.93:1 on the page and 7.46:1 on the card, so it works for body copy on both layers. #576CBC is only 3.15:1 against the page: enough for focus rings, icons and input borders (the 3:1 non-text threshold), but not for paragraph text. As a button fill it carries a white label at 4.91:1.

:root {
  --bg: #0b2447;      /* page */
  --surface: #19376d; /* cards, menus */
  --accent: #576cbc;  /* buttons, focus rings */
  --text: #a5d7e8;    /* 9.93:1 on --bg */
}

When every swatch is dark

Some night palettes have no light color at all, for example #635985, #443C68, #393053, #18122B. They make good background layers and illustration fills, but the lightest swatch, #635985, is only 2.84:1 against #18122B, which is below 3:1 even for borders. Bring in a separate off-white for text and keep the palette for surfaces.

Pairing the colors

Step the surfaces in lightness (page, card, menu) using the palette's darker swatches in order, and keep the palest swatch for text. If you want a warm accent, take a single copper or amber such as #B8621B and give it one job, for example notification badges.

Contrast and readability

Mid blue-grays are the usual failure. #526D82 on #27374D is 2.22:1, below even the 3:1 needed for borders and icons, while #9DB2BF on the same surface reaches 5.49:1 and works as secondary text. Check muted text, placeholders and focus rings on every surface layer, not only the page.

Questions

What colors are in a night color palette?

Mostly desaturated navy, slate, indigo and plum, plus one pale tint for moonlight or text. Typical examples from this page: #0B2447 navy, #27374D blue-gray, #393053 dusky violet and #DDE6ED pale gray-blue. Warm accents like copper #B8621B appear, but sparingly.

Is a night palette the same as a dark mode palette?

Not quite. A night palette sets the mood; a dark mode palette also needs defined roles for text, muted text, borders, focus and status colors, each checked for contrast. Use a night palette as the surface and accent layer, then add the missing roles, usually a light text color and a status red and green, yourself.