Prom Queen to Pastel Orange color palette

9F00CFProm Queen A75BDFLegendary Lavender E65A00Ferocious Fox 6E9DFFPolar Glow E974CBPink Orchid FF9948Pastel Orange

Open in generator Export PNG, PDF, ASE…

About this palette

Prom Queen to Pastel Orange is a 6-color vibrant, neon palette: #9F00CF (Prom Queen), #A75BDF (Legendary Lavender), #E65A00 (Ferocious Fox), #6E9DFF (Polar Glow), #E974CB (Pink Orchid), #FF9948 (Pastel Orange). It mixes purple, orange, blue, pink tones and feels balanced overall. The strongest text pairing is #9F00CF on #FF9948 with a contrast ratio of 2.93:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Prom Queen	rgb(159, 0, 207)	hsl(286, 100%, 41%)
Legendary Lavender	rgb(167, 91, 223)	hsl(275, 67%, 62%)
Ferocious Fox	rgb(230, 90, 0)	hsl(23, 100%, 45%)
Polar Glow	rgb(110, 157, 255)	hsl(221, 100%, 72%)
Pink Orchid	rgb(233, 116, 203)	hsl(315, 73%, 68%)
Pastel Orange	rgb(255, 153, 72)	hsl(27, 100%, 64%)

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

/* Prom Queen to Pastel Orange — https://swatchly.xyz/palette/9f00cf-a75bdf-e65a00-6e9dff-e974cb-ff9948 */
:root {
  --prom-queen: #9f00cf;
  --legendary-lavender: #a75bdf;
  --ferocious-fox: #e65a00;
  --polar-glow: #6e9dff;
  --pink-orchid: #e974cb;
  --pastel-orange: #ff9948;
}

Tailwind CSS v4

/* Prom Queen to Pastel Orange — https://swatchly.xyz/palette/9f00cf-a75bdf-e65a00-6e9dff-e974cb-ff9948 */
@theme {
  --color-prom-queen: #9f00cf;
  --color-prom-queen-50: #faf1ff;
  --color-prom-queen-100: #f6e3ff;
  --color-prom-queen-200: #ecc7ff;
  --color-prom-queen-300: #e2a4ff;
  --color-prom-queen-400: #d36bff;
  --color-prom-queen-500: #bc3aee;
  --color-prom-queen-600: #9f00cf;
  --color-prom-queen-700: #7f00a6;
  --color-prom-queen-800: #640084;
  --color-prom-queen-900: #4e0068;
  --color-prom-queen-950: #320044;
  --color-legendary-lavender: #a75bdf;
  --color-legendary-lavender-50: #f8f2ff;
  --color-legendary-lavender-100: #f2e5ff;
  --color-legendary-lavender-200: #e5caff;
  --color-legendary-lavender-300: #d7aaff;
  --color-legendary-lavender-400: #c27afb;
  --color-legendary-lavender-500: #a75bdf;
  --color-legendary-lavender-600: #8b3fbf;
  --color-legendary-lavender-700: #7129a0;
  --color-legendary-lavender-800: #5b1984;
  --color-legendary-lavender-900: #480d6a;
  --color-legendary-lavender-950: #2e0447;
  --color-ferocious-fox: #e65a00;
  --color-ferocious-fox-50: #fff4ef;
  --color-ferocious-fox-100: #ffe8df;
  --color-ferocious-fox-200: #ffcfbc;
  --color-ferocious-fox-300: #ffb08f;
  --color-ferocious-fox-400: #ff7c40;
  --color-ferocious-fox-500: #e65a00;
  --color-ferocious-fox-600: #ba4700;
  --color-ferocious-fox-700: #953700;
  --color-ferocious-fox-800: #752a00;
  --color-ferocious-fox-900: #5b1f00;
  --color-ferocious-fox-950: #3b1100;
  --color-polar-glow: #6e9dff;
  --color-polar-glow-50: #f0f5ff;
  --color-polar-glow-100: #e1ebff;
  --color-polar-glow-200: #c3d7ff;
  --color-polar-glow-300: #a0c0ff;
  --color-polar-glow-400: #6e9dff;
  --color-polar-glow-500: #5481e0;
  --color-polar-glow-600: #3c66c1;
  --color-polar-glow-700: #2a4fa2;
  --color-polar-glow-800: #1c3c85;
  --color-polar-glow-900: #132d6b;
  --color-polar-glow-950: #081b48;
  --color-pink-orchid: #e974cb;
  --color-pink-orchid-50: #fff2fb;
  --color-pink-orchid-100: #ffe4f6;
  --color-pink-orchid-200: #ffc5ed;
  --color-pink-orchid-300: #ff9fe4;
  --color-pink-orchid-400: #e974cb;
  --color-pink-orchid-500: #c957ad;
  --color-pink-orchid-600: #aa3b90;
  --color-pink-orchid-700: #8c2576;
  --color-pink-orchid-800: #71145e;
  --color-pink-orchid-900: #59084a;
  --color-pink-orchid-950: #3a022f;
  --color-pastel-orange: #ff9948;
  --color-pastel-orange-50: #ffebde;
  --color-pastel-orange-100: #ffdcc4;
  --color-pastel-orange-200: #ffbe91;
  --color-pastel-orange-300: #ff9948;
  --color-pastel-orange-400: #dd7c28;
  --color-pastel-orange-500: #bf6300;
  --color-pastel-orange-600: #9b5000;
  --color-pastel-orange-700: #7d3f00;
  --color-pastel-orange-800: #643100;
  --color-pastel-orange-900: #502600;
  --color-pastel-orange-950: #341600;
}