Water Nymph to Mint Coffee color palette

91CED5Water Nymph BCCEF9Frost Fairy C0E8E3On Cloud Nine FDD3BAGentle Caress FFE9E6Pink Swirl CDFFF5Mint Coffee

Open in generator Export PNG, PDF, ASE…

About this palette

Water Nymph to Mint Coffee is a 6-color pastel, light, cool palette: #91CED5 (Water Nymph), #BCCEF9 (Frost Fairy), #C0E8E3 (On Cloud Nine), #FDD3BA (Gentle Caress), #FFE9E6 (Pink Swirl), #CDFFF5 (Mint Coffee). It mixes turquoise, blue, orange, white tones and feels cool overall. The strongest text pairing is #91CED5 on #CDFFF5 with a contrast ratio of 1.60:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Water Nymph	rgb(145, 206, 213)	hsl(186, 45%, 70%)
Frost Fairy	rgb(188, 206, 249)	hsl(222, 84%, 86%)
On Cloud Nine	rgb(192, 232, 227)	hsl(172, 47%, 83%)
Gentle Caress	rgb(253, 211, 186)	hsl(22, 94%, 86%)
Pink Swirl	rgb(255, 233, 230)	hsl(7, 100%, 95%)
Mint Coffee	rgb(205, 255, 245)	hsl(168, 100%, 90%)

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

/* Water Nymph to Mint Coffee — https://swatchly.xyz/palette/91ced5-bccef9-c0e8e3-fdd3ba-ffe9e6-cdfff5 */
:root {
  --water-nymph: #91ced5;
  --frost-fairy: #bccef9;
  --on-cloud-nine: #c0e8e3;
  --gentle-caress: #fdd3ba;
  --pink-swirl: #ffe9e6;
  --mint-coffee: #cdfff5;
}

Tailwind CSS v4

/* Water Nymph to Mint Coffee — https://swatchly.xyz/palette/91ced5-bccef9-c0e8e3-fdd3ba-ffe9e6-cdfff5 */
@theme {
  --color-water-nymph: #91ced5;
  --color-water-nymph-50: #e0fcff;
  --color-water-nymph-100: #cff4f8;
  --color-water-nymph-200: #b5e2e7;
  --color-water-nymph-300: #91ced5;
  --color-water-nymph-400: #74adb4;
  --color-water-nymph-500: #569299;
  --color-water-nymph-600: #3c777d;
  --color-water-nymph-700: #285f65;
  --color-water-nymph-800: #194b50;
  --color-water-nymph-900: #0e3a3e;
  --color-water-nymph-950: #052427;
  --color-frost-fairy: #bccef9;
  --color-frost-fairy-50: #e8efff;
  --color-frost-fairy-100: #d8e3ff;
  --color-frost-fairy-200: #bccef9;
  --color-frost-fairy-300: #aab9de;
  --color-frost-fairy-400: #8b9bc3;
  --color-frost-fairy-500: #7181a9;
  --color-frost-fairy-600: #59688d;
  --color-frost-fairy-700: #465375;
  --color-frost-fairy-800: #36415f;
  --color-frost-fairy-900: #28324b;
  --color-frost-fairy-950: #181f31;
  --color-on-cloud-nine: #c0e8e3;
  --color-on-cloud-nine-50: #ebfffc;
  --color-on-cloud-nine-100: #e0f7f4;
  --color-on-cloud-nine-200: #c0e8e3;
  --color-on-cloud-nine-300: #aececa;
  --color-on-cloud-nine-400: #8aaeaa;
  --color-on-cloud-nine-500: #6d928e;
  --color-on-cloud-nine-600: #527672;
  --color-on-cloud-nine-700: #3c5e5a;
  --color-on-cloud-nine-800: #2c4945;
  --color-on-cloud-nine-900: #1f3835;
  --color-on-cloud-nine-950: #112321;
  --color-gentle-caress: #fdd3ba;
  --color-gentle-caress-50: #fff7f2;
  --color-gentle-caress-100: #ffebe0;
  --color-gentle-caress-200: #fdd3ba;
  --color-gentle-caress-300: #e0bda9;
  --color-gentle-caress-400: #c29c85;
  --color-gentle-caress-500: #a57f68;
  --color-gentle-caress-600: #88644e;
  --color-gentle-caress-700: #6e4e3a;
  --color-gentle-caress-800: #573b2a;
  --color-gentle-caress-900: #442d1e;
  --color-gentle-caress-950: #2c1b10;
  --color-pink-swirl: #ffe9e6;
  --color-pink-swirl-50: #fff6f4;
  --color-pink-swirl-100: #ffe9e6;
  --color-pink-swirl-200: #e6d6d4;
  --color-pink-swirl-300: #d0bebc;
  --color-pink-swirl-400: #b19e9b;
  --color-pink-swirl-500: #96827f;
  --color-pink-swirl-600: #7a6765;
  --color-pink-swirl-700: #61514f;
  --color-pink-swirl-800: #4d3e3c;
  --color-pink-swirl-900: #3c2f2e;
  --color-pink-swirl-950: #261d1c;
  --color-mint-coffee: #cdfff5;
  --color-mint-coffee-50: #cdfff5;
  --color-mint-coffee-100: #d2f1eb;
  --color-mint-coffee-200: #bbdfd8;
  --color-mint-coffee-300: #a1cac2;
  --color-mint-coffee-400: #7eaca3;
  --color-mint-coffee-500: #629188;
  --color-mint-coffee-600: #49766e;
  --color-mint-coffee-700: #355e57;
  --color-mint-coffee-800: #254a44;
  --color-mint-coffee-900: #1a3934;
  --color-mint-coffee-950: #0d2420;
}