Donkey Kong to Mad for Mango Color Palette

About this palette

Donkey Kong to Mad for Mango is a 4-color vibrant palette: #AE4200 (Donkey Kong), #7880FF (Orchid), #00B6EE (Blue Bikini), #F7A600 (Mad for Mango). It mixes brown, purple, blue, orange tones and feels balanced overall. The strongest text pairing is #AE4200 on #F7A600 with a contrast ratio of 2.91:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Donkey Kong	rgb(174, 66, 0)	hsl(23, 100%, 34%)
Orchid	rgb(120, 128, 255)	hsl(236, 100%, 74%)
Blue Bikini	rgb(0, 182, 238)	hsl(194, 100%, 47%)
Mad for Mango	rgb(247, 166, 0)	hsl(40, 100%, 48%)

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.

Color blindness preview

CSS variables

/* Donkey Kong to Mad for Mango — https://swatchly.xyz/palette/ae4200-7880ff-00b6ee-f7a600 */
:root {
  --donkey-kong: #ae4200;
  --orchid: #7880ff;
  --blue-bikini: #00b6ee;
  --mad-for-mango: #f7a600;
}

Tailwind CSS v4

/* Donkey Kong to Mad for Mango — https://swatchly.xyz/palette/ae4200-7880ff-00b6ee-f7a600 */
@theme {
  --color-donkey-kong: #ae4200;
  --color-donkey-kong-50: #fff2ed;
  --color-donkey-kong-100: #ffe4da;
  --color-donkey-kong-200: #ffc8b3;
  --color-donkey-kong-300: #ffa682;
  --color-donkey-kong-400: #eb7d4e;
  --color-donkey-kong-500: #cd5f2c;
  --color-donkey-kong-600: #ae4200;
  --color-donkey-kong-700: #8b3300;
  --color-donkey-kong-800: #6e2700;
  --color-donkey-kong-900: #571d00;
  --color-donkey-kong-950: #381000;
  --color-orchid: #7880ff;
  --color-orchid-50: #f5f7ff;
  --color-orchid-100: #ebeeff;
  --color-orchid-200: #d5dbff;
  --color-orchid-300: #bbc4ff;
  --color-orchid-400: #96a1ff;
  --color-orchid-500: #7880ff;
  --color-orchid-600: #5e62dd;
  --color-orchid-700: #4949bb;
  --color-orchid-800: #37359a;
  --color-orchid-900: #29257c;
  --color-orchid-950: #181452;
  --color-blue-bikini: #00b6ee;
  --color-blue-bikini-50: #edf9ff;
  --color-blue-bikini-100: #d9f2ff;
  --color-blue-bikini-200: #ade4ff;
  --color-blue-bikini-300: #71d3ff;
  --color-blue-bikini-400: #00b6ee;
  --color-blue-bikini-500: #0097c6;
  --color-blue-bikini-600: #007aa0;
  --color-blue-bikini-700: #006080;
  --color-blue-bikini-800: #004b64;
  --color-blue-bikini-900: #00394d;
  --color-blue-bikini-950: #002331;
  --color-mad-for-mango: #f7a600;
  --color-mad-for-mango-50: #ffeed9;
  --color-mad-for-mango-100: #ffe0b9;
  --color-mad-for-mango-200: #ffc575;
  --color-mad-for-mango-300: #f7a600;
  --color-mad-for-mango-400: #d08b00;
  --color-mad-for-mango-500: #ae7400;
  --color-mad-for-mango-600: #8d5d00;
  --color-mad-for-mango-700: #714a00;
  --color-mad-for-mango-800: #5a3a00;
  --color-mad-for-mango-900: #472d00;
  --color-mad-for-mango-950: #2d1b00;
}