Bubblegum Crisis to Black Market Color Palette

About this palette

Bubblegum Crisis to Black Market is a 4-color cool palette: #E3D2FF (Bubblegum Crisis), #929A2B (Papyrus), #506217 (Forestial Outpost), #251B3C (Black Market). It mixes purple, green tones and feels cool overall. The strongest text pairing is #E3D2FF on #251B3C with a contrast ratio of 11.48:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bubblegum Crisis	rgb(227, 210, 255)	hsl(263, 100%, 91%)
Papyrus	rgb(146, 154, 43)	hsl(64, 56%, 39%)
Forestial Outpost	rgb(80, 98, 23)	hsl(74, 62%, 24%)
Black Market	rgb(37, 27, 60)	hsl(258, 38%, 17%)

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.

Aa11.48:1 Very good#E3D2FF on #251B3C
Aa11.48:1 Very good#251B3C on #E3D2FF
Aa5.29:1 Good#929A2B on #251B3C
Aa5.29:1 Good#251B3C on #929A2B
Aa4.81:1 Good#E3D2FF on #506217
Aa4.81:1 Good#506217 on #E3D2FF

Color blindness preview

CSS variables

/* Bubblegum Crisis to Black Market — https://swatchly.xyz/palette/e3d2ff-929a2b-506217-251b3c */
:root {
  --bubblegum-crisis: #e3d2ff;
  --papyrus: #929a2b;
  --forestial-outpost: #506217;
  --black-market: #251b3c;
}

Tailwind CSS v4

/* Bubblegum Crisis to Black Market — https://swatchly.xyz/palette/e3d2ff-929a2b-506217-251b3c */
@theme {
  --color-bubblegum-crisis: #e3d2ff;
  --color-bubblegum-crisis-50: #f9f6ff;
  --color-bubblegum-crisis-100: #f2eaff;
  --color-bubblegum-crisis-200: #e3d2ff;
  --color-bubblegum-crisis-300: #cabce1;
  --color-bubblegum-crisis-400: #ab9bc4;
  --color-bubblegum-crisis-500: #8f7fa8;
  --color-bubblegum-crisis-600: #74648b;
  --color-bubblegum-crisis-700: #5c4e71;
  --color-bubblegum-crisis-800: #483b5a;
  --color-bubblegum-crisis-900: #372d47;
  --color-bubblegum-crisis-950: #231b2e;
  --color-papyrus: #929a2b;
  --color-papyrus-50: #f6fdc7;
  --color-papyrus-100: #eff6ba;
  --color-papyrus-200: #dde59e;
  --color-papyrus-300: #c9d17e;
  --color-papyrus-400: #abb453;
  --color-papyrus-500: #929a2b;
  --color-papyrus-600: #767c00;
  --color-papyrus-700: #5d6200;
  --color-papyrus-800: #484c00;
  --color-papyrus-900: #363a00;
  --color-papyrus-950: #212300;
  --color-forestial-outpost: #506217;
  --color-forestial-outpost-50: #eefcd3;
  --color-forestial-outpost-100: #e4f3c5;
  --color-forestial-outpost-200: #d0e1ab;
  --color-forestial-outpost-300: #b9cc8e;
  --color-forestial-outpost-400: #99ae69;
  --color-forestial-outpost-500: #7f934b;
  --color-forestial-outpost-600: #667931;
  --color-forestial-outpost-700: #506217;
  --color-forestial-outpost-800: #3e4d0e;
  --color-forestial-outpost-900: #2f3b04;
  --color-forestial-outpost-950: #1c2501;
  --color-black-market: #251b3c;
  --color-black-market-50: #f6f3ff;
  --color-black-market-100: #ece7ff;
  --color-black-market-200: #d9d2f3;
  --color-black-market-300: #c3bbe0;
  --color-black-market-400: #a49bc3;
  --color-black-market-500: #8980a8;
  --color-black-market-600: #70668d;
  --color-black-market-700: #595174;
  --color-black-market-800: #473f5e;
  --color-black-market-900: #37314b;
  --color-black-market-950: #251b3c;
}