Bubblegum Baby Girl to Hyperpop Green color palette

BE5DEFBubblegum Baby Girl 514E00Godzilla 9144B6Fuchsia Pheromone 241C00Noir Mystique 00F8ACHyperpop Green

Open in generator Export PNG, PDF, ASE…

About this palette

Bubblegum Baby Girl to Hyperpop Green is a 5-color vibrant, cool palette: #BE5DEF (Bubblegum Baby Girl), #514E00 (Godzilla), #9144B6 (Fuchsia Pheromone), #241C00 (Noir Mystique), #00F8AC (Hyperpop Green). It mixes purple, brown, green tones and feels cool overall. The strongest text pairing is #241C00 on #00F8AC with a contrast ratio of 12.10:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bubblegum Baby Girl	rgb(190, 93, 239)	hsl(280, 82%, 65%)
Godzilla	rgb(81, 78, 0)	hsl(58, 100%, 16%)
Fuchsia Pheromone	rgb(145, 68, 182)	hsl(281, 46%, 49%)
Noir Mystique	rgb(36, 28, 0)	hsl(47, 100%, 7%)
Hyperpop Green	rgb(0, 248, 172)	hsl(162, 100%, 49%)

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.

Aa12.10:1 Super#241C00 on #00F8AC
Aa12.10:1 Super#00F8AC on #241C00
Aa6.16:1 Good#514E00 on #00F8AC
Aa6.16:1 Good#00F8AC on #514E00
Aa4.84:1 Good#BE5DEF on #241C00
Aa4.84:1 Good#241C00 on #BE5DEF
Aa4.05:1 Poor#9144B6 on #00F8AC
Aa4.05:1 Poor#00F8AC on #9144B6

Color blindness preview

CSS variables

/* Bubblegum Baby Girl to Hyperpop Green — https://swatchly.xyz/palette/be5def-514e00-9144b6-241c00-00f8ac */
:root {
  --bubblegum-baby-girl: #be5def;
  --godzilla: #514e00;
  --fuchsia-pheromone: #9144b6;
  --noir-mystique: #241c00;
  --hyperpop-green: #00f8ac;
}

Tailwind CSS v4

/* Bubblegum Baby Girl to Hyperpop Green — https://swatchly.xyz/palette/be5def-514e00-9144b6-241c00-00f8ac */
@theme {
  --color-bubblegum-baby-girl: #be5def;
  --color-bubblegum-baby-girl-50: #fbf4ff;
  --color-bubblegum-baby-girl-100: #f7eaff;
  --color-bubblegum-baby-girl-200: #edd1ff;
  --color-bubblegum-baby-girl-300: #e3b3ff;
  --color-bubblegum-baby-girl-400: #d382ff;
  --color-bubblegum-baby-girl-500: #be5def;
  --color-bubblegum-baby-girl-600: #9f3dce;
  --color-bubblegum-baby-girl-700: #8322ad;
  --color-bubblegum-baby-girl-800: #690b8e;
  --color-bubblegum-baby-girl-900: #520071;
  --color-bubblegum-baby-girl-950: #340049;
  --color-godzilla: #514e00;
  --color-godzilla-50: #f8f8d3;
  --color-godzilla-100: #efeec4;
  --color-godzilla-200: #dcdba9;
  --color-godzilla-300: #c8c78e;
  --color-godzilla-400: #aaa96a;
  --color-godzilla-500: #918f4d;
  --color-godzilla-600: #787634;
  --color-godzilla-700: #626020;
  --color-godzilla-800: #514e00;
  --color-godzilla-900: #3e3c06;
  --color-godzilla-950: #282601;
  --color-fuchsia-pheromone: #9144b6;
  --color-fuchsia-pheromone-50: #faf1ff;
  --color-fuchsia-pheromone-100: #f5e4ff;
  --color-fuchsia-pheromone-200: #ebc9ff;
  --color-fuchsia-pheromone-300: #e0a8ff;
  --color-fuchsia-pheromone-400: #c87eee;
  --color-fuchsia-pheromone-500: #ad60d3;
  --color-fuchsia-pheromone-600: #9144b6;
  --color-fuchsia-pheromone-700: #762f97;
  --color-fuchsia-pheromone-800: #5f1f7b;
  --color-fuchsia-pheromone-900: #4b1363;
  --color-fuchsia-pheromone-950: #300842;
  --color-noir-mystique: #241c00;
  --color-noir-mystique-50: #fbf5e2;
  --color-noir-mystique-100: #f1ebd6;
  --color-noir-mystique-200: #dfd8be;
  --color-noir-mystique-300: #c9c1a4;
  --color-noir-mystique-400: #aba282;
  --color-noir-mystique-500: #8f8666;
  --color-noir-mystique-600: #736b4c;
  --color-noir-mystique-700: #5c5438;
  --color-noir-mystique-800: #474028;
  --color-noir-mystique-900: #36301c;
  --color-noir-mystique-950: #241c00;
  --color-hyperpop-green: #00f8ac;
  --color-hyperpop-green-50: #d0ffe6;
  --color-hyperpop-green-100: #9fffd1;
  --color-hyperpop-green-200: #00f8ac;
  --color-hyperpop-green-300: #2edd9c;
  --color-hyperpop-green-400: #00bb81;
  --color-hyperpop-green-500: #009c6b;
  --color-hyperpop-green-600: #007e56;
  --color-hyperpop-green-700: #006544;
  --color-hyperpop-green-800: #005034;
  --color-hyperpop-green-900: #003e28;
  --color-hyperpop-green-950: #002717;
}