Imperial to Bubblegum Crisis Color Palette

About this palette

Imperial to Bubblegum Crisis is a 5-color cool, monochromatic, gradient palette: #622C77 (Imperial), #7C5689 (Muted Purple), #A062B5 (Prickly Purple), #D998FA (Lilac), #ECD0FC (Bubblegum Crisis). It mixes purple tones and feels cool overall. The strongest text pairing is #622C77 on #ECD0FC with a contrast ratio of 6.99:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Imperial	rgb(98, 44, 119)	hsl(283, 46%, 32%)
Muted Purple	rgb(124, 86, 137)	hsl(285, 23%, 44%)
Prickly Purple	rgb(160, 98, 181)	hsl(285, 36%, 55%)
Lilac	rgb(217, 152, 250)	hsl(280, 91%, 79%)
Bubblegum Crisis	rgb(236, 208, 252)	hsl(278, 88%, 90%)

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.

Aa6.99:1 Good#622C77 on #ECD0FC
Aa6.99:1 Good#ECD0FC on #622C77
Aa4.58:1 Good#622C77 on #D998FA
Aa4.58:1 Good#D998FA on #622C77
Aa4.22:1 Poor#7C5689 on #ECD0FC
Aa4.22:1 Poor#ECD0FC on #7C5689
Aa3.05:1 Poor#A062B5 on #ECD0FC
Aa3.05:1 Poor#ECD0FC on #A062B5

Color blindness preview

CSS variables

/* Imperial to Bubblegum Crisis — https://swatchly.xyz/palette/622c77-7c5689-a062b5-d998fa-ecd0fc */
:root {
  --imperial: #622c77;
  --muted-purple: #7c5689;
  --prickly-purple: #a062b5;
  --lilac: #d998fa;
  --bubblegum-crisis: #ecd0fc;
}

Tailwind CSS v4

/* Imperial to Bubblegum Crisis — https://swatchly.xyz/palette/622c77-7c5689-a062b5-d998fa-ecd0fc */
@theme {
  --color-imperial: #622c77;
  --color-imperial-50: #fbf1ff;
  --color-imperial-100: #f6e3ff;
  --color-imperial-200: #eec7ff;
  --color-imperial-300: #deacf3;
  --color-imperial-400: #c18bd9;
  --color-imperial-500: #a76fbf;
  --color-imperial-600: #8c56a3;
  --color-imperial-700: #744189;
  --color-imperial-800: #622c77;
  --color-imperial-900: #4b235a;
  --color-imperial-950: #31143c;
  --color-muted-purple: #7c5689;
  --color-muted-purple-50: #fbf1ff;
  --color-muted-purple-100: #f7e1ff;
  --color-muted-purple-200: #e8c8f4;
  --color-muted-purple-300: #d3afe0;
  --color-muted-purple-400: #b48dc2;
  --color-muted-purple-500: #9871a6;
  --color-muted-purple-600: #7c5689;
  --color-muted-purple-700: #64426f;
  --color-muted-purple-800: #4f3259;
  --color-muted-purple-900: #3e2546;
  --color-muted-purple-950: #27162d;
  --color-prickly-purple: #a062b5;
  --color-prickly-purple-50: #fbefff;
  --color-prickly-purple-100: #f7dfff;
  --color-prickly-purple-200: #eec0ff;
  --color-prickly-purple-300: #dca3ef;
  --color-prickly-purple-400: #bd7fd2;
  --color-prickly-purple-500: #a062b5;
  --color-prickly-purple-600: #854a98;
  --color-prickly-purple-700: #6c367e;
  --color-prickly-purple-800: #572766;
  --color-prickly-purple-900: #451c52;
  --color-prickly-purple-950: #2d0f36;
  --color-lilac: #d998fa;
  --color-lilac-50: #f7eaff;
  --color-lilac-100: #f2daff;
  --color-lilac-200: #e7bbff;
  --color-lilac-300: #d998fa;
  --color-lilac-400: #ba7bd9;
  --color-lilac-500: #9f61be;
  --color-lilac-600: #8548a1;
  --color-lilac-700: #6d3587;
  --color-lilac-800: #58276e;
  --color-lilac-900: #461c5a;
  --color-lilac-950: #2d0e3b;
  --color-bubblegum-crisis: #ecd0fc;
  --color-bubblegum-crisis-50: #fcf6ff;
  --color-bubblegum-crisis-100: #f7e9ff;
  --color-bubblegum-crisis-200: #ecd0fc;
  --color-bubblegum-crisis-300: #d2bbdf;
  --color-bubblegum-crisis-400: #b399c1;
  --color-bubblegum-crisis-500: #977da5;
  --color-bubblegum-crisis-600: #7b6288;
  --color-bubblegum-crisis-700: #624c6e;
  --color-bubblegum-crisis-800: #4d3957;
  --color-bubblegum-crisis-900: #3c2b45;
  --color-bubblegum-crisis-950: #261a2c;
}