Macaroon to Underworld Color Palette

About this palette

Macaroon to Underworld is a 5-color muted, warm, earthy, vintage palette: #B2866F (Macaroon), #6F501C (Chocolate Rain), #E1BFAD (Muddy Rose), #FFF5E9 (What’s Left), #232413 (Underworld). It mixes orange, brown, white, gray tones and feels warm overall. The strongest text pairing is #FFF5E9 on #232413 with a contrast ratio of 14.62:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Macaroon	rgb(178, 134, 111)	hsl(21, 30%, 57%)
Chocolate Rain	rgb(111, 80, 28)	hsl(38, 60%, 27%)
Muddy Rose	rgb(225, 191, 173)	hsl(21, 46%, 78%)
What’s Left	rgb(255, 245, 233)	hsl(33, 100%, 96%)
Underworld	rgb(35, 36, 19)	hsl(64, 31%, 11%)

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.

Aa14.62:1 Super#FFF5E9 on #232413
Aa14.62:1 Super#232413 on #FFF5E9
Aa9.19:1 Very good#E1BFAD on #232413
Aa9.19:1 Very good#232413 on #E1BFAD
Aa6.86:1 Good#6F501C on #FFF5E9
Aa6.86:1 Good#FFF5E9 on #6F501C
Aa4.90:1 Good#B2866F on #232413
Aa4.90:1 Good#232413 on #B2866F

Color blindness preview

CSS variables

/* Macaroon to Underworld — https://swatchly.xyz/palette/b2866f-6f501c-e1bfad-fff5e9-232413 */
:root {
  --macaroon: #b2866f;
  --chocolate-rain: #6f501c;
  --muddy-rose: #e1bfad;
  --what-s-left: #fff5e9;
  --underworld: #232413;
}

Tailwind CSS v4

/* Macaroon to Underworld — https://swatchly.xyz/palette/b2866f-6f501c-e1bfad-fff5e9-232413 */
@theme {
  --color-macaroon: #b2866f;
  --color-macaroon-50: #fff5f0;
  --color-macaroon-100: #ffebe0;
  --color-macaroon-200: #f7d5c4;
  --color-macaroon-300: #e6bfac;
  --color-macaroon-400: #cba08a;
  --color-macaroon-500: #b2866f;
  --color-macaroon-600: #946a54;
  --color-macaroon-700: #78523d;
  --color-macaroon-800: #603e2c;
  --color-macaroon-900: #4a2e1f;
  --color-macaroon-950: #2f1b10;
  --color-chocolate-rain: #6f501c;
  --color-chocolate-rain-50: #fff3e3;
  --color-chocolate-rain-100: #fee8c7;
  --color-chocolate-rain-200: #eed3ad;
  --color-chocolate-rain-300: #dabc90;
  --color-chocolate-rain-400: #bd9c6c;
  --color-chocolate-rain-500: #a2814e;
  --color-chocolate-rain-600: #866735;
  --color-chocolate-rain-700: #6f501c;
  --color-chocolate-rain-800: #573e14;
  --color-chocolate-rain-900: #442f0a;
  --color-chocolate-rain-950: #2c1c03;
  --color-muddy-rose: #e1bfad;
  --color-muddy-rose-50: #fff6f2;
  --color-muddy-rose-100: #ffebe0;
  --color-muddy-rose-200: #f0d7ca;
  --color-muddy-rose-300: #e1bfad;
  --color-muddy-rose-400: #be9f8f;
  --color-muddy-rose-500: #a28271;
  --color-muddy-rose-600: #856757;
  --color-muddy-rose-700: #6b5042;
  --color-muddy-rose-800: #553d31;
  --color-muddy-rose-900: #412e23;
  --color-muddy-rose-950: #2a1c14;
  --color-what-s-left: #fff5e9;
  --color-what-s-left-50: #fff5e9;
  --color-what-s-left-100: #f1ebe4;
  --color-what-s-left-200: #ded7cf;
  --color-what-s-left-300: #c8c0b6;
  --color-what-s-left-400: #a9a096;
  --color-what-s-left-500: #8e857a;
  --color-what-s-left-600: #736a60;
  --color-what-s-left-700: #5c544b;
  --color-what-s-left-800: #484139;
  --color-what-s-left-900: #37322b;
  --color-what-s-left-950: #231f1a;
  --color-underworld: #232413;
  --color-underworld-50: #f5f6ea;
  --color-underworld-100: #ebeddf;
  --color-underworld-200: #d8d9c9;
  --color-underworld-300: #c1c3b0;
  --color-underworld-400: #a2a48f;
  --color-underworld-500: #878975;
  --color-underworld-600: #6d6f5c;
  --color-underworld-700: #575947;
  --color-underworld-800: #454637;
  --color-underworld-900: #36372a;
  --color-underworld-950: #232413;
}