Macaroon to Shadow Purple color palette

B48D71Macaroon 784C19Milk Chocolate F2FAFFCotton Ball 9DCE8FBotanist 4E3246Shadow Purple

About this palette

Macaroon to Shadow Purple is a 5-color warm, earthy, vintage palette: #B48D71 (Macaroon), #784C19 (Milk Chocolate), #F2FAFF (Cotton Ball), #9DCE8F (Botanist), #4E3246 (Shadow Purple). It mixes orange, brown, white, green, purple tones and feels warm overall. The strongest text pairing is #F2FAFF on #4E3246 with a contrast ratio of 10.65:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Macaroon	rgb(180, 141, 113)	hsl(25, 31%, 57%)
Milk Chocolate	rgb(120, 76, 25)	hsl(32, 66%, 28%)
Cotton Ball	rgb(242, 250, 255)	hsl(203, 100%, 97%)
Botanist	rgb(157, 206, 143)	hsl(107, 39%, 68%)
Shadow Purple	rgb(78, 50, 70)	hsl(317, 22%, 25%)

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.65:1 Very good#F2FAFF on #4E3246
Aa10.65:1 Very good#4E3246 on #F2FAFF
Aa6.99:1 Good#784C19 on #F2FAFF
Aa6.99:1 Good#F2FAFF on #784C19
Aa6.24:1 Good#9DCE8F on #4E3246
Aa6.24:1 Good#4E3246 on #9DCE8F
Aa4.10:1 Poor#784C19 on #9DCE8F
Aa4.10:1 Poor#9DCE8F on #784C19

Color blindness preview

CSS variables

/* Macaroon to Shadow Purple — https://swatchly.xyz/palette/b48d71-784c19-f2faff-9dce8f-4e3246 */
:root {
  --macaroon: #b48d71;
  --milk-chocolate: #784c19;
  --cotton-ball: #f2faff;
  --botanist: #9dce8f;
  --shadow-purple: #4e3246;
}

Tailwind CSS v4

/* Macaroon to Shadow Purple — https://swatchly.xyz/palette/b48d71-784c19-f2faff-9dce8f-4e3246 */
@theme {
  --color-macaroon: #b48d71;
  --color-macaroon-50: #ffede1;
  --color-macaroon-100: #fbdfcb;
  --color-macaroon-200: #e9c8b1;
  --color-macaroon-300: #d3af95;
  --color-macaroon-400: #b48d71;
  --color-macaroon-500: #9a7459;
  --color-macaroon-600: #7f5c42;
  --color-macaroon-700: #684831;
  --color-macaroon-800: #543824;
  --color-macaroon-900: #432b1a;
  --color-macaroon-950: #2c1b0e;
  --color-milk-chocolate: #784c19;
  --color-milk-chocolate-50: #fff3e7;
  --color-milk-chocolate-100: #ffe6cf;
  --color-milk-chocolate-200: #f6d0ab;
  --color-milk-chocolate-300: #e4b98f;
  --color-milk-chocolate-400: #c79869;
  --color-milk-chocolate-500: #ac7d4c;
  --color-milk-chocolate-600: #906333;
  --color-milk-chocolate-700: #784c19;
  --color-milk-chocolate-800: #5f3b11;
  --color-milk-chocolate-900: #4a2c07;
  --color-milk-chocolate-950: #301a02;
  --color-cotton-ball: #f2faff;
  --color-cotton-ball-50: #f2faff;
  --color-cotton-ball-100: #eaeff2;
  --color-cotton-ball-200: #d5dbde;
  --color-cotton-ball-300: #bdc4c8;
  --color-cotton-ball-400: #9da4a8;
  --color-cotton-ball-500: #81888c;
  --color-cotton-ball-600: #666d71;
  --color-cotton-ball-700: #50565a;
  --color-cotton-ball-800: #3e4347;
  --color-cotton-ball-900: #2f3436;
  --color-cotton-ball-950: #1d2022;
  --color-botanist: #9dce8f;
  --color-botanist-50: #e1fdd9;
  --color-botanist-100: #d4f4cb;
  --color-botanist-200: #bce2b2;
  --color-botanist-300: #9dce8f;
  --color-botanist-400: #80ae73;
  --color-botanist-500: #649357;
  --color-botanist-600: #4c783f;
  --color-botanist-700: #38602c;
  --color-botanist-800: #294c1e;
  --color-botanist-900: #1d3c14;
  --color-botanist-950: #102509;
  --color-shadow-purple: #4e3246;
  --color-shadow-purple-50: #fff0fa;
  --color-shadow-purple-100: #fae4f3;
  --color-shadow-purple-200: #e9cee0;
  --color-shadow-purple-300: #d3b5ca;
  --color-shadow-purple-400: #b494aa;
  --color-shadow-purple-500: #98778e;
  --color-shadow-purple-600: #7b5d72;
  --color-shadow-purple-700: #614759;
  --color-shadow-purple-800: #4e3246;
  --color-shadow-purple-900: #3a2735;
  --color-shadow-purple-950: #241720;
}