Bubblegum Crisis to Cigar color palette

F3D0F1Bubblegum Crisis F69F66Shrimp Cocktail AB80B8Berries Galore 2283B1Mediterranean Blue 123900Melancholia 7D513BCigar

Open in generator Export PNG, PDF, ASE…

About this palette

Bubblegum Crisis to Cigar is a 6-color cool palette: #F3D0F1 (Bubblegum Crisis), #F69F66 (Shrimp Cocktail), #AB80B8 (Berries Galore), #2283B1 (Mediterranean Blue), #123900 (Melancholia), #7D513B (Cigar). It mixes pink, orange, purple, blue, green, brown tones and feels cool overall. The strongest text pairing is #F3D0F1 on #123900 with a contrast ratio of 9.38:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bubblegum Crisis	rgb(243, 208, 241)	hsl(303, 59%, 88%)
Shrimp Cocktail	rgb(246, 159, 102)	hsl(24, 89%, 68%)
Berries Galore	rgb(171, 128, 184)	hsl(286, 28%, 61%)
Mediterranean Blue	rgb(34, 131, 177)	hsl(199, 68%, 41%)
Melancholia	rgb(18, 57, 0)	hsl(101, 100%, 11%)
Cigar	rgb(125, 81, 59)	hsl(20, 36%, 36%)

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.

Aa9.38:1 Very good#F3D0F1 on #123900
Aa9.38:1 Very good#123900 on #F3D0F1
Aa6.25:1 Good#F69F66 on #123900
Aa6.25:1 Good#123900 on #F69F66
Aa4.85:1 Good#F3D0F1 on #7D513B
Aa4.85:1 Good#7D513B on #F3D0F1
Aa4.04:1 Poor#AB80B8 on #123900
Aa4.04:1 Poor#123900 on #AB80B8

Color blindness preview

CSS variables

/* Bubblegum Crisis to Cigar — https://swatchly.xyz/palette/f3d0f1-f69f66-ab80b8-2283b1-123900-7d513b */
:root {
  --bubblegum-crisis: #f3d0f1;
  --shrimp-cocktail: #f69f66;
  --berries-galore: #ab80b8;
  --mediterranean-blue: #2283b1;
  --melancholia: #123900;
  --cigar: #7d513b;
}

Tailwind CSS v4

/* Bubblegum Crisis to Cigar — https://swatchly.xyz/palette/f3d0f1-f69f66-ab80b8-2283b1-123900-7d513b */
@theme {
  --color-bubblegum-crisis: #f3d0f1;
  --color-bubblegum-crisis-50: #fff5fe;
  --color-bubblegum-crisis-100: #fde8fc;
  --color-bubblegum-crisis-200: #f3d0f1;
  --color-bubblegum-crisis-300: #d7bbd6;
  --color-bubblegum-crisis-400: #b999b7;
  --color-bubblegum-crisis-500: #9c7d9b;
  --color-bubblegum-crisis-600: #80627f;
  --color-bubblegum-crisis-700: #674b65;
  --color-bubblegum-crisis-800: #513950;
  --color-bubblegum-crisis-900: #3f2b3e;
  --color-bubblegum-crisis-950: #281a27;
  --color-shrimp-cocktail: #f69f66;
  --color-shrimp-cocktail-50: #ffece0;
  --color-shrimp-cocktail-100: #ffdcc7;
  --color-shrimp-cocktail-200: #ffbf97;
  --color-shrimp-cocktail-300: #f69f66;
  --color-shrimp-cocktail-400: #d4824b;
  --color-shrimp-cocktail-500: #b9682d;
  --color-shrimp-cocktail-600: #9c4f0f;
  --color-shrimp-cocktail-700: #803d00;
  --color-shrimp-cocktail-800: #672f00;
  --color-shrimp-cocktail-900: #522400;
  --color-shrimp-cocktail-950: #351500;
  --color-berries-galore: #ab80b8;
  --color-berries-galore-50: #fcf4ff;
  --color-berries-galore-100: #fae9ff;
  --color-berries-galore-200: #f1d1fb;
  --color-berries-galore-300: #dfbaea;
  --color-berries-galore-400: #c49bd0;
  --color-berries-galore-500: #ab80b8;
  --color-berries-galore-600: #8d6399;
  --color-berries-galore-700: #724c7d;
  --color-berries-galore-800: #5a3964;
  --color-berries-galore-900: #46294e;
  --color-berries-galore-950: #2c1732;
  --color-mediterranean-blue: #2283b1;
  --color-mediterranean-blue-50: #e6f5ff;
  --color-mediterranean-blue-100: #ccecff;
  --color-mediterranean-blue-200: #9bdaff;
  --color-mediterranean-blue-300: #75c2ee;
  --color-mediterranean-blue-400: #49a1d0;
  --color-mediterranean-blue-500: #2283b1;
  --color-mediterranean-blue-600: #006a94;
  --color-mediterranean-blue-700: #005477;
  --color-mediterranean-blue-800: #00425e;
  --color-mediterranean-blue-900: #00344b;
  --color-mediterranean-blue-950: #002131;
  --color-melancholia: #123900;
  --color-melancholia-50: #e5fedd;
  --color-melancholia-100: #d9f5cf;
  --color-melancholia-200: #c1e3b7;
  --color-melancholia-300: #a8ce9b;
  --color-melancholia-400: #85ae77;
  --color-melancholia-500: #68925a;
  --color-melancholia-600: #4e7640;
  --color-melancholia-700: #395d2d;
  --color-melancholia-800: #29481e;
  --color-melancholia-900: #123900;
  --color-melancholia-950: #0f2209;
  --color-cigar: #7d513b;
  --color-cigar-50: #fff2ec;
  --color-cigar-100: #ffe5d9;
  --color-cigar-200: #f6d0bd;
  --color-cigar-300: #e4b9a5;
  --color-cigar-400: #c99a83;
  --color-cigar-500: #af8068;
  --color-cigar-600: #946650;
  --color-cigar-700: #7d513b;
  --color-cigar-800: #633e2c;
  --color-cigar-900: #4e2f1f;
  --color-cigar-950: #331c11;
}