Warm Grey Palette

CSS variables

:root {
  --color-1: #4A4441;
  --color-2: #6E6660;
  --color-3: #9C948C;
  --color-4: #CFC8C1;
  --color-5: #F3EFEB;
}

Tailwind config

// tailwind.config.js
colors: {
  "warm-grey-1": "#4A4441",
  "warm-grey-2": "#6E6660",
  "warm-grey-3": "#9C948C",
  "warm-grey-4": "#CFC8C1",
  "warm-grey-5": "#F3EFEB",
}

About this palette

The Warm Grey palette is a curated set of 5 colors with their HEX, RGB and ready CSS-variable and Tailwind exports. Click any swatch for that color's full breakdown — conversions, contrast and harmonies.

Readable text on each color

White and near-black measured against every swatch. AA means the pairing clears 4.5:1 for body text; Large means it only clears 3:1, so reserve it for 24px and up.

#4A4441White9.57:1AA

#6E6660White5.63:1AA

#9C948CNear-black6.32:1AA

#CFC8C1Near-black11.41:1AA

#F3EFEBNear-black16.52:1AA

These colours on each other

6 of the 20 combinations inside this palette clear 4.5:1 for body text. Rows are the text colour, columns the background.

text \\ background	#4A4441	#6E6660	#9C948C	#CFC8C1	#F3EFEB
#4A4441	·	1.70Fails	3.20Large only	5.78AA	8.37AA
#6E6660	1.70Fails	·	1.88Fails	3.40Large only	4.92AA
#9C948C	3.20Large only	1.88Fails	·	1.80Fails	2.61Fails
#CFC8C1	5.78AA	3.40Large only	1.80Fails	·	1.45Fails
#F3EFEB	8.37AA	4.92AA	2.61Fails	1.45Fails	·

More palettes

Gradients in the same range

Sand Dune Slate Fade Arctic

Warm Grey Palette

Related

Gradients in the same range