Bubblegum Crisis to Cold Press Coffee color palette

EED1FFBubblegum Crisis D7B1F2Violet Heaven 72B757Ultra Green 1B7F97Pacific Pleasure 993B01Hot Brown 662B10Cold Press Coffee

Open in generator Export PNG, PDF, ASE…

About this palette

Bubblegum Crisis to Cold Press Coffee is a 6-color cool palette: #EED1FF (Bubblegum Crisis), #D7B1F2 (Violet Heaven), #72B757 (Ultra Green), #1B7F97 (Pacific Pleasure), #993B01 (Hot Brown), #662B10 (Cold Press Coffee). It mixes purple, green, blue, brown tones and feels cool overall. The strongest text pairing is #EED1FF on #662B10 with a contrast ratio of 7.92:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bubblegum Crisis	rgb(238, 209, 255)	hsl(278, 100%, 91%)
Violet Heaven	rgb(215, 177, 242)	hsl(275, 71%, 82%)
Ultra Green	rgb(114, 183, 87)	hsl(103, 40%, 53%)
Pacific Pleasure	rgb(27, 127, 151)	hsl(192, 70%, 35%)
Hot Brown	rgb(153, 59, 1)	hsl(23, 99%, 30%)
Cold Press Coffee	rgb(102, 43, 16)	hsl(19, 73%, 23%)

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.

Aa7.92:1 Very good#EED1FF on #662B10
Aa7.92:1 Very good#662B10 on #EED1FF
Aa5.98:1 Good#D7B1F2 on #662B10
Aa5.98:1 Good#662B10 on #D7B1F2
Aa5.10:1 Good#EED1FF on #993B01
Aa5.10:1 Good#993B01 on #EED1FF
Aa4.50:1 Poor#72B757 on #662B10
Aa4.50:1 Poor#662B10 on #72B757

Color blindness preview

CSS variables

/* Bubblegum Crisis to Cold Press Coffee — https://swatchly.xyz/palette/eed1ff-d7b1f2-72b757-1b7f97-993b01-662b10 */
:root {
  --bubblegum-crisis: #eed1ff;
  --violet-heaven: #d7b1f2;
  --ultra-green: #72b757;
  --pacific-pleasure: #1b7f97;
  --hot-brown: #993b01;
  --cold-press-coffee: #662b10;
}

Tailwind CSS v4

/* Bubblegum Crisis to Cold Press Coffee — https://swatchly.xyz/palette/eed1ff-d7b1f2-72b757-1b7f97-993b01-662b10 */
@theme {
  --color-bubblegum-crisis: #eed1ff;
  --color-bubblegum-crisis-50: #fcf7ff;
  --color-bubblegum-crisis-100: #f8ebff;
  --color-bubblegum-crisis-200: #eed1ff;
  --color-bubblegum-crisis-300: #d3bce1;
  --color-bubblegum-crisis-400: #b49ac3;
  --color-bubblegum-crisis-500: #987da7;
  --color-bubblegum-crisis-600: #7c628a;
  --color-bubblegum-crisis-700: #634b70;
  --color-bubblegum-crisis-800: #4d3958;
  --color-bubblegum-crisis-900: #3c2b45;
  --color-bubblegum-crisis-950: #26192d;
  --color-violet-heaven: #d7b1f2;
  --color-violet-heaven-50: #faf3ff;
  --color-violet-heaven-100: #f4e6ff;
  --color-violet-heaven-200: #e8ccfd;
  --color-violet-heaven-300: #d7b1f2;
  --color-violet-heaven-400: #b692cf;
  --color-violet-heaven-500: #9a76b3;
  --color-violet-heaven-600: #7e5c96;
  --color-violet-heaven-700: #66467b;
  --color-violet-heaven-800: #513563;
  --color-violet-heaven-900: #3f274e;
  --color-violet-heaven-950: #281733;
  --color-ultra-green: #72b757;
  --color-ultra-green-50: #e4ffda;
  --color-ultra-green-100: #cefbbf;
  --color-ultra-green-200: #b5e9a2;
  --color-ultra-green-300: #99d583;
  --color-ultra-green-400: #72b757;
  --color-ultra-green-500: #579a3b;
  --color-ultra-green-600: #3d7e1d;
  --color-ultra-green-700: #296602;
  --color-ultra-green-800: #1e5000;
  --color-ultra-green-900: #153e00;
  --color-ultra-green-950: #0a2700;
  --color-pacific-pleasure: #1b7f97;
  --color-pacific-pleasure-50: #e6f9ff;
  --color-pacific-pleasure-100: #cff4ff;
  --color-pacific-pleasure-200: #a8e5f8;
  --color-pacific-pleasure-300: #89d1e7;
  --color-pacific-pleasure-400: #60b4cc;
  --color-pacific-pleasure-500: #3e99b2;
  --color-pacific-pleasure-600: #1b7f97;
  --color-pacific-pleasure-700: #00657b;
  --color-pacific-pleasure-800: #004f60;
  --color-pacific-pleasure-900: #003d4a;
  --color-pacific-pleasure-950: #002630;
  --color-hot-brown: #993b01;
  --color-hot-brown-50: #fff2ed;
  --color-hot-brown-100: #ffe5da;
  --color-hot-brown-200: #ffccb7;
  --color-hot-brown-300: #ffad8a;
  --color-hot-brown-400: #e9885e;
  --color-hot-brown-500: #cf6c40;
  --color-hot-brown-600: #b25224;
  --color-hot-brown-700: #993b01;
  --color-hot-brown-800: #792d00;
  --color-hot-brown-900: #5f2100;
  --color-hot-brown-950: #3e1300;
  --color-cold-press-coffee: #662b10;
  --color-cold-press-coffee-50: #fff2ed;
  --color-cold-press-coffee-100: #ffe5db;
  --color-cold-press-coffee-200: #ffcab5;
  --color-cold-press-coffee-300: #edb097;
  --color-cold-press-coffee-400: #d08e73;
  --color-cold-press-coffee-500: #b37156;
  --color-cold-press-coffee-600: #95573d;
  --color-cold-press-coffee-700: #79412a;
  --color-cold-press-coffee-800: #662b10;
  --color-cold-press-coffee-900: #4c2312;
  --color-cold-press-coffee-950: #311408;
}