Muted Color Palette

Muted colors are hues with their chroma turned down — dusty blue, sage, mauve, clay — so they look calm and sophisticated. Because they are close in saturation, the contrast has to come from lightness.

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: 8.48: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: #3D4451;
  --color-light-slate-gray: #6F8FAF;
  --color-dark-sea-green: #A3B9A5;
  --color-silver: #D7C4C1;
  --color-linen: #F2EEE9;
}

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	#3D4451	#6F8FAF	#A3B9A5	#D7C4C1	#F2EEE9
#3D4451		Aa2.90:1Fail	Aa4.68:1AA	Aa5.85:1AA	Aa8.48:1AAA
#6F8FAF	Aa2.90:1Fail		Aa1.61:1Fail	Aa2.01:1Fail	Aa2.92:1Fail
#A3B9A5	Aa4.68:1AA	Aa1.61:1Fail		Aa1.25:1Fail	Aa1.81:1Fail
#D7C4C1	Aa5.85:1AA	Aa2.01:1Fail	Aa1.25:1Fail		Aa1.44:1Fail
#F2EEE9	Aa8.48:1AAA	Aa2.92:1Fail	Aa1.81:1Fail	Aa1.44: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 muted palettes

Dusty

8.48:1 text contrast · Edit in generator

Mauve & sage

11.31:1 text contrast · Edit in generator

Gallery

10.19:1 text contrast · Edit in generator

Tips for muted palettes

Spread lightness widely: muted colors at the same lightness blur together.
Use a slightly stronger color for buttons so actions are findable.
Muted palettes pair naturally with warm off-white and charcoal.

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 is a muted color?

A color with reduced saturation (chroma), as if mixed with grey or its complement. Dusty rose, sage and slate blue are muted versions of pink, green and blue.

How do I make a color muted?

Lower its chroma in OKLCH or its saturation in HSL, or mix in a little of its complementary color. Keep lightness the same to keep the shade recognisable.