Candy Cane to Strawberry Bonbon Color Palette

About this palette

Candy Cane to Strawberry Bonbon is a 4-color pastel, light palette: #F8BBC0 (Candy Cane), #CFDEFF (Icy Plains), #E3E7C8 (Frost), #FEEAFF (Strawberry Bonbon). It mixes pink, blue, green, white tones and feels warm overall. The strongest text pairing is #F8BBC0 on #FEEAFF with a contrast ratio of 1.43:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Candy Cane	rgb(248, 187, 192)	hsl(355, 81%, 85%)
Icy Plains	rgb(207, 222, 255)	hsl(221, 100%, 91%)
Frost	rgb(227, 231, 200)	hsl(68, 39%, 85%)
Strawberry Bonbon	rgb(254, 234, 255)	hsl(297, 100%, 96%)

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

/* Candy Cane to Strawberry Bonbon — https://swatchly.xyz/palette/f8bbc0-cfdeff-e3e7c8-feeaff */
:root {
  --candy-cane: #f8bbc0;
  --icy-plains: #cfdeff;
  --frost: #e3e7c8;
  --strawberry-bonbon: #feeaff;
}

Tailwind CSS v4

/* Candy Cane to Strawberry Bonbon — https://swatchly.xyz/palette/f8bbc0-cfdeff-e3e7c8-feeaff */
@theme {
  --color-candy-cane: #f8bbc0;
  --color-candy-cane-50: #ffe8e9;
  --color-candy-cane-100: #ffd7da;
  --color-candy-cane-200: #f8bbc0;
  --color-candy-cane-300: #dea9ad;
  --color-candy-cane-400: #c28a8f;
  --color-candy-cane-500: #a77075;
  --color-candy-cane-600: #8c585d;
  --color-candy-cane-700: #734449;
  --color-candy-cane-800: #5e3539;
  --color-candy-cane-900: #4a272b;
  --color-candy-cane-950: #30171a;
  --color-icy-plains: #cfdeff;
  --color-icy-plains-50: #f7f9ff;
  --color-icy-plains-100: #eaf1ff;
  --color-icy-plains-200: #cfdeff;
  --color-icy-plains-300: #bac6e1;
  --color-icy-plains-400: #98a6c3;
  --color-icy-plains-500: #7b89a7;
  --color-icy-plains-600: #616d8a;
  --color-icy-plains-700: #4a5670;
  --color-icy-plains-800: #384258;
  --color-icy-plains-900: #2a3345;
  --color-icy-plains-950: #191f2d;
  --color-frost: #e3e7c8;
  --color-frost-50: #eef1de;
  --color-frost-100: #e3e7c8;
  --color-frost-200: #d1d4bc;
  --color-frost-300: #bcbfa5;
  --color-frost-400: #9da185;
  --color-frost-500: #83876b;
  --color-frost-600: #6a6d53;
  --color-frost-700: #55583f;
  --color-frost-800: #42452f;
  --color-frost-900: #333522;
  --color-frost-950: #1f2113;
  --color-strawberry-bonbon: #feeaff;
  --color-strawberry-bonbon-50: #feeaff;
  --color-strawberry-bonbon-100: #f0e3f1;
  --color-strawberry-bonbon-200: #ded0df;
  --color-strawberry-bonbon-300: #c9b9ca;
  --color-strawberry-bonbon-400: #ab9aac;
  --color-strawberry-bonbon-500: #917f92;
  --color-strawberry-bonbon-600: #766577;
  --color-strawberry-bonbon-700: #5f4f5f;
  --color-strawberry-bonbon-800: #4a3d4b;
  --color-strawberry-bonbon-900: #3a2e3a;
  --color-strawberry-bonbon-950: #241c25;
}