Magenta Affair to Mango Madness Color Palette

About this palette

Magenta Affair to Mango Madness is a 5-color vibrant, warm, neon palette: #B43DCC (Magenta Affair), #FFA2EA (Pink Elephants), #836900 (Muddy Brown), #A99F00 (Countryside), #F98D00 (Mango Madness). It mixes purple, pink, brown, yellow, orange tones and feels warm overall. The strongest text pairing is #FFA2EA on #836900 with a contrast ratio of 2.91:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Magenta Affair	rgb(180, 61, 204)	hsl(290, 58%, 52%)
Pink Elephants	rgb(255, 162, 234)	hsl(314, 100%, 82%)
Muddy Brown	rgb(131, 105, 0)	hsl(48, 100%, 26%)
Countryside	rgb(169, 159, 0)	hsl(56, 100%, 33%)
Mango Madness	rgb(249, 141, 0)	hsl(34, 100%, 49%)

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

/* Magenta Affair to Mango Madness — https://swatchly.xyz/palette/b43dcc-ffa2ea-836900-a99f00-f98d00 */
:root {
  --magenta-affair: #b43dcc;
  --pink-elephants: #ffa2ea;
  --muddy-brown: #836900;
  --countryside: #a99f00;
  --mango-madness: #f98d00;
}

Tailwind CSS v4

/* Magenta Affair to Mango Madness — https://swatchly.xyz/palette/b43dcc-ffa2ea-836900-a99f00-f98d00 */
@theme {
  --color-magenta-affair: #b43dcc;
  --color-magenta-affair-50: #fceeff;
  --color-magenta-affair-100: #f9dcff;
  --color-magenta-affair-200: #f3bbff;
  --color-magenta-affair-300: #ec91ff;
  --color-magenta-affair-400: #d360eb;
  --color-magenta-affair-500: #b43dcc;
  --color-magenta-affair-600: #9720ae;
  --color-magenta-affair-700: #7c0391;
  --color-magenta-affair-800: #630074;
  --color-magenta-affair-900: #4e005c;
  --color-magenta-affair-950: #34003d;
  --color-pink-elephants: #ffa2ea;
  --color-pink-elephants-50: #fff4fc;
  --color-pink-elephants-100: #ffe7f8;
  --color-pink-elephants-200: #ffc9f1;
  --color-pink-elephants-300: #ffa2ea;
  --color-pink-elephants-400: #d984c7;
  --color-pink-elephants-500: #bd65aa;
  --color-pink-elephants-600: #9e4a8d;
  --color-pink-elephants-700: #813573;
  --color-pink-elephants-800: #68245b;
  --color-pink-elephants-900: #511847;
  --color-pink-elephants-950: #350c2e;
  --color-muddy-brown: #836900;
  --color-muddy-brown-50: #fff5d7;
  --color-muddy-brown-100: #fbebb8;
  --color-muddy-brown-200: #ebd79a;
  --color-muddy-brown-300: #d7c07a;
  --color-muddy-brown-400: #b9a050;
  --color-muddy-brown-500: #9e842d;
  --color-muddy-brown-600: #836900;
  --color-muddy-brown-700: #685300;
  --color-muddy-brown-800: #524000;
  --color-muddy-brown-900: #3f3100;
  --color-muddy-brown-950: #281e00;
  --color-countryside: #a99f00;
  --color-countryside-50: #faf7b6;
  --color-countryside-100: #f0eca2;
  --color-countryside-200: #ddd77e;
  --color-countryside-300: #c8c055;
  --color-countryside-400: #a99f00;
  --color-countryside-500: #8d8400;
  --color-countryside-600: #716b00;
  --color-countryside-700: #5a5500;
  --color-countryside-800: #474200;
  --color-countryside-900: #373300;
  --color-countryside-950: #232000;
  --color-mango-madness: #f98d00;
  --color-mango-madness-50: #fff7f1;
  --color-mango-madness-100: #ffeddf;
  --color-mango-madness-200: #ffd6b5;
  --color-mango-madness-300: #ffb97f;
  --color-mango-madness-400: #f98d00;
  --color-mango-madness-500: #cf7400;
  --color-mango-madness-600: #a75d00;
  --color-mango-madness-700: #854900;
  --color-mango-madness-800: #683700;
  --color-mango-madness-900: #502900;
  --color-mango-madness-950: #321800;
}