Frost Fairy to Cloud Break color palette

BDCCECFrost Fairy B7D4B3Nature F3CF95Sparkling Champagne FFDFD0Glazed Sugar F4F2FFCloud Break

About this palette

Frost Fairy to Cloud Break is a 5-color pastel, light palette: #BDCCEC (Frost Fairy), #B7D4B3 (Nature), #F3CF95 (Sparkling Champagne), #FFDFD0 (Glazed Sugar), #F4F2FF (Cloud Break). It mixes blue, green, yellow, orange, white tones and feels balanced overall. The strongest text pairing is #BDCCEC on #F4F2FF with a contrast ratio of 1.46:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Frost Fairy	rgb(189, 204, 236)	hsl(221, 55%, 83%)
Nature	rgb(183, 212, 179)	hsl(113, 28%, 77%)
Sparkling Champagne	rgb(243, 207, 149)	hsl(37, 80%, 77%)
Glazed Sugar	rgb(255, 223, 208)	hsl(19, 100%, 91%)
Cloud Break	rgb(244, 242, 255)	hsl(249, 100%, 97%)

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 Cloud Break — https://swatchly.xyz/palette/bdccec-b7d4b3-f3cf95-ffdfd0-f4f2ff */
:root {
  --frost-fairy: #bdccec;
  --nature: #b7d4b3;
  --sparkling-champagne: #f3cf95;
  --glazed-sugar: #ffdfd0;
  --cloud-break: #f4f2ff;
}

Tailwind CSS v4

/* Frost Fairy to Cloud Break — https://swatchly.xyz/palette/bdccec-b7d4b3-f3cf95-ffdfd0-f4f2ff */
@theme {
  --color-frost-fairy: #bdccec;
  --color-frost-fairy-50: #f9fbff;
  --color-frost-fairy-100: #edf3ff;
  --color-frost-fairy-200: #d6e1f7;
  --color-frost-fairy-300: #bdccec;
  --color-frost-fairy-400: #9daac7;
  --color-frost-fairy-500: #7f8dab;
  --color-frost-fairy-600: #63718d;
  --color-frost-fairy-700: #4c5872;
  --color-frost-fairy-800: #39445a;
  --color-frost-fairy-900: #2a3345;
  --color-frost-fairy-950: #191f2c;
  --color-nature: #b7d4b3;
  --color-nature-50: #f0ffee;
  --color-nature-100: #e6f7e4;
  --color-nature-200: #d2e6cf;
  --color-nature-300: #b7d4b3;
  --color-nature-400: #97b294;
  --color-nature-500: #7a9576;
  --color-nature-600: #5e785b;
  --color-nature-700: #485f45;
  --color-nature-800: #354a33;
  --color-nature-900: #273825;
  --color-nature-950: #172315;
  --color-sparkling-champagne: #f3cf95;
  --color-sparkling-champagne-50: #fff1dc;
  --color-sparkling-champagne-100: #fde6c1;
  --color-sparkling-champagne-200: #f3cf95;
  --color-sparkling-champagne-300: #d8ba89;
  --color-sparkling-champagne-400: #bb9a64;
  --color-sparkling-champagne-500: #a07f47;
  --color-sparkling-champagne-600: #85652e;
  --color-sparkling-champagne-700: #6c4f1b;
  --color-sparkling-champagne-800: #563d0d;
  --color-sparkling-champagne-900: #442e04;
  --color-sparkling-champagne-950: #2b1c01;
  --color-glazed-sugar: #ffdfd0;
  --color-glazed-sugar-50: #ffede5;
  --color-glazed-sugar-100: #ffdfd0;
  --color-glazed-sugar-200: #e6cec3;
  --color-glazed-sugar-300: #d2b8ab;
  --color-glazed-sugar-400: #b5988b;
  --color-glazed-sugar-500: #9a7e70;
  --color-glazed-sugar-600: #7f6458;
  --color-glazed-sugar-700: #674f43;
  --color-glazed-sugar-800: #523d33;
  --color-glazed-sugar-900: #402e26;
  --color-glazed-sugar-950: #291c16;
  --color-cloud-break: #f4f2ff;
  --color-cloud-break-50: #f4f2ff;
  --color-cloud-break-100: #eae9f1;
  --color-cloud-break-200: #d7d5df;
  --color-cloud-break-300: #c0bfc9;
  --color-cloud-break-400: #a19fab;
  --color-cloud-break-500: #868490;
  --color-cloud-break-600: #6c6a75;
  --color-cloud-break-700: #55545e;
  --color-cloud-break-800: #42414a;
  --color-cloud-break-900: #333239;
  --color-cloud-break-950: #1f1e24;
}