Bubblegum Beam to Botanical Night color palette

EE84B9Bubblegum Beam D36F2AChocolate 7B2A00Drip Coffee FFC6EBSugarwinkle 007B9APacific Pleasure 003C30Botanical Night

Open in generator Export PNG, PDF, ASE…

About this palette

Bubblegum Beam to Botanical Night is a 6-color warm palette: #EE84B9 (Bubblegum Beam), #D36F2A (Chocolate), #7B2A00 (Drip Coffee), #FFC6EB (Sugarwinkle), #007B9A (Pacific Pleasure), #003C30 (Botanical Night). It mixes pink, orange, brown, blue, turquoise tones and feels warm overall. The strongest text pairing is #FFC6EB on #003C30 with a contrast ratio of 8.60:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bubblegum Beam	rgb(238, 132, 185)	hsl(330, 76%, 73%)
Chocolate	rgb(211, 111, 42)	hsl(24, 67%, 50%)
Drip Coffee	rgb(123, 42, 0)	hsl(20, 100%, 24%)
Sugarwinkle	rgb(255, 198, 235)	hsl(321, 100%, 89%)
Pacific Pleasure	rgb(0, 123, 154)	hsl(192, 100%, 30%)
Botanical Night	rgb(0, 60, 48)	hsl(168, 100%, 12%)

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.60:1 Very good#FFC6EB on #003C30
Aa8.60:1 Very good#003C30 on #FFC6EB
Aa6.69:1 Good#7B2A00 on #FFC6EB
Aa6.69:1 Good#FFC6EB on #7B2A00
Aa5.11:1 Good#EE84B9 on #003C30
Aa5.11:1 Good#003C30 on #EE84B9
Aa3.97:1 Poor#EE84B9 on #7B2A00
Aa3.97:1 Poor#7B2A00 on #EE84B9

Color blindness preview

CSS variables

/* Bubblegum Beam to Botanical Night — https://swatchly.xyz/palette/ee84b9-d36f2a-7b2a00-ffc6eb-007b9a-003c30 */
:root {
  --bubblegum-beam: #ee84b9;
  --chocolate: #d36f2a;
  --drip-coffee: #7b2a00;
  --sugarwinkle: #ffc6eb;
  --pacific-pleasure: #007b9a;
  --botanical-night: #003c30;
}

Tailwind CSS v4

/* Bubblegum Beam to Botanical Night — https://swatchly.xyz/palette/ee84b9-d36f2a-7b2a00-ffc6eb-007b9a-003c30 */
@theme {
  --color-bubblegum-beam: #ee84b9;
  --color-bubblegum-beam-50: #fff6fa;
  --color-bubblegum-beam-100: #ffeaf3;
  --color-bubblegum-beam-200: #ffcfe5;
  --color-bubblegum-beam-300: #ffadd4;
  --color-bubblegum-beam-400: #ee84b9;
  --color-bubblegum-beam-500: #cd679b;
  --color-bubblegum-beam-600: #ad4a7e;
  --color-bubblegum-beam-700: #8e3365;
  --color-bubblegum-beam-800: #72224f;
  --color-bubblegum-beam-900: #59153c;
  --color-bubblegum-beam-950: #390925;
  --color-chocolate: #d36f2a;
  --color-chocolate-50: #fff4ee;
  --color-chocolate-100: #ffe9dd;
  --color-chocolate-200: #ffd1b7;
  --color-chocolate-300: #ffb286;
  --color-chocolate-400: #ed8c50;
  --color-chocolate-500: #d36f2a;
  --color-chocolate-600: #b15300;
  --color-chocolate-700: #8e4100;
  --color-chocolate-800: #6f3200;
  --color-chocolate-900: #562500;
  --color-chocolate-950: #371500;
  --color-drip-coffee: #7b2a00;
  --color-drip-coffee-50: #fff2ed;
  --color-drip-coffee-100: #ffe5db;
  --color-drip-coffee-200: #ffcab6;
  --color-drip-coffee-300: #fcac8d;
  --color-drip-coffee-400: #e18a69;
  --color-drip-coffee-500: #c66e4c;
  --color-drip-coffee-600: #a95533;
  --color-drip-coffee-700: #8e4020;
  --color-drip-coffee-800: #7b2a00;
  --color-drip-coffee-900: #5e2207;
  --color-drip-coffee-950: #3e1302;
  --color-sugarwinkle: #ffc6eb;
  --color-sugarwinkle-50: #fff3fa;
  --color-sugarwinkle-100: #ffe4f5;
  --color-sugarwinkle-200: #ffc6eb;
  --color-sugarwinkle-300: #e2b2d1;
  --color-sugarwinkle-400: #c491b2;
  --color-sugarwinkle-500: #a87497;
  --color-sugarwinkle-600: #8b5a7b;
  --color-sugarwinkle-700: #714563;
  --color-sugarwinkle-800: #5a334e;
  --color-sugarwinkle-900: #47263c;
  --color-sugarwinkle-950: #2d1626;
  --color-pacific-pleasure: #007b9a;
  --color-pacific-pleasure-50: #e8f8ff;
  --color-pacific-pleasure-100: #d1f2ff;
  --color-pacific-pleasure-200: #a2e4fd;
  --color-pacific-pleasure-300: #82cfec;
  --color-pacific-pleasure-400: #57b1d0;
  --color-pacific-pleasure-500: #3396b6;
  --color-pacific-pleasure-600: #007b9a;
  --color-pacific-pleasure-700: #00627b;
  --color-pacific-pleasure-800: #004c61;
  --color-pacific-pleasure-900: #003b4b;
  --color-pacific-pleasure-950: #002530;
  --color-botanical-night: #003c30;
  --color-botanical-night-50: #dffdf3;
  --color-botanical-night-100: #d3f4e9;
  --color-botanical-night-200: #bae2d5;
  --color-botanical-night-300: #9fccbe;
  --color-botanical-night-400: #7bae9f;
  --color-botanical-night-500: #5e9283;
  --color-botanical-night-600: #447769;
  --color-botanical-night-700: #305f53;
  --color-botanical-night-800: #214b40;
  --color-botanical-night-900: #003c30;
  --color-botanical-night-950: #0a241e;
}