Dark Color Palette

A good dark palette is not black plus grey. It uses two or three tinted near-blacks for background and surfaces, a soft off-white for text (pure white glares), and accents lightened enough to pass contrast on the dark background.

Colors

Describe your project and let AI pick the colors

Try:

See it on a page

Lightest color becomes the background, darkest the text, the most saturated one the button.

NorthwindPricing · Docs · Blog

Ship the release notes your users actually read.

Body text in your darkest color on your lightest: 15.41:1 AA pass

Start freeSee a demo

Surface card with a secondary accent

Export

CSS custom properties, Tailwind v4 @theme (in OKLCH), Tailwind v3 config, JSON or SCSS.

:root {
  --color-midnight-blue: #0F1117;
  --color-midnight-blue-2: #1A1D27;
  --color-dark-slate-gray: #2A2F3D;
  --color-lavender: #E6E8EF;
  --color-cornflower-blue: #7AA2F7;
}

Contrast between every pair

WCAG 2.2: 4.5:1 for body text (AA), 3:1 for large text and UI parts, 7:1 for AAA.

Contrast ratio of every text color (rows) on every background (columns)
Text / background	#0F1117	#1A1D27	#2A2F3D	#E6E8EF	#7AA2F7
#0F1117		Aa1.12:1Fail	Aa1.41:1Fail	Aa15.41:1AAA	Aa7.49:1AAA
#1A1D27	Aa1.12:1Fail		Aa1.25:1Fail	Aa13.73:1AAA	Aa6.67:1AA
#2A2F3D	Aa1.41:1Fail	Aa1.25:1Fail		Aa10.90:1AAA	Aa5.30:1AA
#E6E8EF	Aa15.41:1AAA	Aa13.73:1AAA	Aa10.90:1AAA		Aa2.05:1Fail
#7AA2F7	Aa7.49:1AAA	Aa6.67:1AA	Aa5.30:1AA	Aa2.05:1Fail

Get an AI critique of this palette

The contrast numbers are calculated exactly in your browser and passed to the AI, so its advice starts from real ratios.

What is it for? (optional)

Hand-picked dark palettes

Midnight UI

15.41:1 text contrast · Edit in generator

Deep forest

14.87:1 text contrast · Edit in generator

Velvet

15.93:1 text contrast · Edit in generator

Tips for dark palettes

Use a near-black like #121212 or a tinted one rather than #000000; Material Design recommends #121212 as the dark theme surface.
Raise surface lightness slightly for cards and menus instead of using shadows.
Desaturate and lighten accent colors for dark mode; saturated mid-tones vibrate on black.

Want one written for your project? Describe it on the AI palette generator, then check it with the accessible palette checker.

Frequently asked questions

What colors are best for dark mode?

A tinted near-black background (around #121212 or with a slight blue or brand tint), slightly lighter surfaces for cards, off-white text around #E6E6E6, and accent colors lightened until they reach at least 4.5:1 on the background.

Should dark mode use pure black?

Usually not. Pure black with pure white text creates harsh contrast and halation for many readers. Very dark grey is the common choice; pure black is mainly used to save power on OLED screens.

How do I check dark mode contrast?

Use the contrast grid on this page or the WCAG contrast checker: body text needs 4.5:1 against the background, large text and UI parts 3:1.