Terracotta Palette

CSS variables

:root {
  --color-1: #C96F4A;
  --color-2: #E09F7D;
  --color-3: #F2D5C4;
  --color-4: #8C4A32;
  --color-5: #5C3222;
}

Tailwind config

// tailwind.config.js
colors: {
  "terracotta-1": "#C96F4A",
  "terracotta-2": "#E09F7D",
  "terracotta-3": "#F2D5C4",
  "terracotta-4": "#8C4A32",
  "terracotta-5": "#5C3222",
}

About this palette

The Terracotta 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.

#C96F4ANear-black5.27:1AA

#E09F7DNear-black8.48:1AA

#F2D5C4Near-black13.58:1AA

#8C4A32White6.69:1AA

#5C3222White10.86: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	#C96F4A	#E09F7D	#F2D5C4	#8C4A32	#5C3222
#C96F4A	·	1.61Fails	2.58Fails	1.86Fails	3.03Large only
#E09F7D	1.61Fails	·	1.60Fails	3.00Large only	4.87AA
#F2D5C4	2.58Fails	1.60Fails	·	4.80AA	7.80AA
#8C4A32	1.86Fails	3.00Large only	4.80AA	·	1.62Fails
#5C3222	3.03Large only	4.87AA	7.80AA	1.62Fails	·

More palettes

Gradients in the same range

Blush Peach Aurora

Terracotta Palette

Related

Gradients in the same range