Monkey Island to Pink Swirl color palette

5B3A33Monkey Island 884635Olive Niçoise A27369Equestrienne D19489Powder Blush EFB8A6Plushy Pink FFE8E5Pink Swirl

Open in generator Export PNG, PDF, ASE…

About this palette

Monkey Island to Pink Swirl is a 6-color warm, vintage, monochromatic, gradient palette: #5B3A33 (Monkey Island), #884635 (Olive Niçoise), #A27369 (Equestrienne), #D19489 (Powder Blush), #EFB8A6 (Plushy Pink), #FFE8E5 (Pink Swirl). It mixes brown, red, pink, white tones and feels warm overall. The strongest text pairing is #5B3A33 on #FFE8E5 with a contrast ratio of 8.54:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Monkey Island	rgb(91, 58, 51)	hsl(10, 28%, 28%)
Olive Niçoise	rgb(136, 70, 53)	hsl(12, 44%, 37%)
Equestrienne	rgb(162, 115, 105)	hsl(11, 23%, 52%)
Powder Blush	rgb(209, 148, 137)	hsl(9, 44%, 68%)
Plushy Pink	rgb(239, 184, 166)	hsl(15, 70%, 79%)
Pink Swirl	rgb(255, 232, 229)	hsl(7, 100%, 95%)

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.54:1 Very good#5B3A33 on #FFE8E5
Aa8.54:1 Very good#FFE8E5 on #5B3A33
Aa6.03:1 Good#884635 on #FFE8E5
Aa6.03:1 Good#FFE8E5 on #884635
Aa5.76:1 Good#5B3A33 on #EFB8A6
Aa5.76:1 Good#EFB8A6 on #5B3A33
Aa4.06:1 Poor#884635 on #EFB8A6
Aa4.06:1 Poor#EFB8A6 on #884635

Color blindness preview

CSS variables

/* Monkey Island to Pink Swirl — https://swatchly.xyz/palette/5b3a33-884635-a27369-d19489-efb8a6-ffe8e5 */
:root {
  --monkey-island: #5b3a33;
  --olive-ni-oise: #884635;
  --equestrienne: #a27369;
  --powder-blush: #d19489;
  --plushy-pink: #efb8a6;
  --pink-swirl: #ffe8e5;
}

Tailwind CSS v4

/* Monkey Island to Pink Swirl — https://swatchly.xyz/palette/5b3a33-884635-a27369-d19489-efb8a6-ffe8e5 */
@theme {
  --color-monkey-island: #5b3a33;
  --color-monkey-island-50: #fff2ef;
  --color-monkey-island-100: #ffe4df;
  --color-monkey-island-200: #eecfc9;
  --color-monkey-island-300: #dbb8b0;
  --color-monkey-island-400: #bd9890;
  --color-monkey-island-500: #a27d74;
  --color-monkey-island-600: #86635b;
  --color-monkey-island-700: #6e4d46;
  --color-monkey-island-800: #5b3a33;
  --color-monkey-island-900: #452d28;
  --color-monkey-island-950: #2c1b17;
  --color-olive-ni-oise: #884635;
  --color-olive-ni-oise-50: #fff2ee;
  --color-olive-ni-oise-100: #ffe4dd;
  --color-olive-ni-oise-200: #ffcbbd;
  --color-olive-ni-oise-300: #f2b1a0;
  --color-olive-ni-oise-400: #d7917e;
  --color-olive-ni-oise-500: #bc7563;
  --color-olive-ni-oise-600: #a05c4a;
  --color-olive-ni-oise-700: #884635;
  --color-olive-ni-oise-800: #6c3527;
  --color-olive-ni-oise-900: #56271b;
  --color-olive-ni-oise-950: #38160e;
  --color-equestrienne: #a27369;
  --color-equestrienne-50: #fff0ed;
  --color-equestrienne-100: #ffe1db;
  --color-equestrienne-200: #f2cac1;
  --color-equestrienne-300: #ddb1a7;
  --color-equestrienne-400: #bf8f85;
  --color-equestrienne-500: #a27369;
  --color-equestrienne-600: #865a51;
  --color-equestrienne-700: #6d463e;
  --color-equestrienne-800: #58362e;
  --color-equestrienne-900: #452822;
  --color-equestrienne-950: #2d1814;
  --color-powder-blush: #d19489;
  --color-powder-blush-50: #fff4f1;
  --color-powder-blush-100: #ffe7e3;
  --color-powder-blush-200: #fdcec5;
  --color-powder-blush-300: #ebb6ac;
  --color-powder-blush-400: #d19489;
  --color-powder-blush-500: #b3786e;
  --color-powder-blush-600: #955d54;
  --color-powder-blush-700: #7a473f;
  --color-powder-blush-800: #61362e;
  --color-powder-blush-900: #4c2821;
  --color-powder-blush-950: #311712;
  --color-plushy-pink: #efb8a6;
  --color-plushy-pink-50: #fff6f3;
  --color-plushy-pink-100: #ffeae3;
  --color-plushy-pink-200: #fad2c5;
  --color-plushy-pink-300: #efb8a6;
  --color-plushy-pink-400: #cb9988;
  --color-plushy-pink-500: #af7c6b;
  --color-plushy-pink-600: #916151;
  --color-plushy-pink-700: #764a3c;
  --color-plushy-pink-800: #5e382c;
  --color-plushy-pink-900: #49291f;
  --color-plushy-pink-950: #2f1811;
  --color-pink-swirl: #ffe8e5;
  --color-pink-swirl-50: #fff5f4;
  --color-pink-swirl-100: #ffe8e5;
  --color-pink-swirl-200: #e6d5d3;
  --color-pink-swirl-300: #d1bebb;
  --color-pink-swirl-400: #b29d9b;
  --color-pink-swirl-500: #96817f;
  --color-pink-swirl-600: #7a6764;
  --color-pink-swirl-700: #62504e;
  --color-pink-swirl-800: #4d3e3c;
  --color-pink-swirl-900: #3c2f2e;
  --color-pink-swirl-950: #261d1c;
}