Frost Fairy to Bambino Color Palette

About this palette

Frost Fairy to Bambino is a 4-color pastel, light, cool palette: #C2CFF4 (Frost Fairy), #FFE7E8 (Porcelain Skin), #C9F4F1 (Vaporised), #98D5CB (Bambino). It mixes blue, white, turquoise tones and feels cool overall. The strongest text pairing is #FFE7E8 on #98D5CB with a contrast ratio of 1.40:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Frost Fairy	rgb(194, 207, 244)	hsl(224, 69%, 86%)
Porcelain Skin	rgb(255, 231, 232)	hsl(358, 100%, 95%)
Vaporised	rgb(201, 244, 241)	hsl(176, 66%, 87%)
Bambino	rgb(152, 213, 203)	hsl(170, 42%, 72%)

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 Bambino — https://swatchly.xyz/palette/c2cff4-ffe7e8-c9f4f1-98d5cb */
:root {
  --frost-fairy: #c2cff4;
  --porcelain-skin: #ffe7e8;
  --vaporised: #c9f4f1;
  --bambino: #98d5cb;
}

Tailwind CSS v4

/* Frost Fairy to Bambino — https://swatchly.xyz/palette/c2cff4-ffe7e8-c9f4f1-98d5cb */
@theme {
  --color-frost-fairy: #c2cff4;
  --color-frost-fairy-50: #eaf0ff;
  --color-frost-fairy-100: #dbe4fd;
  --color-frost-fairy-200: #c2cff4;
  --color-frost-fairy-300: #afbada;
  --color-frost-fairy-400: #909cbe;
  --color-frost-fairy-500: #7682a4;
  --color-frost-fairy-600: #5e6888;
  --color-frost-fairy-700: #495370;
  --color-frost-fairy-800: #39415b;
  --color-frost-fairy-900: #2b3247;
  --color-frost-fairy-950: #1a1f2e;
  --color-porcelain-skin: #ffe7e8;
  --color-porcelain-skin-50: #fff4f5;
  --color-porcelain-skin-100: #ffe7e8;
  --color-porcelain-skin-200: #e6d5d5;
  --color-porcelain-skin-300: #d1bdbe;
  --color-porcelain-skin-400: #b29d9e;
  --color-porcelain-skin-500: #968182;
  --color-porcelain-skin-600: #7b6667;
  --color-porcelain-skin-700: #625051;
  --color-porcelain-skin-800: #4e3e3f;
  --color-porcelain-skin-900: #3c2f30;
  --color-porcelain-skin-950: #261c1d;
  --color-vaporised: #c9f4f1;
  --color-vaporised-50: #e2faf8;
  --color-vaporised-100: #c9f4f1;
  --color-vaporised-200: #bfdedc;
  --color-vaporised-300: #a5c8c6;
  --color-vaporised-400: #83aaa7;
  --color-vaporised-500: #678f8c;
  --color-vaporised-600: #4d7472;
  --color-vaporised-700: #395d5b;
  --color-vaporised-800: #2a4947;
  --color-vaporised-900: #1e3837;
  --color-vaporised-950: #102322;
  --color-bambino: #98d5cb;
  --color-bambino-50: #e4fffa;
  --color-bambino-100: #d5f8f2;
  --color-bambino-200: #bce7df;
  --color-bambino-300: #98d5cb;
  --color-bambino-400: #7bb3aa;
  --color-bambino-500: #5c978e;
  --color-bambino-600: #407b72;
  --color-bambino-700: #2b625a;
  --color-bambino-800: #1b4d46;
  --color-bambino-900: #103b35;
  --color-bambino-950: #062521;
}