Frost Fairy to Milk Foam Color Palette

About this palette

Frost Fairy to Milk Foam is a 5-color pastel, light, cool palette: #BCCBF8 (Frost Fairy), #FEBDA4 (Cream Puff), #F4D4FF (Kissed by Mist), #C5E9DD (Polar Expedition), #EDFFDF (Milk Foam). It mixes blue, orange, purple, turquoise, white tones and feels cool overall. The strongest text pairing is #FEBDA4 on #EDFFDF with a contrast ratio of 1.53:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Frost Fairy	rgb(188, 203, 248)	hsl(225, 81%, 85%)
Cream Puff	rgb(254, 189, 164)	hsl(17, 98%, 82%)
Kissed by Mist	rgb(244, 212, 255)	hsl(285, 100%, 92%)
Polar Expedition	rgb(197, 233, 221)	hsl(160, 45%, 84%)
Milk Foam	rgb(237, 255, 223)	hsl(94, 100%, 94%)

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

/* Frost Fairy to Milk Foam — https://swatchly.xyz/palette/bccbf8-febda4-f4d4ff-c5e9dd-edffdf */
:root {
  --frost-fairy: #bccbf8;
  --cream-puff: #febda4;
  --kissed-by-mist: #f4d4ff;
  --polar-expedition: #c5e9dd;
  --milk-foam: #edffdf;
}

Tailwind CSS v4

/* Frost Fairy to Milk Foam — https://swatchly.xyz/palette/bccbf8-febda4-f4d4ff-c5e9dd-edffdf */
@theme {
  --color-frost-fairy: #bccbf8;
  --color-frost-fairy-50: #e7edff;
  --color-frost-fairy-100: #d7e1ff;
  --color-frost-fairy-200: #bccbf8;
  --color-frost-fairy-300: #aab7de;
  --color-frost-fairy-400: #8b99c3;
  --color-frost-fairy-500: #727fa9;
  --color-frost-fairy-600: #5a678e;
  --color-frost-fairy-700: #475275;
  --color-frost-fairy-800: #374160;
  --color-frost-fairy-900: #29314c;
  --color-frost-fairy-950: #181e31;
  --color-cream-puff: #febda4;
  --color-cream-puff-50: #ffeae2;
  --color-cream-puff-100: #ffdacc;
  --color-cream-puff-200: #febda4;
  --color-cream-puff-300: #e3aa95;
  --color-cream-puff-400: #c78b74;
  --color-cream-puff-500: #ac715a;
  --color-cream-puff-600: #915943;
  --color-cream-puff-700: #774531;
  --color-cream-puff-800: #613523;
  --color-cream-puff-900: #4d2718;
  --color-cream-puff-950: #32170c;
  --color-kissed-by-mist: #f4d4ff;
  --color-kissed-by-mist-50: #fefaff;
  --color-kissed-by-mist-100: #fbeeff;
  --color-kissed-by-mist-200: #f4d4ff;
  --color-kissed-by-mist-300: #d8bee1;
  --color-kissed-by-mist-400: #b89cc2;
  --color-kissed-by-mist-500: #9b7ea5;
  --color-kissed-by-mist-600: #7f6388;
  --color-kissed-by-mist-700: #654c6e;
  --color-kissed-by-mist-800: #4f3956;
  --color-kissed-by-mist-900: #3d2b43;
  --color-kissed-by-mist-950: #27192b;
  --color-polar-expedition: #c5e9dd;
  --color-polar-expedition-50: #effff9;
  --color-polar-expedition-100: #e3f8f0;
  --color-polar-expedition-200: #c5e9dd;
  --color-polar-expedition-300: #b2cfc5;
  --color-polar-expedition-400: #8eafa4;
  --color-polar-expedition-500: #719288;
  --color-polar-expedition-600: #56766c;
  --color-polar-expedition-700: #405e54;
  --color-polar-expedition-800: #2f4941;
  --color-polar-expedition-900: #223831;
  --color-polar-expedition-950: #13231e;
  --color-milk-foam: #edffdf;
  --color-milk-foam-50: #edffdf;
  --color-milk-foam-100: #e7f2df;
  --color-milk-foam-200: #d1dec8;
  --color-milk-foam-300: #b9c8ae;
  --color-milk-foam-400: #99a88c;
  --color-milk-foam-500: #7d8d70;
  --color-milk-foam-600: #627256;
  --color-milk-foam-700: #4d5a42;
  --color-milk-foam-800: #3b4731;
  --color-milk-foam-900: #2d3724;
  --color-milk-foam-950: #1b2215;
}