Bubblegum Crisis to Queen of Trees color palette

E9CFFFBubblegum Crisis 8FC58CExhilarating Green A48BB6Wizard’s Brew 507942Mana Tree 233A22Queen of Trees

Open in generator Export PNG, PDF, ASE…

About this palette

Bubblegum Crisis to Queen of Trees is a 5-color cool, earthy palette: #E9CFFF (Bubblegum Crisis), #8FC58C (Exhilarating Green), #A48BB6 (Wizard’s Brew), #507942 (Mana Tree), #233A22 (Queen of Trees). It mixes purple, green tones and feels cool overall. The strongest text pairing is #E9CFFF on #233A22 with a contrast ratio of 8.73:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bubblegum Crisis	rgb(233, 207, 255)	hsl(272, 100%, 91%)
Exhilarating Green	rgb(143, 197, 140)	hsl(117, 33%, 66%)
Wizard’s Brew	rgb(164, 139, 182)	hsl(275, 23%, 63%)
Mana Tree	rgb(80, 121, 66)	hsl(105, 29%, 37%)
Queen of Trees	rgb(35, 58, 34)	hsl(118, 26%, 18%)

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.73:1 Very good#E9CFFF on #233A22
Aa8.73:1 Very good#233A22 on #E9CFFF
Aa6.20:1 Good#8FC58C on #233A22
Aa6.20:1 Good#233A22 on #8FC58C
Aa4.09:1 Poor#A48BB6 on #233A22
Aa4.09:1 Poor#233A22 on #A48BB6
Aa3.57:1 Poor#E9CFFF on #507942
Aa3.57:1 Poor#507942 on #E9CFFF

Color blindness preview

CSS variables

/* Bubblegum Crisis to Queen of Trees — https://swatchly.xyz/palette/e9cfff-8fc58c-a48bb6-507942-233a22 */
:root {
  --bubblegum-crisis: #e9cfff;
  --exhilarating-green: #8fc58c;
  --wizard-s-brew: #a48bb6;
  --mana-tree: #507942;
  --queen-of-trees: #233a22;
}

Tailwind CSS v4

/* Bubblegum Crisis to Queen of Trees — https://swatchly.xyz/palette/e9cfff-8fc58c-a48bb6-507942-233a22 */
@theme {
  --color-bubblegum-crisis: #e9cfff;
  --color-bubblegum-crisis-50: #faf5ff;
  --color-bubblegum-crisis-100: #f5e9ff;
  --color-bubblegum-crisis-200: #e9cfff;
  --color-bubblegum-crisis-300: #cfbae1;
  --color-bubblegum-crisis-400: #b099c4;
  --color-bubblegum-crisis-500: #947ca8;
  --color-bubblegum-crisis-600: #79628c;
  --color-bubblegum-crisis-700: #614c71;
  --color-bubblegum-crisis-800: #4c395a;
  --color-bubblegum-crisis-900: #3b2b47;
  --color-bubblegum-crisis-950: #251a2e;
  --color-exhilarating-green: #8fc58c;
  --color-exhilarating-green-50: #d9f9d6;
  --color-exhilarating-green-100: #caefc7;
  --color-exhilarating-green-200: #afdbac;
  --color-exhilarating-green-300: #8fc58c;
  --color-exhilarating-green-400: #73a771;
  --color-exhilarating-green-500: #5a8d57;
  --color-exhilarating-green-600: #437441;
  --color-exhilarating-green-700: #315e30;
  --color-exhilarating-green-800: #234b22;
  --color-exhilarating-green-900: #193c19;
  --color-exhilarating-green-950: #0d260c;
  --color-wizard-s-brew: #a48bb6;
  --color-wizard-s-brew-50: #f7ecff;
  --color-wizard-s-brew-100: #efddfc;
  --color-wizard-s-brew-200: #dbc7ea;
  --color-wizard-s-brew-300: #c4add5;
  --color-wizard-s-brew-400: #a48bb6;
  --color-wizard-s-brew-500: #8a729c;
  --color-wizard-s-brew-600: #715a81;
  --color-wizard-s-brew-700: #5b476a;
  --color-wizard-s-brew-800: #493755;
  --color-wizard-s-brew-900: #392a44;
  --color-wizard-s-brew-950: #251a2d;
  --color-mana-tree: #507942;
  --color-mana-tree-50: #e5fedd;
  --color-mana-tree-100: #d9f5d0;
  --color-mana-tree-200: #c2e3b7;
  --color-mana-tree-300: #a8ce9c;
  --color-mana-tree-400: #86b078;
  --color-mana-tree-500: #6a945c;
  --color-mana-tree-600: #507942;
  --color-mana-tree-700: #3c612f;
  --color-mana-tree-800: #2c4c21;
  --color-mana-tree-900: #203b16;
  --color-mana-tree-950: #11250a;
  --color-queen-of-trees: #233a22;
  --color-queen-of-trees-50: #ebfae9;
  --color-queen-of-trees-100: #dff1de;
  --color-queen-of-trees-200: #cadec8;
  --color-queen-of-trees-300: #b1c9af;
  --color-queen-of-trees-400: #90aa8e;
  --color-queen-of-trees-500: #758f73;
  --color-queen-of-trees-600: #5b745a;
  --color-queen-of-trees-700: #465d45;
  --color-queen-of-trees-800: #354934;
  --color-queen-of-trees-900: #233a22;
  --color-queen-of-trees-950: #172317;
}