Breaking the Ice to Cold Blue Color Palette

About this palette

Breaking the Ice to Cold Blue is a 4-color pastel, light palette: #BEE4FD (Breaking the Ice), #F7B9D1 (Pink Marshmallow), #FFEBF9 (Strawberry Bonbon), #8CDCDB (Cold Blue). It mixes blue, pink, white, turquoise tones and feels cool overall. The strongest text pairing is #F7B9D1 on #FFEBF9 with a contrast ratio of 1.44:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Breaking the Ice	rgb(190, 228, 253)	hsl(204, 94%, 87%)
Pink Marshmallow	rgb(247, 185, 209)	hsl(337, 79%, 85%)
Strawberry Bonbon	rgb(255, 235, 249)	hsl(318, 100%, 96%)
Cold Blue	rgb(140, 220, 219)	hsl(179, 53%, 71%)

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

/* Breaking the Ice to Cold Blue — https://swatchly.xyz/palette/bee4fd-f7b9d1-ffebf9-8cdcdb */
:root {
  --breaking-the-ice: #bee4fd;
  --pink-marshmallow: #f7b9d1;
  --strawberry-bonbon: #ffebf9;
  --cold-blue: #8cdcdb;
}

Tailwind CSS v4

/* Breaking the Ice to Cold Blue — https://swatchly.xyz/palette/bee4fd-f7b9d1-ffebf9-8cdcdb */
@theme {
  --color-breaking-the-ice: #bee4fd;
  --color-breaking-the-ice-50: #f4fbff;
  --color-breaking-the-ice-100: #e2f4ff;
  --color-breaking-the-ice-200: #bee4fd;
  --color-breaking-the-ice-300: #accbdf;
  --color-breaking-the-ice-400: #88abc1;
  --color-breaking-the-ice-500: #6b8ea5;
  --color-breaking-the-ice-600: #507388;
  --color-breaking-the-ice-700: #3b5a6e;
  --color-breaking-the-ice-800: #2b4657;
  --color-breaking-the-ice-900: #1f3644;
  --color-breaking-the-ice-950: #11212c;
  --color-pink-marshmallow: #f7b9d1;
  --color-pink-marshmallow-50: #ffe7f0;
  --color-pink-marshmallow-100: #ffd6e5;
  --color-pink-marshmallow-200: #f7b9d1;
  --color-pink-marshmallow-300: #dda7bc;
  --color-pink-marshmallow-400: #c1889e;
  --color-pink-marshmallow-500: #a66e85;
  --color-pink-marshmallow-600: #8b566c;
  --color-pink-marshmallow-700: #734357;
  --color-pink-marshmallow-800: #5d3345;
  --color-pink-marshmallow-900: #492635;
  --color-pink-marshmallow-950: #2f1621;
  --color-strawberry-bonbon: #ffebf9;
  --color-strawberry-bonbon-50: #ffebf9;
  --color-strawberry-bonbon-100: #f1e4ed;
  --color-strawberry-bonbon-200: #dfd0db;
  --color-strawberry-bonbon-300: #cabac5;
  --color-strawberry-bonbon-400: #ac9aa7;
  --color-strawberry-bonbon-500: #917f8c;
  --color-strawberry-bonbon-600: #776672;
  --color-strawberry-bonbon-700: #5f505b;
  --color-strawberry-bonbon-800: #4b3e47;
  --color-strawberry-bonbon-900: #3a2f37;
  --color-strawberry-bonbon-950: #241c22;
  --color-cold-blue: #8cdcdb;
  --color-cold-blue-50: #edfffe;
  --color-cold-blue-100: #d1fdfc;
  --color-cold-blue-200: #b7eceb;
  --color-cold-blue-300: #8cdcdb;
  --color-cold-blue-400: #6fb9b8;
  --color-cold-blue-500: #4c9c9b;
  --color-cold-blue-600: #2c7f7e;
  --color-cold-blue-700: #126565;
  --color-cold-blue-800: #004f4f;
  --color-cold-blue-900: #003b3b;
  --color-cold-blue-950: #002525;
}