Frost Fairy to Fairy Dust Color Palette

About this palette

Frost Fairy to Fairy Dust is a 4-color pastel, light palette: #B6D2FF (Frost Fairy), #BAE7E7 (On Cloud Nine), #BFC49C (Beige and Sage), #FFE7F3 (Fairy Dust). It mixes blue, turquoise, green, white tones and feels cool overall. The strongest text pairing is #BFC49C on #FFE7F3 with a contrast ratio of 1.55:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Frost Fairy	rgb(182, 210, 255)	hsl(217, 100%, 86%)
On Cloud Nine	rgb(186, 231, 231)	hsl(180, 48%, 82%)
Beige and Sage	rgb(191, 196, 156)	hsl(68, 25%, 69%)
Fairy Dust	rgb(255, 231, 243)	hsl(330, 100%, 95%)

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 Fairy Dust — https://swatchly.xyz/palette/b6d2ff-bae7e7-bfc49c-ffe7f3 */
:root {
  --frost-fairy: #b6d2ff;
  --on-cloud-nine: #bae7e7;
  --beige-and-sage: #bfc49c;
  --fairy-dust: #ffe7f3;
}

Tailwind CSS v4

/* Frost Fairy to Fairy Dust — https://swatchly.xyz/palette/b6d2ff-bae7e7-bfc49c-ffe7f3 */
@theme {
  --color-frost-fairy: #b6d2ff;
  --color-frost-fairy-50: #e8f1ff;
  --color-frost-fairy-100: #d7e6ff;
  --color-frost-fairy-200: #b6d2ff;
  --color-frost-fairy-300: #a4bde3;
  --color-frost-fairy-400: #859ec8;
  --color-frost-fairy-500: #6a84ad;
  --color-frost-fairy-600: #526a91;
  --color-frost-fairy-700: #3f5578;
  --color-frost-fairy-800: #304362;
  --color-frost-fairy-900: #23334d;
  --color-frost-fairy-950: #141f32;
  --color-on-cloud-nine: #bae7e7;
  --color-on-cloud-nine-50: #e7fefe;
  --color-on-cloud-nine-100: #dcf6f6;
  --color-on-cloud-nine-200: #bae7e7;
  --color-on-cloud-nine-300: #a9cece;
  --color-on-cloud-nine-400: #85aeae;
  --color-on-cloud-nine-500: #679292;
  --color-on-cloud-nine-600: #4d7676;
  --color-on-cloud-nine-700: #385e5e;
  --color-on-cloud-nine-800: #284949;
  --color-on-cloud-nine-900: #1c3839;
  --color-on-cloud-nine-950: #0f2323;
  --color-beige-and-sage: #bfc49c;
  --color-beige-and-sage-50: #f4f7e0;
  --color-beige-and-sage-100: #eaedd4;
  --color-beige-and-sage-200: #d6dabc;
  --color-beige-and-sage-300: #bfc49c;
  --color-beige-and-sage-400: #a0a47f;
  --color-beige-and-sage-500: #858963;
  --color-beige-and-sage-600: #6b6f4b;
  --color-beige-and-sage-700: #555837;
  --color-beige-and-sage-800: #424528;
  --color-beige-and-sage-900: #33351d;
  --color-beige-and-sage-950: #1f210f;
  --color-fairy-dust: #ffe7f3;
  --color-fairy-dust-50: #fff5fa;
  --color-fairy-dust-100: #ffe7f3;
  --color-fairy-dust-200: #e6d5dd;
  --color-fairy-dust-300: #d0bdc7;
  --color-fairy-dust-400: #b19ca7;
  --color-fairy-dust-500: #96808b;
  --color-fairy-dust-600: #7a6670;
  --color-fairy-dust-700: #614f59;
  --color-fairy-dust-800: #4d3d45;
  --color-fairy-dust-900: #3c2e35;
  --color-fairy-dust-950: #261c21;
}