Coffee Palette

CSS variables

:root {
  --color-1: #4B3621;
  --color-2: #6F4E37;
  --color-3: #967259;
  --color-4: #C8A27C;
  --color-5: #ECDFCB;
}

Tailwind config

// tailwind.config.js
colors: {
  "coffee-1": "#4B3621",
  "coffee-2": "#6F4E37",
  "coffee-3": "#967259",
  "coffee-4": "#C8A27C",
  "coffee-5": "#ECDFCB",
}

About this palette

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

#4B3621White11.36:1AA

#6F4E37White7.44:1AA

#967259Near-black4.36:1Large only

#C8A27CNear-black8.02:1AA

#ECDFCBNear-black14.38: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	#4B3621	#6F4E37	#967259	#C8A27C	#ECDFCB
#4B3621	·	1.53Fails	2.62Fails	4.82AA	8.65AA
#6F4E37	1.53Fails	·	1.72Fails	3.16Large only	5.67AA
#967259	2.62Fails	1.72Fails	·	1.84Fails	3.30Large only
#C8A27C	4.82AA	3.16Large only	1.84Fails	·	1.79Fails
#ECDFCB	8.65AA	5.67AA	3.30Large only	1.79Fails	·

More palettes

Gradients in the same range

Sand Dune Blush Aurora

Coffee Palette

Related

Gradients in the same range