Neutral Color Palette Generator

Neutrals are low-chroma colors: greys, taupes, beiges, off-whites and near-blacks. The best neutrals are not pure grey; a tiny tint toward a hue (chroma 0.005–0.03 in OKLCH) makes them feel intentional and ties them to your accent.

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: 14.19: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-dark-slate-gray: #2B241E;
  --color-dark-slate-gray-2: #365277;
  --color-sky-blue: #8EC4E1;
  --color-gray: #927C71;
  --color-sea-shell: #FFF5EA;
}

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#2B241E#365277#8EC4E1#927C71#FFF5EA
#2B241EAa1.91:1FailAa8.10:1AAAAa3.88:1LargeAa14.19:1AAA
#365277Aa1.91:1FailAa4.23:1LargeAa2.03:1FailAa7.41:1AAA
#8EC4E1Aa8.10:1AAAAa4.23:1LargeAa2.08:1FailAa1.75:1Fail
#927C71Aa3.88:1LargeAa2.03:1FailAa2.08:1FailAa3.64:1Large
#FFF5EAAa14.19:1AAAAa7.41:1AAAAa1.75:1FailAa3.64:1Large

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.

Hand-picked neutral palettes

Stone

Linen & oak

Slate

Mushroom

Tips for neutral palettes

  • Pick the tint direction from your brand color.
  • Use 4–6 neutral steps for text, borders, surfaces and backgrounds.
  • Add one saturated accent — neutral-only palettes can feel lifeless.

Want a palette written for your project? Describe it on the palette generator and the AI will suggest one.

Frequently asked questions

What are neutral colors?

Colors with very low saturation: black, white, grey, beige, taupe, ivory and brown in muted forms.

Should neutrals be warm or cool?

Match your accent: warm neutrals for reds, oranges and yellows, cool neutrals for blues and greens.