Underworld to Mellow Marrow color palette

252215Underworld 6E3523Freshly Roasted Coffee 96642AOlivia AF9873Cookie Crumb ECC1B5Mellow Marrow

About this palette

Underworld to Mellow Marrow is a 5-color warm, earthy, vintage, gradient palette: #252215 (Underworld), #6E3523 (Freshly Roasted Coffee), #96642A (Olivia), #AF9873 (Cookie Crumb), #ECC1B5 (Mellow Marrow). It mixes gray, brown, yellow, pink tones and feels warm overall. The strongest text pairing is #252215 on #ECC1B5 with a contrast ratio of 9.76:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Underworld	rgb(37, 34, 21)	hsl(49, 28%, 11%)
Freshly Roasted Coffee	rgb(110, 53, 35)	hsl(14, 52%, 28%)
Olivia	rgb(150, 100, 42)	hsl(32, 56%, 38%)
Cookie Crumb	rgb(175, 152, 115)	hsl(37, 27%, 57%)
Mellow Marrow	rgb(236, 193, 181)	hsl(13, 59%, 82%)

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.

Aa9.76:1 Very good#252215 on #ECC1B5
Aa9.76:1 Very good#ECC1B5 on #252215
Aa5.86:1 Good#6E3523 on #ECC1B5
Aa5.86:1 Good#ECC1B5 on #6E3523
Aa5.74:1 Good#252215 on #AF9873
Aa5.74:1 Good#AF9873 on #252215
Aa3.44:1 Poor#6E3523 on #AF9873
Aa3.44:1 Poor#AF9873 on #6E3523

Color blindness preview

CSS variables

/* Underworld to Mellow Marrow — https://swatchly.xyz/palette/252215-6e3523-96642a-af9873-ecc1b5 */
:root {
  --underworld: #252215;
  --freshly-roasted-coffee: #6e3523;
  --olivia: #96642a;
  --cookie-crumb: #af9873;
  --mellow-marrow: #ecc1b5;
}

Tailwind CSS v4

/* Underworld to Mellow Marrow — https://swatchly.xyz/palette/252215-6e3523-96642a-af9873-ecc1b5 */
@theme {
  --color-underworld: #252215;
  --color-underworld-50: #f7f5ec;
  --color-underworld-100: #eeebe1;
  --color-underworld-200: #dad8cb;
  --color-underworld-300: #c4c1b3;
  --color-underworld-400: #a5a292;
  --color-underworld-500: #8a8777;
  --color-underworld-600: #706d5e;
  --color-underworld-700: #5a5749;
  --color-underworld-800: #474539;
  --color-underworld-900: #38352b;
  --color-underworld-950: #252215;
  --color-freshly-roasted-coffee: #6e3523;
  --color-freshly-roasted-coffee-50: #fff2ee;
  --color-freshly-roasted-coffee-100: #ffe5dc;
  --color-freshly-roasted-coffee-200: #fecab9;
  --color-freshly-roasted-coffee-300: #edb2a0;
  --color-freshly-roasted-coffee-400: #d1927e;
  --color-freshly-roasted-coffee-500: #b67763;
  --color-freshly-roasted-coffee-600: #9a5d4a;
  --color-freshly-roasted-coffee-700: #804937;
  --color-freshly-roasted-coffee-800: #6e3523;
  --color-freshly-roasted-coffee-900: #542a1c;
  --color-freshly-roasted-coffee-950: #37190f;
  --color-olivia: #96642a;
  --color-olivia-50: #fff3e7;
  --color-olivia-100: #ffe8d0;
  --color-olivia-200: #fad1a7;
  --color-olivia-300: #e8ba8a;
  --color-olivia-400: #cc9964;
  --color-olivia-500: #b27e45;
  --color-olivia-600: #96642a;
  --color-olivia-700: #7b4d15;
  --color-olivia-800: #623b05;
  --color-olivia-900: #4d2c00;
  --color-olivia-950: #311a00;
  --color-cookie-crumb: #af9873;
  --color-cookie-crumb-50: #fff1db;
  --color-cookie-crumb-100: #f5e6cd;
  --color-cookie-crumb-200: #e3d1b3;
  --color-cookie-crumb-300: #cdb998;
  --color-cookie-crumb-400: #af9873;
  --color-cookie-crumb-500: #947e5a;
  --color-cookie-crumb-600: #7a6542;
  --color-cookie-crumb-700: #624f30;
  --color-cookie-crumb-800: #4e3e22;
  --color-cookie-crumb-900: #3e2f18;
  --color-cookie-crumb-950: #281d0c;
  --color-mellow-marrow: #ecc1b5;
  --color-mellow-marrow-50: #ffe8e1;
  --color-mellow-marrow-100: #f8dad2;
  --color-mellow-marrow-200: #ecc1b5;
  --color-mellow-marrow-300: #d4aea3;
  --color-mellow-marrow-400: #b79085;
  --color-mellow-marrow-500: #9e766b;
  --color-mellow-marrow-600: #835e54;
  --color-mellow-marrow-700: #6c4a41;
  --color-mellow-marrow-800: #573a32;
  --color-mellow-marrow-900: #442c25;
  --color-mellow-marrow-950: #2c1a15;
}