Strawberry Bonbon to Summer of ’82 Color Palette

About this palette

Strawberry Bonbon to Summer of ’82 is a 4-color pastel, light palette: #FFECFE (Strawberry Bonbon), #F2BCC9 (Berries N’ Cream), #FFD2E8 (Light Pink), #78D3D7 (Summer of ’82). It mixes white, pink, turquoise tones and feels warm overall. The strongest text pairing is #FFECFE on #78D3D7 with a contrast ratio of 1.54:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Strawberry Bonbon	rgb(255, 236, 254)	hsl(303, 100%, 96%)
Berries N’ Cream	rgb(242, 188, 201)	hsl(346, 67%, 84%)
Light Pink	rgb(255, 210, 232)	hsl(331, 100%, 91%)
Summer of ’82	rgb(120, 211, 215)	hsl(183, 54%, 66%)

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.

Color blindness preview

CSS variables

/* Strawberry Bonbon to Summer of ’82 — https://swatchly.xyz/palette/ffecfe-f2bcc9-ffd2e8-78d3d7 */
:root {
  --strawberry-bonbon: #ffecfe;
  --berries-n-cream: #f2bcc9;
  --light-pink: #ffd2e8;
  --summer-of-82: #78d3d7;
}

Tailwind CSS v4

/* Strawberry Bonbon to Summer of ’82 — https://swatchly.xyz/palette/ffecfe-f2bcc9-ffd2e8-78d3d7 */
@theme {
  --color-strawberry-bonbon: #ffecfe;
  --color-strawberry-bonbon-50: #ffecfe;
  --color-strawberry-bonbon-100: #f1e5f0;
  --color-strawberry-bonbon-200: #dfd1de;
  --color-strawberry-bonbon-300: #cabac9;
  --color-strawberry-bonbon-400: #ab9bab;
  --color-strawberry-bonbon-500: #908090;
  --color-strawberry-bonbon-600: #766675;
  --color-strawberry-bonbon-700: #5e505e;
  --color-strawberry-bonbon-800: #4a3e4a;
  --color-strawberry-bonbon-900: #392f39;
  --color-strawberry-bonbon-950: #241c24;
  --color-berries-n-cream: #f2bcc9;
  --color-berries-n-cream-50: #ffe7ec;
  --color-berries-n-cream-100: #fdd7df;
  --color-berries-n-cream-200: #f2bcc9;
  --color-berries-n-cream-300: #d9aab5;
  --color-berries-n-cream-400: #bd8b97;
  --color-berries-n-cream-500: #a2717e;
  --color-berries-n-cream-600: #875965;
  --color-berries-n-cream-700: #6f4651;
  --color-berries-n-cream-800: #5a3640;
  --color-berries-n-cream-900: #472831;
  --color-berries-n-cream-950: #2e181e;
  --color-light-pink: #ffd2e8;
  --color-light-pink-50: #fffafc;
  --color-light-pink-100: #ffedf6;
  --color-light-pink-200: #ffd2e8;
  --color-light-pink-300: #e1bdce;
  --color-light-pink-400: #c29aae;
  --color-light-pink-500: #a57d91;
  --color-light-pink-600: #886175;
  --color-light-pink-700: #6d4a5c;
  --color-light-pink-800: #563847;
  --color-light-pink-900: #432a37;
  --color-light-pink-950: #2b1922;
  --color-summer-of-82: #78d3d7;
  --color-summer-of-82-50: #dafeff;
  --color-summer-of-82-100: #c2f7f9;
  --color-summer-of-82-200: #a5e6e8;
  --color-summer-of-82-300: #78d3d7;
  --color-summer-of-82-400: #5bb2b6;
  --color-summer-of-82-500: #38969b;
  --color-summer-of-82-600: #137b7f;
  --color-summer-of-82-700: #006266;
  --color-summer-of-82-800: #004d50;
  --color-summer-of-82-900: #003b3d;
  --color-summer-of-82-950: #002527;
}