Creamy Cloud Dreams to Whirlpool Color Palette

About this palette

Creamy Cloud Dreams to Whirlpool is a 4-color pastel, light, cool palette: #FFF5E2 (Creamy Cloud Dreams), #9BE7F9 (Winter Wizard), #C2F1CC (Pastel Mint), #A0D6C7 (Whirlpool). It mixes white, turquoise, green tones and feels cool overall. The strongest text pairing is #FFF5E2 on #A0D6C7 with a contrast ratio of 1.50:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Creamy Cloud Dreams	rgb(255, 245, 226)	hsl(39, 100%, 94%)
Winter Wizard	rgb(155, 231, 249)	hsl(191, 89%, 79%)
Pastel Mint	rgb(194, 241, 204)	hsl(133, 63%, 85%)
Whirlpool	rgb(160, 214, 199)	hsl(163, 40%, 73%)

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

/* Creamy Cloud Dreams to Whirlpool — https://swatchly.xyz/palette/fff5e2-9be7f9-c2f1cc-a0d6c7 */
:root {
  --creamy-cloud-dreams: #fff5e2;
  --winter-wizard: #9be7f9;
  --pastel-mint: #c2f1cc;
  --whirlpool: #a0d6c7;
}

Tailwind CSS v4

/* Creamy Cloud Dreams to Whirlpool — https://swatchly.xyz/palette/fff5e2-9be7f9-c2f1cc-a0d6c7 */
@theme {
  --color-creamy-cloud-dreams: #fff5e2;
  --color-creamy-cloud-dreams-50: #fff5e2;
  --color-creamy-cloud-dreams-100: #f1ebe0;
  --color-creamy-cloud-dreams-200: #ded7ca;
  --color-creamy-cloud-dreams-300: #c9c0b1;
  --color-creamy-cloud-dreams-400: #aaa190;
  --color-creamy-cloud-dreams-500: #8e8574;
  --color-creamy-cloud-dreams-600: #736b5b;
  --color-creamy-cloud-dreams-700: #5c5446;
  --color-creamy-cloud-dreams-800: #484235;
  --color-creamy-cloud-dreams-900: #383227;
  --color-creamy-cloud-dreams-950: #231f17;
  --color-winter-wizard: #9be7f9;
  --color-winter-wizard-50: #e7faff;
  --color-winter-wizard-100: #ccf5ff;
  --color-winter-wizard-200: #9be7f9;
  --color-winter-wizard-300: #8fcedd;
  --color-winter-wizard-400: #68afbf;
  --color-winter-wizard-500: #4893a4;
  --color-winter-wizard-600: #2b7888;
  --color-winter-wizard-700: #14606e;
  --color-winter-wizard-800: #024b58;
  --color-winter-wizard-900: #003a44;
  --color-winter-wizard-950: #00242c;
  --color-pastel-mint: #c2f1cc;
  --color-pastel-mint-50: #dbf7e1;
  --color-pastel-mint-100: #c2f1cc;
  --color-pastel-mint-200: #b8dcbf;
  --color-pastel-mint-300: #a0c7a8;
  --color-pastel-mint-400: #7faa89;
  --color-pastel-mint-500: #64906f;
  --color-pastel-mint-600: #4c7656;
  --color-pastel-mint-700: #396043;
  --color-pastel-mint-800: #294b32;
  --color-pastel-mint-900: #1d3a25;
  --color-pastel-mint-950: #102515;
  --color-whirlpool: #a0d6c7;
  --color-whirlpool-50: #e9fff8;
  --color-whirlpool-100: #daf9ef;
  --color-whirlpool-200: #c2e8dd;
  --color-whirlpool-300: #a0d6c7;
  --color-whirlpool-400: #82b4a6;
  --color-whirlpool-500: #639789;
  --color-whirlpool-600: #487b6e;
  --color-whirlpool-700: #336256;
  --color-whirlpool-800: #224c42;
  --color-whirlpool-900: #163a32;
  --color-whirlpool-950: #0b251f;
}