Purple Rain to Sunflower Mango color palette

7A47C2Purple Rain D72EBELoudicious Pink D262EBBubblegum Baby Girl 45CD11Verminal FEB600Sunflower Mango

Open in generator Export PNG, PDF, ASE…

About this palette

Purple Rain to Sunflower Mango is a 5-color vibrant, cool, neon palette: #7A47C2 (Purple Rain), #D72EBE (Loudicious Pink), #D262EB (Bubblegum Baby Girl), #45CD11 (Verminal), #FEB600 (Sunflower Mango). It mixes purple, pink, green, yellow tones and feels cool overall. The strongest text pairing is #7A47C2 on #FEB600 with a contrast ratio of 3.39:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Purple Rain	rgb(122, 71, 194)	hsl(265, 50%, 52%)
Loudicious Pink	rgb(215, 46, 190)	hsl(309, 68%, 51%)
Bubblegum Baby Girl	rgb(210, 98, 235)	hsl(289, 77%, 65%)
Verminal	rgb(69, 205, 17)	hsl(103, 85%, 44%)
Sunflower Mango	rgb(254, 182, 0)	hsl(43, 100%, 50%)

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.

Aa3.39:1 Poor#7A47C2 on #FEB600
Aa3.39:1 Poor#FEB600 on #7A47C2

Color blindness preview

CSS variables

/* Purple Rain to Sunflower Mango — https://swatchly.xyz/palette/7a47c2-d72ebe-d262eb-45cd11-feb600 */
:root {
  --purple-rain: #7a47c2;
  --loudicious-pink: #d72ebe;
  --bubblegum-baby-girl: #d262eb;
  --verminal: #45cd11;
  --sunflower-mango: #feb600;
}

Tailwind CSS v4

/* Purple Rain to Sunflower Mango — https://swatchly.xyz/palette/7a47c2-d72ebe-d262eb-45cd11-feb600 */
@theme {
  --color-purple-rain: #7a47c2;
  --color-purple-rain-50: #f6f3ff;
  --color-purple-rain-100: #ede6ff;
  --color-purple-rain-200: #dccdff;
  --color-purple-rain-300: #c9afff;
  --color-purple-rain-400: #b082fd;
  --color-purple-rain-500: #9564e1;
  --color-purple-rain-600: #7a47c2;
  --color-purple-rain-700: #6233a1;
  --color-purple-rain-800: #4e2384;
  --color-purple-rain-900: #3d176b;
  --color-purple-rain-950: #270b47;
  --color-loudicious-pink: #d72ebe;
  --color-loudicious-pink-50: #fff0fb;
  --color-loudicious-pink-100: #ffe0f7;
  --color-loudicious-pink-200: #ffc0f0;
  --color-loudicious-pink-300: #ff96e9;
  --color-loudicious-pink-400: #f457da;
  --color-loudicious-pink-500: #d72ebe;
  --color-loudicious-pink-600: #b5009f;
  --color-loudicious-pink-700: #91007f;
  --color-loudicious-pink-800: #730064;
  --color-loudicious-pink-900: #5a004e;
  --color-loudicious-pink-950: #3b0032;
  --color-bubblegum-baby-girl: #d262eb;
  --color-bubblegum-baby-girl-50: #fcecff;
  --color-bubblegum-baby-girl-100: #f8dbff;
  --color-bubblegum-baby-girl-200: #f2bbff;
  --color-bubblegum-baby-girl-300: #eb92ff;
  --color-bubblegum-baby-girl-400: #d262eb;
  --color-bubblegum-baby-girl-500: #b645ce;
  --color-bubblegum-baby-girl-600: #9929b0;
  --color-bubblegum-baby-girl-700: #7e1193;
  --color-bubblegum-baby-girl-800: #660078;
  --color-bubblegum-baby-girl-900: #510060;
  --color-bubblegum-baby-girl-950: #350040;
  --color-verminal: #45cd11;
  --color-verminal-50: #eeffea;
  --color-verminal-100: #d5ffcc;
  --color-verminal-200: #a2f98f;
  --color-verminal-300: #81e769;
  --color-verminal-400: #45cd11;
  --color-verminal-500: #35ab00;
  --color-verminal-600: #298900;
  --color-verminal-700: #1e6d00;
  --color-verminal-800: #155400;
  --color-verminal-900: #0e4000;
  --color-verminal-950: #062700;
  --color-sunflower-mango: #feb600;
  --color-sunflower-mango-50: #fff6e7;
  --color-sunflower-mango-100: #ffebcb;
  --color-sunflower-mango-200: #ffd48b;
  --color-sunflower-mango-300: #feb600;
  --color-sunflower-mango-400: #d59800;
  --color-sunflower-mango-500: #b17e00;
  --color-sunflower-mango-600: #8f6500;
  --color-sunflower-mango-700: #724f00;
  --color-sunflower-mango-800: #593d00;
  --color-sunflower-mango-900: #442e00;
  --color-sunflower-mango-950: #2c1c00;
}