Bubblegum Crisis to Mysterious Waters color palette

EFCBEEBubblegum Crisis CCA8C2Monet Magic 809073Crispy Crunch 686F51Herbal Whispers 204A48Mysterious Waters

Open in generator Export PNG, PDF, ASE…

About this palette

Bubblegum Crisis to Mysterious Waters is a 5-color muted, cool palette: #EFCBEE (Bubblegum Crisis), #CCA8C2 (Monet Magic), #809073 (Crispy Crunch), #686F51 (Herbal Whispers), #204A48 (Mysterious Waters). It mixes pink, green, turquoise tones and feels cool overall. The strongest text pairing is #EFCBEE on #204A48 with a contrast ratio of 6.77:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bubblegum Crisis	rgb(239, 203, 238)	hsl(302, 53%, 87%)
Monet Magic	rgb(204, 168, 194)	hsl(317, 26%, 73%)
Crispy Crunch	rgb(128, 144, 115)	hsl(93, 12%, 51%)
Herbal Whispers	rgb(104, 111, 81)	hsl(74, 16%, 38%)
Mysterious Waters	rgb(32, 74, 72)	hsl(177, 40%, 21%)

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.77:1 Good#EFCBEE on #204A48
Aa6.77:1 Good#204A48 on #EFCBEE
Aa4.66:1 Good#CCA8C2 on #204A48
Aa4.66:1 Good#204A48 on #CCA8C2
Aa3.63:1 Poor#EFCBEE on #686F51
Aa3.63:1 Poor#686F51 on #EFCBEE

Color blindness preview

CSS variables

/* Bubblegum Crisis to Mysterious Waters — https://swatchly.xyz/palette/efcbee-cca8c2-809073-686f51-204a48 */
:root {
  --bubblegum-crisis: #efcbee;
  --monet-magic: #cca8c2;
  --crispy-crunch: #809073;
  --herbal-whispers: #686f51;
  --mysterious-waters: #204a48;
}

Tailwind CSS v4

/* Bubblegum Crisis to Mysterious Waters — https://swatchly.xyz/palette/efcbee-cca8c2-809073-686f51-204a48 */
@theme {
  --color-bubblegum-crisis: #efcbee;
  --color-bubblegum-crisis-50: #fff1fe;
  --color-bubblegum-crisis-100: #fae4f9;
  --color-bubblegum-crisis-200: #efcbee;
  --color-bubblegum-crisis-300: #d5b7d4;
  --color-bubblegum-crisis-400: #b696b6;
  --color-bubblegum-crisis-500: #9b7a9a;
  --color-bubblegum-crisis-600: #7f607f;
  --color-bubblegum-crisis-700: #664a66;
  --color-bubblegum-crisis-800: #513951;
  --color-bubblegum-crisis-900: #3f2b3f;
  --color-bubblegum-crisis-950: #281928;
  --color-monet-magic: #cca8c2;
  --color-monet-magic-50: #fee7f7;
  --color-monet-magic-100: #f3daec;
  --color-monet-magic-200: #e0c3d8;
  --color-monet-magic-300: #cca8c2;
  --color-monet-magic-400: #ae8ca4;
  --color-monet-magic-500: #94728b;
  --color-monet-magic-600: #7a5b72;
  --color-monet-magic-700: #64475c;
  --color-monet-magic-800: #50374a;
  --color-monet-magic-900: #402b3b;
  --color-monet-magic-950: #291a25;
  --color-crispy-crunch: #809073;
  --color-crispy-crunch-50: #f0fae8;
  --color-crispy-crunch-100: #e6f1dd;
  --color-crispy-crunch-200: #d2dec8;
  --color-crispy-crunch-300: #bbc9af;
  --color-crispy-crunch-400: #9bab8e;
  --color-crispy-crunch-500: #809073;
  --color-crispy-crunch-600: #657559;
  --color-crispy-crunch-700: #4f5d44;
  --color-crispy-crunch-800: #3d4832;
  --color-crispy-crunch-900: #2e3825;
  --color-crispy-crunch-950: #1b2215;
  --color-herbal-whispers: #686f51;
  --color-herbal-whispers-50: #f3f8e5;
  --color-herbal-whispers-100: #e9eed9;
  --color-herbal-whispers-200: #d4dbc2;
  --color-herbal-whispers-300: #bdc4a8;
  --color-herbal-whispers-400: #9ea587;
  --color-herbal-whispers-500: #828a6b;
  --color-herbal-whispers-600: #686f51;
  --color-herbal-whispers-700: #52583d;
  --color-herbal-whispers-800: #40452e;
  --color-herbal-whispers-900: #313521;
  --color-herbal-whispers-950: #1e2113;
  --color-mysterious-waters: #204a48;
  --color-mysterious-waters-50: #e3fbf9;
  --color-mysterious-waters-100: #d6f2f0;
  --color-mysterious-waters-200: #bedfdd;
  --color-mysterious-waters-300: #a4cac7;
  --color-mysterious-waters-400: #81aba8;
  --color-mysterious-waters-500: #658f8d;
  --color-mysterious-waters-600: #4b7472;
  --color-mysterious-waters-700: #375d5b;
  --color-mysterious-waters-800: #204a48;
  --color-mysterious-waters-900: #1c3837;
  --color-mysterious-waters-950: #0f2322;
}