Mocha Madness to Afternoon Coffee color palette

8E675DMocha Madness C7A098Cashmere Clay EAD8D3Fiesta 34251FWood Bark 6D514AAfternoon Coffee

About this palette

Mocha Madness to Afternoon Coffee is a 5-color muted, warm palette: #8E675D (Mocha Madness), #C7A098 (Cashmere Clay), #EAD8D3 (Fiesta), #34251F (Wood Bark), #6D514A (Afternoon Coffee). It mixes red, gray tones and feels warm overall. The strongest text pairing is #EAD8D3 on #34251F with a contrast ratio of 10.67:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mocha Madness	rgb(142, 103, 93)	hsl(12, 21%, 46%)
Cashmere Clay	rgb(199, 160, 152)	hsl(10, 30%, 69%)
Fiesta	rgb(234, 216, 211)	hsl(13, 35%, 87%)
Wood Bark	rgb(52, 37, 31)	hsl(17, 25%, 16%)
Afternoon Coffee	rgb(109, 81, 74)	hsl(12, 19%, 36%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa10.67:1 Very good#EAD8D3 on #34251F
Aa10.67:1 Very good#34251F on #EAD8D3
Aa6.23:1 Good#C7A098 on #34251F
Aa6.23:1 Good#34251F on #C7A098
Aa5.22:1 Good#EAD8D3 on #6D514A
Aa5.22:1 Good#6D514A on #EAD8D3
Aa3.59:1 Poor#8E675D on #EAD8D3
Aa3.59:1 Poor#EAD8D3 on #8E675D

Color blindness preview

CSS variables

/* Mocha Madness to Afternoon Coffee — https://swatchly.xyz/palette/8e675d-c7a098-ead8d3-34251f-6d514a */
:root {
  --mocha-madness: #8e675d;
  --cashmere-clay: #c7a098;
  --fiesta: #ead8d3;
  --wood-bark: #34251f;
  --afternoon-coffee: #6d514a;
}

Tailwind CSS v4

/* Mocha Madness to Afternoon Coffee — https://swatchly.xyz/palette/8e675d-c7a098-ead8d3-34251f-6d514a */
@theme {
  --color-mocha-madness: #8e675d;
  --color-mocha-madness-50: #fff2ee;
  --color-mocha-madness-100: #ffe6e0;
  --color-mocha-madness-200: #f2d1c9;
  --color-mocha-madness-300: #dfbbb1;
  --color-mocha-madness-400: #c39b91;
  --color-mocha-madness-500: #a98076;
  --color-mocha-madness-600: #8e675d;
  --color-mocha-madness-700: #735047;
  --color-mocha-madness-800: #5c3d35;
  --color-mocha-madness-900: #482e27;
  --color-mocha-madness-950: #2e1b17;
  --color-cashmere-clay: #c7a098;
  --color-cashmere-clay-50: #fff6f4;
  --color-cashmere-clay-100: #ffebe7;
  --color-cashmere-clay-200: #f3d6d0;
  --color-cashmere-clay-300: #e1c0b9;
  --color-cashmere-clay-400: #c7a098;
  --color-cashmere-clay-500: #a9837c;
  --color-cashmere-clay-600: #8b6760;
  --color-cashmere-clay-700: #70504a;
  --color-cashmere-clay-800: #593d37;
  --color-cashmere-clay-900: #452d29;
  --color-cashmere-clay-950: #2b1a17;
  --color-fiesta: #ead8d3;
  --color-fiesta-50: #fff6f4;
  --color-fiesta-100: #f8edea;
  --color-fiesta-200: #ead8d3;
  --color-fiesta-300: #d0c1bd;
  --color-fiesta-400: #b1a19c;
  --color-fiesta-500: #958480;
  --color-fiesta-600: #796965;
  --color-fiesta-700: #60524f;
  --color-fiesta-800: #4b3f3c;
  --color-fiesta-900: #3a302d;
  --color-fiesta-950: #251d1b;
  --color-wood-bark: #34251f;
  --color-wood-bark-50: #fef2ee;
  --color-wood-bark-100: #f5e8e3;
  --color-wood-bark-200: #e3d4ce;
  --color-wood-bark-300: #cebdb6;
  --color-wood-bark-400: #ae9b94;
  --color-wood-bark-500: #907e76;
  --color-wood-bark-600: #73625b;
  --color-wood-bark-700: #594a44;
  --color-wood-bark-800: #433732;
  --color-wood-bark-900: #34251f;
  --color-wood-bark-950: #1d1613;
  --color-afternoon-coffee: #6d514a;
  --color-afternoon-coffee-50: #fff2ee;
  --color-afternoon-coffee-100: #fbe6e0;
  --color-afternoon-coffee-200: #ebd2cc;
  --color-afternoon-coffee-300: #d7bbb4;
  --color-afternoon-coffee-400: #ba9c94;
  --color-afternoon-coffee-500: #9f8179;
  --color-afternoon-coffee-600: #846760;
  --color-afternoon-coffee-700: #6d514a;
  --color-afternoon-coffee-800: #563f39;
  --color-afternoon-coffee-900: #43302b;
  --color-afternoon-coffee-950: #2b1d19;
}