Bubblegum Kisses to Wicked Witch color palette

F38ADEBubblegum Kisses 008455Primal Green 532B5ARoyal Crown FFCCF8Kissed by Mist 002A19Haunted Forest 63995AWicked Witch

Open in generator Export PNG, PDF, ASE…

About this palette

Bubblegum Kisses to Wicked Witch is a 6-color cool palette: #F38ADE (Bubblegum Kisses), #008455 (Primal Green), #532B5A (Royal Crown), #FFCCF8 (Kissed by Mist), #002A19 (Haunted Forest), #63995A (Wicked Witch). It mixes pink, green, purple tones and feels cool overall. The strongest text pairing is #FFCCF8 on #002A19 with a contrast ratio of 11.33:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bubblegum Kisses	rgb(243, 138, 222)	hsl(312, 81%, 75%)
Primal Green	rgb(0, 132, 85)	hsl(159, 100%, 26%)
Royal Crown	rgb(83, 43, 90)	hsl(291, 35%, 26%)
Kissed by Mist	rgb(255, 204, 248)	hsl(308, 100%, 90%)
Haunted Forest	rgb(0, 42, 25)	hsl(156, 100%, 8%)
Wicked Witch	rgb(99, 153, 90)	hsl(111, 26%, 48%)

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.33:1 Very good#FFCCF8 on #002A19
Aa11.33:1 Very good#002A19 on #FFCCF8
Aa8.19:1 Very good#532B5A on #FFCCF8
Aa8.19:1 Very good#FFCCF8 on #532B5A
Aa7.06:1 Very good#F38ADE on #002A19
Aa7.06:1 Very good#002A19 on #F38ADE
Aa5.11:1 Good#F38ADE on #532B5A
Aa5.11:1 Good#532B5A on #F38ADE

Color blindness preview

CSS variables

/* Bubblegum Kisses to Wicked Witch — https://swatchly.xyz/palette/f38ade-008455-532b5a-ffccf8-002a19-63995a */
:root {
  --bubblegum-kisses: #f38ade;
  --primal-green: #008455;
  --royal-crown: #532b5a;
  --kissed-by-mist: #ffccf8;
  --haunted-forest: #002a19;
  --wicked-witch: #63995a;
}

Tailwind CSS v4

/* Bubblegum Kisses to Wicked Witch — https://swatchly.xyz/palette/f38ade-008455-532b5a-ffccf8-002a19-63995a */
@theme {
  --color-bubblegum-kisses: #f38ade;
  --color-bubblegum-kisses-50: #ffe6f9;
  --color-bubblegum-kisses-100: #ffd3f4;
  --color-bubblegum-kisses-200: #ffafed;
  --color-bubblegum-kisses-300: #f38ade;
  --color-bubblegum-kisses-400: #d26ebf;
  --color-bubblegum-kisses-500: #b753a5;
  --color-bubblegum-kisses-600: #9a3b8a;
  --color-bubblegum-kisses-700: #802872;
  --color-bubblegum-kisses-800: #681a5c;
  --color-bubblegum-kisses-900: #55114b;
  --color-bubblegum-kisses-950: #370630;
  --color-primal-green: #008455;
  --color-primal-green-50: #ddffeb;
  --color-primal-green-100: #c1fcda;
  --color-primal-green-200: #a4ecc4;
  --color-primal-green-300: #84d8ab;
  --color-primal-green-400: #59ba8a;
  --color-primal-green-500: #349f6e;
  --color-primal-green-600: #008455;
  --color-primal-green-700: #006943;
  --color-primal-green-800: #005233;
  --color-primal-green-900: #003f26;
  --color-primal-green-950: #002816;
  --color-royal-crown: #532b5a;
  --color-royal-crown-50: #fdf0ff;
  --color-royal-crown-100: #fbe1ff;
  --color-royal-crown-200: #edc9f3;
  --color-royal-crown-300: #d8b0df;
  --color-royal-crown-400: #b98dc1;
  --color-royal-crown-500: #9d71a5;
  --color-royal-crown-600: #805687;
  --color-royal-crown-700: #66416c;
  --color-royal-crown-800: #532b5a;
  --color-royal-crown-900: #3e2343;
  --color-royal-crown-950: #27142a;
  --color-kissed-by-mist: #ffccf8;
  --color-kissed-by-mist-50: #fff7fe;
  --color-kissed-by-mist-100: #ffeafc;
  --color-kissed-by-mist-200: #ffccf8;
  --color-kissed-by-mist-300: #e1b8db;
  --color-kissed-by-mist-400: #c395bd;
  --color-kissed-by-mist-500: #a678a0;
  --color-kissed-by-mist-600: #895d83;
  --color-kissed-by-mist-700: #6e466a;
  --color-kissed-by-mist-800: #573453;
  --color-kissed-by-mist-900: #442741;
  --color-kissed-by-mist-950: #2c1729;
  --color-haunted-forest: #002a19;
  --color-haunted-forest-50: #e4fcef;
  --color-haunted-forest-100: #d8f3e4;
  --color-haunted-forest-200: #c1e0cf;
  --color-haunted-forest-300: #a7cbb7;
  --color-haunted-forest-400: #84ac97;
  --color-haunted-forest-500: #69927c;
  --color-haunted-forest-600: #507763;
  --color-haunted-forest-700: #3c604d;
  --color-haunted-forest-800: #2c4c3c;
  --color-haunted-forest-900: #203c2e;
  --color-haunted-forest-950: #002a19;
  --color-wicked-witch: #63995a;
  --color-wicked-witch-50: #e3ffde;
  --color-wicked-witch-100: #d5f8cf;
  --color-wicked-witch-200: #bde7b6;
  --color-wicked-witch-300: #a3d29a;
  --color-wicked-witch-400: #80b477;
  --color-wicked-witch-500: #63995a;
  --color-wicked-witch-600: #497d40;
  --color-wicked-witch-700: #34642c;
  --color-wicked-witch-800: #254f1e;
  --color-wicked-witch-900: #193d13;
  --color-wicked-witch-950: #0c2608;
}