Prom Corsage to Midnight Masquerade color palette

E0C4EFProm Corsage 9F89C5Petrified Purple A75484Purple Zergling 464C94Galaxy Express 272D42Midnight Masquerade

Open in generator Export PNG, PDF, ASE…

About this palette

Prom Corsage to Midnight Masquerade is a 5-color cool, gradient palette: #E0C4EF (Prom Corsage), #9F89C5 (Petrified Purple), #A75484 (Purple Zergling), #464C94 (Galaxy Express), #272D42 (Midnight Masquerade). It mixes purple, red, blue tones and feels cool overall. The strongest text pairing is #E0C4EF on #272D42 with a contrast ratio of 8.64:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Prom Corsage	rgb(224, 196, 239)	hsl(279, 57%, 85%)
Petrified Purple	rgb(159, 137, 197)	hsl(262, 34%, 65%)
Purple Zergling	rgb(167, 84, 132)	hsl(325, 33%, 49%)
Galaxy Express	rgb(70, 76, 148)	hsl(235, 36%, 43%)
Midnight Masquerade	rgb(39, 45, 66)	hsl(227, 26%, 21%)

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.

Aa8.64:1 Very good#E0C4EF on #272D42
Aa8.64:1 Very good#272D42 on #E0C4EF
Aa4.89:1 Good#E0C4EF on #464C94
Aa4.89:1 Good#464C94 on #E0C4EF
Aa4.45:1 Poor#9F89C5 on #272D42
Aa4.45:1 Poor#272D42 on #9F89C5
Aa3.14:1 Poor#E0C4EF on #A75484
Aa3.14:1 Poor#A75484 on #E0C4EF

Color blindness preview

CSS variables

/* Prom Corsage to Midnight Masquerade — https://swatchly.xyz/palette/e0c4ef-9f89c5-a75484-464c94-272d42 */
:root {
  --prom-corsage: #e0c4ef;
  --petrified-purple: #9f89c5;
  --purple-zergling: #a75484;
  --galaxy-express: #464c94;
  --midnight-masquerade: #272d42;
}

Tailwind CSS v4

/* Prom Corsage to Midnight Masquerade — https://swatchly.xyz/palette/e0c4ef-9f89c5-a75484-464c94-272d42 */
@theme {
  --color-prom-corsage: #e0c4ef;
  --color-prom-corsage-50: #f8eaff;
  --color-prom-corsage-100: #f0ddfa;
  --color-prom-corsage-200: #e0c4ef;
  --color-prom-corsage-300: #c9b0d6;
  --color-prom-corsage-400: #ab92b9;
  --color-prom-corsage-500: #91779f;
  --color-prom-corsage-600: #775f84;
  --color-prom-corsage-700: #604a6c;
  --color-prom-corsage-800: #4d3957;
  --color-prom-corsage-900: #3c2b44;
  --color-prom-corsage-950: #261a2c;
  --color-petrified-purple: #9f89c5;
  --color-petrified-purple-50: #f3eeff;
  --color-petrified-purple-100: #eadfff;
  --color-petrified-purple-200: #d7c5f7;
  --color-petrified-purple-300: #bfabe3;
  --color-petrified-purple-400: #9f89c5;
  --color-petrified-purple-500: #8670aa;
  --color-petrified-purple-600: #6d588f;
  --color-petrified-purple-700: #584576;
  --color-petrified-purple-800: #463560;
  --color-petrified-purple-900: #37294d;
  --color-petrified-purple-950: #231934;
  --color-purple-zergling: #a75484;
  --color-purple-zergling-50: #fff0f8;
  --color-purple-zergling-100: #ffe4f2;
  --color-purple-zergling-200: #ffc9e5;
  --color-purple-zergling-300: #f7abd4;
  --color-purple-zergling-400: #dd89b7;
  --color-purple-zergling-500: #c36d9e;
  --color-purple-zergling-600: #a75484;
  --color-purple-zergling-700: #893d6a;
  --color-purple-zergling-800: #6f2c54;
  --color-purple-zergling-900: #571e41;
  --color-purple-zergling-950: #391029;
  --color-galaxy-express: #464c94;
  --color-galaxy-express-50: #f2f4ff;
  --color-galaxy-express-100: #e6eaff;
  --color-galaxy-express-200: #cdd5ff;
  --color-galaxy-express-300: #b1bbff;
  --color-galaxy-express-400: #909ae6;
  --color-galaxy-express-500: #757ecb;
  --color-galaxy-express-600: #5c64ad;
  --color-galaxy-express-700: #464c94;
  --color-galaxy-express-800: #363b75;
  --color-galaxy-express-900: #292c5d;
  --color-galaxy-express-950: #181a3e;
  --color-midnight-masquerade: #272d42;
  --color-midnight-masquerade-50: #f1f5ff;
  --color-midnight-masquerade-100: #e5ebfc;
  --color-midnight-masquerade-200: #d0d7eb;
  --color-midnight-masquerade-300: #b9c0d7;
  --color-midnight-masquerade-400: #98a0b9;
  --color-midnight-masquerade-500: #7c839c;
  --color-midnight-masquerade-600: #616880;
  --color-midnight-masquerade-700: #4b5166;
  --color-midnight-masquerade-800: #383e4f;
  --color-midnight-masquerade-900: #272d42;
  --color-midnight-masquerade-950: #181b26;
}