Wood Bark to Muddy Rose color palette

2A2319Wood Bark 563F40Monkey Island 725757Afternoon Coffee 9E887FRuins of Metal B5A28EHickory E0BBADMuddy Rose

Open in generator Export PNG, PDF, ASE…

About this palette

Wood Bark to Muddy Rose is a 6-color muted, gradient palette: #2A2319 (Wood Bark), #563F40 (Monkey Island), #725757 (Afternoon Coffee), #9E887F (Ruins of Metal), #B5A28E (Hickory), #E0BBAD (Muddy Rose). It mixes gray, red, orange tones and feels warm overall. The strongest text pairing is #2A2319 on #E0BBAD with a contrast ratio of 8.78:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wood Bark	rgb(42, 35, 25)	hsl(35, 25%, 13%)
Monkey Island	rgb(86, 63, 64)	hsl(357, 15%, 29%)
Afternoon Coffee	rgb(114, 87, 87)	hsl(0, 13%, 39%)
Ruins of Metal	rgb(158, 136, 127)	hsl(17, 14%, 56%)
Hickory	rgb(181, 162, 142)	hsl(31, 21%, 63%)
Muddy Rose	rgb(224, 187, 173)	hsl(16, 45%, 78%)

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.

Aa8.78:1 Very good#2A2319 on #E0BBAD
Aa8.78:1 Very good#E0BBAD on #2A2319
Aa6.30:1 Good#2A2319 on #B5A28E
Aa6.30:1 Good#B5A28E on #2A2319
Aa5.45:1 Good#563F40 on #E0BBAD
Aa5.45:1 Good#E0BBAD on #563F40
Aa4.64:1 Good#2A2319 on #9E887F
Aa4.64:1 Good#9E887F on #2A2319

Color blindness preview

CSS variables

/* Wood Bark to Muddy Rose — https://swatchly.xyz/palette/2a2319-563f40-725757-9e887f-b5a28e-e0bbad */
:root {
  --wood-bark: #2a2319;
  --monkey-island: #563f40;
  --afternoon-coffee: #725757;
  --ruins-of-metal: #9e887f;
  --hickory: #b5a28e;
  --muddy-rose: #e0bbad;
}

Tailwind CSS v4

/* Wood Bark to Muddy Rose — https://swatchly.xyz/palette/2a2319-563f40-725757-9e887f-b5a28e-e0bbad */
@theme {
  --color-wood-bark: #2a2319;
  --color-wood-bark-50: #faf4ed;
  --color-wood-bark-100: #f0eae2;
  --color-wood-bark-200: #ddd6cd;
  --color-wood-bark-300: #c8c0b5;
  --color-wood-bark-400: #a9a094;
  --color-wood-bark-500: #8e867a;
  --color-wood-bark-600: #756c61;
  --color-wood-bark-700: #5e574c;
  --color-wood-bark-800: #4c453c;
  --color-wood-bark-900: #3c362e;
  --color-wood-bark-950: #2a2319;
  --color-monkey-island: #563f40;
  --color-monkey-island-50: #fff1f2;
  --color-monkey-island-100: #f8e6e7;
  --color-monkey-island-200: #e7d2d2;
  --color-monkey-island-300: #d3bbbc;
  --color-monkey-island-400: #b69b9c;
  --color-monkey-island-500: #9b8182;
  --color-monkey-island-600: #806768;
  --color-monkey-island-700: #685253;
  --color-monkey-island-800: #563f40;
  --color-monkey-island-900: #413131;
  --color-monkey-island-950: #2a1e1e;
  --color-afternoon-coffee: #725757;
  --color-afternoon-coffee-50: #fff1f1;
  --color-afternoon-coffee-100: #fae6e5;
  --color-afternoon-coffee-200: #ead3d3;
  --color-afternoon-coffee-300: #d8bdbd;
  --color-afternoon-coffee-400: #bb9f9f;
  --color-afternoon-coffee-500: #a28585;
  --color-afternoon-coffee-600: #886c6c;
  --color-afternoon-coffee-700: #725757;
  --color-afternoon-coffee-800: #5a4343;
  --color-afternoon-coffee-900: #463333;
  --color-afternoon-coffee-950: #2d1f1f;
  --color-ruins-of-metal: #9e887f;
  --color-ruins-of-metal-50: #fff4ef;
  --color-ruins-of-metal-100: #f9eae4;
  --color-ruins-of-metal-200: #e9d7d0;
  --color-ruins-of-metal-300: #d5c1b9;
  --color-ruins-of-metal-400: #b8a39a;
  --color-ruins-of-metal-500: #9e887f;
  --color-ruins-of-metal-600: #816c64;
  --color-ruins-of-metal-700: #68554d;
  --color-ruins-of-metal-800: #52413b;
  --color-ruins-of-metal-900: #3f312c;
  --color-ruins-of-metal-950: #281e1a;
  --color-hickory: #b5a28e;
  --color-hickory-50: #fff5ea;
  --color-hickory-100: #f7ebde;
  --color-hickory-200: #e6d8c9;
  --color-hickory-300: #d2c1b0;
  --color-hickory-400: #b5a28e;
  --color-hickory-500: #988673;
  --color-hickory-600: #7c6b58;
  --color-hickory-700: #645443;
  --color-hickory-800: #4e4132;
  --color-hickory-900: #3d3125;
  --color-hickory-950: #261e15;
  --color-muddy-rose: #e0bbad;
  --color-muddy-rose-50: #fff4f0;
  --color-muddy-rose-100: #ffe8df;
  --color-muddy-rose-200: #efd4c9;
  --color-muddy-rose-300: #e0bbad;
  --color-muddy-rose-400: #be9c8f;
  --color-muddy-rose-500: #a27f72;
  --color-muddy-rose-600: #856558;
  --color-muddy-rose-700: #6c4e43;
  --color-muddy-rose-800: #553c32;
  --color-muddy-rose-900: #422d25;
  --color-muddy-rose-950: #2a1b15;
}