Water Nymph to Friendly Frost Color Palette

About this palette

Water Nymph to Friendly Frost is a 5-color pastel, light, cool palette: #81D0E4 (Water Nymph), #CEDEA6 (Zombie), #E7C4F8 (Neon Boneyard), #B9E7D9 (Water Leaf), #B7FBFF (Friendly Frost). It mixes blue, green, purple, turquoise tones and feels cool overall. The strongest text pairing is #81D0E4 on #B7FBFF with a contrast ratio of 1.51:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Water Nymph	rgb(129, 208, 228)	hsl(192, 65%, 70%)
Zombie	rgb(206, 222, 166)	hsl(77, 46%, 76%)
Neon Boneyard	rgb(231, 196, 248)	hsl(280, 79%, 87%)
Water Leaf	rgb(185, 231, 217)	hsl(162, 49%, 82%)
Friendly Frost	rgb(183, 251, 255)	hsl(183, 100%, 86%)

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 Friendly Frost — https://swatchly.xyz/palette/81d0e4-cedea6-e7c4f8-b9e7d9-b7fbff */
:root {
  --water-nymph: #81d0e4;
  --zombie: #cedea6;
  --neon-boneyard: #e7c4f8;
  --water-leaf: #b9e7d9;
  --friendly-frost: #b7fbff;
}

Tailwind CSS v4

/* Water Nymph to Friendly Frost — https://swatchly.xyz/palette/81d0e4-cedea6-e7c4f8-b9e7d9-b7fbff */
@theme {
  --color-water-nymph: #81d0e4;
  --color-water-nymph-50: #e6faff;
  --color-water-nymph-100: #ccf4ff;
  --color-water-nymph-200: #abe3f2;
  --color-water-nymph-300: #81d0e4;
  --color-water-nymph-400: #65afc2;
  --color-water-nymph-500: #4493a6;
  --color-water-nymph-600: #26788a;
  --color-water-nymph-700: #0c6070;
  --color-water-nymph-800: #004b59;
  --color-water-nymph-900: #003a45;
  --color-water-nymph-950: #00242c;
  --color-zombie: #cedea6;
  --color-zombie-50: #eff9da;
  --color-zombie-100: #e5efcc;
  --color-zombie-200: #cedea6;
  --color-zombie-300: #b9c697;
  --color-zombie-400: #99a874;
  --color-zombie-500: #7e8d58;
  --color-zombie-600: #65723f;
  --color-zombie-700: #4f5b2c;
  --color-zombie-800: #3d471e;
  --color-zombie-900: #2f3714;
  --color-zombie-950: #1c2209;
  --color-neon-boneyard: #e7c4f8;
  --color-neon-boneyard-50: #f9edff;
  --color-neon-boneyard-100: #f4deff;
  --color-neon-boneyard-200: #e7c4f8;
  --color-neon-boneyard-300: #ceb1dd;
  --color-neon-boneyard-400: #b191c0;
  --color-neon-boneyard-500: #9676a6;
  --color-neon-boneyard-600: #7b5d8a;
  --color-neon-boneyard-700: #644871;
  --color-neon-boneyard-800: #50375b;
  --color-neon-boneyard-900: #3e2948;
  --color-neon-boneyard-950: #27182e;
  --color-water-leaf: #b9e7d9;
  --color-water-leaf-50: #e6fef6;
  --color-water-leaf-100: #daf6ed;
  --color-water-leaf-200: #b9e7d9;
  --color-water-leaf-300: #a8cec2;
  --color-water-leaf-400: #84aea2;
  --color-water-leaf-500: #679286;
  --color-water-leaf-600: #4d776b;
  --color-water-leaf-700: #385f54;
  --color-water-leaf-800: #284a41;
  --color-water-leaf-900: #1c3932;
  --color-water-leaf-950: #0f241e;
  --color-friendly-frost: #b7fbff;
  --color-friendly-frost-50: #dffdff;
  --color-friendly-frost-100: #b7fbff;
  --color-friendly-frost-200: #b3e3e6;
  --color-friendly-frost-300: #96ced1;
  --color-friendly-frost-400: #70afb3;
  --color-friendly-frost-500: #519397;
  --color-friendly-frost-600: #36787c;
  --color-friendly-frost-700: #226063;
  --color-friendly-frost-800: #124b4f;
  --color-friendly-frost-900: #083a3d;
  --color-friendly-frost-950: #022527;
}