Ghost White to Wonka Purple color palette

F9F7FFGhost White A23472Plum Kingdom AF6CF5Illicit Purple DF98F4Diva Mecha 4E1F53Wonka Purple

About this palette

Ghost White to Wonka Purple is a 5-color cool palette: #F9F7FF (Ghost White), #A23472 (Plum Kingdom), #AF6CF5 (Illicit Purple), #DF98F4 (Diva Mecha), #4E1F53 (Wonka Purple). It mixes white, red, purple tones and feels cool overall. The strongest text pairing is #F9F7FF on #4E1F53 with a contrast ratio of 12.02:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ghost White	rgb(249, 247, 255)	hsl(255, 100%, 98%)
Plum Kingdom	rgb(162, 52, 114)	hsl(326, 51%, 42%)
Illicit Purple	rgb(175, 108, 245)	hsl(269, 87%, 69%)
Diva Mecha	rgb(223, 152, 244)	hsl(286, 81%, 78%)
Wonka Purple	rgb(78, 31, 83)	hsl(294, 46%, 22%)

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.

Aa12.02:1 Super#F9F7FF on #4E1F53
Aa12.02:1 Super#4E1F53 on #F9F7FF
Aa6.05:1 Good#F9F7FF on #A23472
Aa6.05:1 Good#A23472 on #F9F7FF
Aa6.04:1 Good#DF98F4 on #4E1F53
Aa6.04:1 Good#4E1F53 on #DF98F4
Aa3.82:1 Poor#AF6CF5 on #4E1F53
Aa3.82:1 Poor#4E1F53 on #AF6CF5

Color blindness preview

CSS variables

/* Ghost White to Wonka Purple — https://swatchly.xyz/palette/f9f7ff-a23472-af6cf5-df98f4-4e1f53 */
:root {
  --ghost-white: #f9f7ff;
  --plum-kingdom: #a23472;
  --illicit-purple: #af6cf5;
  --diva-mecha: #df98f4;
  --wonka-purple: #4e1f53;
}

Tailwind CSS v4

/* Ghost White to Wonka Purple — https://swatchly.xyz/palette/f9f7ff-a23472-af6cf5-df98f4-4e1f53 */
@theme {
  --color-ghost-white: #f9f7ff;
  --color-ghost-white-50: #f9f7ff;
  --color-ghost-white-100: #eeedf2;
  --color-ghost-white-200: #dad9de;
  --color-ghost-white-300: #c3c1c8;
  --color-ghost-white-400: #a3a1a8;
  --color-ghost-white-500: #87858c;
  --color-ghost-white-600: #6c6b71;
  --color-ghost-white-700: #56545a;
  --color-ghost-white-800: #434147;
  --color-ghost-white-900: #333236;
  --color-ghost-white-950: #1f1f22;
  --color-plum-kingdom: #a23472;
  --color-plum-kingdom-50: #fff1f7;
  --color-plum-kingdom-100: #ffe0ee;
  --color-plum-kingdom-200: #ffbfdd;
  --color-plum-kingdom-300: #fe97ca;
  --color-plum-kingdom-400: #e070ab;
  --color-plum-kingdom-500: #c2528e;
  --color-plum-kingdom-600: #a23472;
  --color-plum-kingdom-700: #84235b;
  --color-plum-kingdom-800: #6b1648;
  --color-plum-kingdom-900: #550c38;
  --color-plum-kingdom-950: #380423;
  --color-illicit-purple: #af6cf5;
  --color-illicit-purple-50: #f9f6ff;
  --color-illicit-purple-100: #f4ecff;
  --color-illicit-purple-200: #e7d6ff;
  --color-illicit-purple-300: #d8bbff;
  --color-illicit-purple-400: #c390ff;
  --color-illicit-purple-500: #af6cf5;
  --color-illicit-purple-600: #914dd3;
  --color-illicit-purple-700: #7634b2;
  --color-illicit-purple-800: #5e2092;
  --color-illicit-purple-900: #491275;
  --color-illicit-purple-950: #2e064d;
  --color-diva-mecha: #df98f4;
  --color-diva-mecha-50: #faeaff;
  --color-diva-mecha-100: #f6d9ff;
  --color-diva-mecha-200: #efb9ff;
  --color-diva-mecha-300: #df98f4;
  --color-diva-mecha-400: #bf7bd3;
  --color-diva-mecha-500: #a460b8;
  --color-diva-mecha-600: #89489c;
  --color-diva-mecha-700: #713581;
  --color-diva-mecha-800: #5b266a;
  --color-diva-mecha-900: #491b56;
  --color-diva-mecha-950: #2f0e38;
  --color-wonka-purple: #4e1f53;
  --color-wonka-purple-50: #fef0ff;
  --color-wonka-purple-100: #fde0ff;
  --color-wonka-purple-200: #f1c7f4;
  --color-wonka-purple-300: #ddaee1;
  --color-wonka-purple-400: #c18dc5;
  --color-wonka-purple-500: #a671aa;
  --color-wonka-purple-600: #8a588f;
  --color-wonka-purple-700: #714375;
  --color-wonka-purple-800: #5b335f;
  --color-wonka-purple-900: #4e1f53;
  --color-wonka-purple-950: #2f1632;
}