Fatty Fuchsia to Mellow Mango Color Palette

About this palette

Fatty Fuchsia to Mellow Mango is a 5-color vibrant, warm, neon palette: #EF007C (Fatty Fuchsia), #FF33F4 (Barbara), #00E6C6 (Fake Jade), #6786FF (Skinny Jeans), #CD4500 (Mellow Mango). It mixes pink, turquoise, blue, red tones and feels warm overall. The strongest text pairing is #00E6C6 on #CD4500 with a contrast ratio of 2.95:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fatty Fuchsia	rgb(239, 0, 124)	hsl(329, 100%, 47%)
Barbara	rgb(255, 51, 244)	hsl(303, 100%, 60%)
Fake Jade	rgb(0, 230, 198)	hsl(172, 100%, 45%)
Skinny Jeans	rgb(103, 134, 255)	hsl(228, 100%, 70%)
Mellow Mango	rgb(205, 69, 0)	hsl(20, 100%, 40%)

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

/* Fatty Fuchsia to Mellow Mango — https://swatchly.xyz/palette/ef007c-ff33f4-00e6c6-6786ff-cd4500 */
:root {
  --fatty-fuchsia: #ef007c;
  --barbara: #ff33f4;
  --fake-jade: #00e6c6;
  --skinny-jeans: #6786ff;
  --mellow-mango: #cd4500;
}

Tailwind CSS v4

/* Fatty Fuchsia to Mellow Mango — https://swatchly.xyz/palette/ef007c-ff33f4-00e6c6-6786ff-cd4500 */
@theme {
  --color-fatty-fuchsia: #ef007c;
  --color-fatty-fuchsia-50: #fff1f4;
  --color-fatty-fuchsia-100: #ffe2e9;
  --color-fatty-fuchsia-200: #ffc4d4;
  --color-fatty-fuchsia-300: #ff9fbb;
  --color-fatty-fuchsia-400: #ff5d99;
  --color-fatty-fuchsia-500: #ef007c;
  --color-fatty-fuchsia-600: #c20063;
  --color-fatty-fuchsia-700: #9c004f;
  --color-fatty-fuchsia-800: #7b003d;
  --color-fatty-fuchsia-900: #61002f;
  --color-fatty-fuchsia-950: #40001c;
  --color-barbara: #ff33f4;
  --color-barbara-50: #fff0fd;
  --color-barbara-100: #ffe0fb;
  --color-barbara-200: #ffbff7;
  --color-barbara-300: #ff94f4;
  --color-barbara-400: #ff33f4;
  --color-barbara-500: #db00d2;
  --color-barbara-600: #b200aa;
  --color-barbara-700: #8e0088;
  --color-barbara-800: #70006b;
  --color-barbara-900: #580054;
  --color-barbara-950: #390036;
  --color-fake-jade: #00e6c6;
  --color-fake-jade-50: #e4fff8;
  --color-fake-jade-100: #bdffef;
  --color-fake-jade-200: #85f4dc;
  --color-fake-jade-300: #00e6c6;
  --color-fake-jade-400: #00c1a6;
  --color-fake-jade-500: #00a089;
  --color-fake-jade-600: #00816e;
  --color-fake-jade-700: #006657;
  --color-fake-jade-800: #004f43;
  --color-fake-jade-900: #003c33;
  --color-fake-jade-950: #00261f;
  --color-skinny-jeans: #6786ff;
  --color-skinny-jeans-50: #f4f7ff;
  --color-skinny-jeans-100: #e9efff;
  --color-skinny-jeans-200: #d1ddff;
  --color-skinny-jeans-300: #b4c7ff;
  --color-skinny-jeans-400: #8aa6ff;
  --color-skinny-jeans-500: #6786ff;
  --color-skinny-jeans-600: #4d68dd;
  --color-skinny-jeans-700: #394ebb;
  --color-skinny-jeans-800: #293a9a;
  --color-skinny-jeans-900: #1d2a7c;
  --color-skinny-jeans-950: #0f1752;
  --color-mellow-mango: #cd4500;
  --color-mellow-mango-50: #ffefe9;
  --color-mellow-mango-100: #ffded3;
  --color-mellow-mango-200: #ffbfaa;
  --color-mellow-mango-300: #ff9976;
  --color-mellow-mango-400: #ee6735;
  --color-mellow-mango-500: #cd4500;
  --color-mellow-mango-600: #a73600;
  --color-mellow-mango-700: #862a00;
  --color-mellow-mango-800: #6b2000;
  --color-mellow-mango-900: #551700;
  --color-mellow-mango-950: #390c00;
}