Dr Who to Bubblegum Crisis color palette

745C88Dr Who C0A2DCEnchanted Lavender 422A4ESanctum of Shadows 352741Midnight Masquerade A17EBDWisteria E6CEFCBubblegum Crisis

Open in generator Export PNG, PDF, ASE…

About this palette

Dr Who to Bubblegum Crisis is a 6-color cool, monochromatic palette: #745C88 (Dr Who), #C0A2DC (Enchanted Lavender), #422A4E (Sanctum of Shadows), #352741 (Midnight Masquerade), #A17EBD (Wisteria), #E6CEFC (Bubblegum Crisis). It mixes purple tones and feels cool overall. The strongest text pairing is #352741 on #E6CEFC with a contrast ratio of 9.62:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dr Who	rgb(116, 92, 136)	hsl(273, 19%, 45%)
Enchanted Lavender	rgb(192, 162, 220)	hsl(271, 45%, 75%)
Sanctum of Shadows	rgb(66, 42, 78)	hsl(280, 30%, 24%)
Midnight Masquerade	rgb(53, 39, 65)	hsl(272, 25%, 20%)
Wisteria	rgb(161, 126, 189)	hsl(273, 32%, 62%)
Bubblegum Crisis	rgb(230, 206, 252)	hsl(271, 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.

Aa9.62:1 Very good#352741 on #E6CEFC
Aa9.62:1 Very good#E6CEFC on #352741
Aa8.73:1 Very good#422A4E on #E6CEFC
Aa8.73:1 Very good#E6CEFC on #422A4E
Aa6.22:1 Good#C0A2DC on #352741
Aa6.22:1 Good#352741 on #C0A2DC
Aa5.64:1 Good#C0A2DC on #422A4E
Aa5.64:1 Good#422A4E on #C0A2DC

Color blindness preview

CSS variables

/* Dr Who to Bubblegum Crisis — https://swatchly.xyz/palette/745c88-c0a2dc-422a4e-352741-a17ebd-e6cefc */
:root {
  --dr-who: #745c88;
  --enchanted-lavender: #c0a2dc;
  --sanctum-of-shadows: #422a4e;
  --midnight-masquerade: #352741;
  --wisteria: #a17ebd;
  --bubblegum-crisis: #e6cefc;
}

Tailwind CSS v4

/* Dr Who to Bubblegum Crisis — https://swatchly.xyz/palette/745c88-c0a2dc-422a4e-352741-a17ebd-e6cefc */
@theme {
  --color-dr-who: #745c88;
  --color-dr-who-50: #f9f2ff;
  --color-dr-who-100: #f2e4ff;
  --color-dr-who-200: #e0cdf2;
  --color-dr-who-300: #cbb4de;
  --color-dr-who-400: #ab93c1;
  --color-dr-who-500: #8f77a4;
  --color-dr-who-600: #745c88;
  --color-dr-who-700: #5d486e;
  --color-dr-who-800: #493758;
  --color-dr-who-900: #392946;
  --color-dr-who-950: #24182d;
  --color-enchanted-lavender: #c0a2dc;
  --color-enchanted-lavender-50: #fcf9ff;
  --color-enchanted-lavender-100: #f7f0ff;
  --color-enchanted-lavender-200: #ecd9ff;
  --color-enchanted-lavender-300: #dac2f2;
  --color-enchanted-lavender-400: #c0a2dc;
  --color-enchanted-lavender-500: #a184bc;
  --color-enchanted-lavender-600: #83679d;
  --color-enchanted-lavender-700: #694f80;
  --color-enchanted-lavender-800: #523b66;
  --color-enchanted-lavender-900: #3e2b4f;
  --color-enchanted-lavender-950: #261831;
  --color-sanctum-of-shadows: #422a4e;
  --color-sanctum-of-shadows-50: #faf1ff;
  --color-sanctum-of-shadows-100: #f5e4ff;
  --color-sanctum-of-shadows-200: #e4cef0;
  --color-sanctum-of-shadows-300: #cfb6dc;
  --color-sanctum-of-shadows-400: #b196bf;
  --color-sanctum-of-shadows-500: #967ba5;
  --color-sanctum-of-shadows-600: #7b6289;
  --color-sanctum-of-shadows-700: #644c70;
  --color-sanctum-of-shadows-800: #503b5b;
  --color-sanctum-of-shadows-900: #422a4e;
  --color-sanctum-of-shadows-950: #281b2f;
  --color-midnight-masquerade: #352741;
  --color-midnight-masquerade-50: #f9f2ff;
  --color-midnight-masquerade-100: #f1e6fb;
  --color-midnight-masquerade-200: #ded1ea;
  --color-midnight-masquerade-300: #c9bad6;
  --color-midnight-masquerade-400: #a999b8;
  --color-midnight-masquerade-500: #8d7d9b;
  --color-midnight-masquerade-600: #71627f;
  --color-midnight-masquerade-700: #594b65;
  --color-midnight-masquerade-800: #44394f;
  --color-midnight-masquerade-900: #352741;
  --color-midnight-masquerade-950: #1f1825;
  --color-wisteria: #a17ebd;
  --color-wisteria-50: #faf4ff;
  --color-wisteria-100: #f5e9ff;
  --color-wisteria-200: #ead1ff;
  --color-wisteria-300: #d7b9f0;
  --color-wisteria-400: #bb99d6;
  --color-wisteria-500: #a17ebd;
  --color-wisteria-600: #84629f;
  --color-wisteria-700: #6a4b82;
  --color-wisteria-800: #543869;
  --color-wisteria-900: #412952;
  --color-wisteria-950: #291835;
  --color-bubblegum-crisis: #e6cefc;
  --color-bubblegum-crisis-50: #f9f4ff;
  --color-bubblegum-crisis-100: #f3e7ff;
  --color-bubblegum-crisis-200: #e6cefc;
  --color-bubblegum-crisis-300: #cdb9df;
  --color-bubblegum-crisis-400: #ae98c2;
  --color-bubblegum-crisis-500: #937ca6;
  --color-bubblegum-crisis-600: #77628a;
  --color-bubblegum-crisis-700: #5f4c70;
  --color-bubblegum-crisis-800: #4b3a59;
  --color-bubblegum-crisis-900: #3a2c46;
  --color-bubblegum-crisis-950: #241a2d;
}