Mental Floss to Blizzard Blue Color Palette

About this palette

Mental Floss to Blizzard Blue is a 4-color pastel, light palette: #E3B5C4 (Mental Floss), #FCCCE9 (Puff of Pink), #E9FFDA (Futon), #9BE6F1 (Blizzard Blue). It mixes pink, white, turquoise tones and feels balanced overall. The strongest text pairing is #E3B5C4 on #E9FFDA with a contrast ratio of 1.69:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mental Floss	rgb(227, 181, 196)	hsl(340, 45%, 80%)
Puff of Pink	rgb(252, 204, 233)	hsl(324, 89%, 89%)
Futon	rgb(233, 255, 218)	hsl(96, 100%, 93%)
Blizzard Blue	rgb(155, 230, 241)	hsl(188, 75%, 78%)

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

/* Mental Floss to Blizzard Blue — https://swatchly.xyz/palette/e3b5c4-fccce9-e9ffda-9be6f1 */
:root {
  --mental-floss: #e3b5c4;
  --puff-of-pink: #fccce9;
  --futon: #e9ffda;
  --blizzard-blue: #9be6f1;
}

Tailwind CSS v4

/* Mental Floss to Blizzard Blue — https://swatchly.xyz/palette/e3b5c4-fccce9-e9ffda-9be6f1 */
@theme {
  --color-mental-floss: #e3b5c4;
  --color-mental-floss-50: #fff3f7;
  --color-mental-floss-100: #ffe5ed;
  --color-mental-floss-200: #f2cfda;
  --color-mental-floss-300: #e3b5c4;
  --color-mental-floss-400: #c096a4;
  --color-mental-floss-500: #a57a88;
  --color-mental-floss-600: #88606d;
  --color-mental-floss-700: #6e4a56;
  --color-mental-floss-800: #573843;
  --color-mental-floss-900: #442a33;
  --color-mental-floss-950: #2c191f;
  --color-puff-of-pink: #fccce9;
  --color-puff-of-pink-50: #fff5fb;
  --color-puff-of-pink-100: #ffe8f5;
  --color-puff-of-pink-200: #fccce9;
  --color-puff-of-pink-300: #dfb8cf;
  --color-puff-of-pink-400: #c196b0;
  --color-puff-of-pink-500: #a47994;
  --color-puff-of-pink-600: #885e78;
  --color-puff-of-pink-700: #6d4860;
  --color-puff-of-pink-800: #57364b;
  --color-puff-of-pink-900: #44293a;
  --color-puff-of-pink-950: #2b1824;
  --color-futon: #e9ffda;
  --color-futon-50: #e9ffda;
  --color-futon-100: #e4f1db;
  --color-futon-200: #cfdec4;
  --color-futon-300: #b6c8aa;
  --color-futon-400: #96a988;
  --color-futon-500: #7a8e6c;
  --color-futon-600: #607353;
  --color-futon-700: #4b5b3f;
  --color-futon-800: #39482e;
  --color-futon-900: #2b3722;
  --color-futon-950: #1a2213;
  --color-blizzard-blue: #9be6f1;
  --color-blizzard-blue-50: #e0fbff;
  --color-blizzard-blue-100: #c8f5fb;
  --color-blizzard-blue-200: #9be6f1;
  --color-blizzard-blue-300: #8fcdd6;
  --color-blizzard-blue-400: #68afb9;
  --color-blizzard-blue-500: #49939d;
  --color-blizzard-blue-600: #2d7882;
  --color-blizzard-blue-700: #166069;
  --color-blizzard-blue-800: #054c54;
  --color-blizzard-blue-900: #003a41;
  --color-blizzard-blue-950: #002529;
}