Water Nymph to Cold Canada Color Palette

About this palette

Water Nymph to Cold Canada is a 4-color pastel, light, cool, gradient palette: #89CFD4 (Water Nymph), #CCE6A8 (Mermaid Tears), #B8E0EE (Polar Wind), #DFFDFF (Cold Canada). It mixes turquoise, green, blue, white tones and feels cool overall. The strongest text pairing is #89CFD4 on #DFFDFF with a contrast ratio of 1.64:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Water Nymph	rgb(137, 207, 212)	hsl(184, 47%, 68%)
Mermaid Tears	rgb(204, 230, 168)	hsl(85, 55%, 78%)
Polar Wind	rgb(184, 224, 238)	hsl(196, 61%, 83%)
Cold Canada	rgb(223, 253, 255)	hsl(184, 100%, 94%)

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 Cold Canada — https://swatchly.xyz/palette/89cfd4-cce6a8-b8e0ee-dffdff */
:root {
  --water-nymph: #89cfd4;
  --mermaid-tears: #cce6a8;
  --polar-wind: #b8e0ee;
  --cold-canada: #dffdff;
}

Tailwind CSS v4

/* Water Nymph to Cold Canada — https://swatchly.xyz/palette/89cfd4-cce6a8-b8e0ee-dffdff */
@theme {
  --color-water-nymph: #89cfd4;
  --color-water-nymph-50: #dbfdff;
  --color-water-nymph-100: #caf5f7;
  --color-water-nymph-200: #b0e2e6;
  --color-water-nymph-300: #89cfd4;
  --color-water-nymph-400: #6caeb3;
  --color-water-nymph-500: #4e9398;
  --color-water-nymph-600: #33787d;
  --color-water-nymph-700: #1e6064;
  --color-water-nymph-800: #0e4c50;
  --color-water-nymph-900: #043b3e;
  --color-water-nymph-950: #012527;
  --color-mermaid-tears: #cce6a8;
  --color-mermaid-tears-50: #effedd;
  --color-mermaid-tears-100: #e5f5d0;
  --color-mermaid-tears-200: #cce6a8;
  --color-mermaid-tears-300: #b7cd9a;
  --color-mermaid-tears-400: #96ad75;
  --color-mermaid-tears-500: #7a9157;
  --color-mermaid-tears-600: #60763e;
  --color-mermaid-tears-700: #4a5e2a;
  --color-mermaid-tears-800: #38491b;
  --color-mermaid-tears-900: #2a3911;
  --color-mermaid-tears-950: #192307;
  --color-polar-wind: #b8e0ee;
  --color-polar-wind-50: #e8f9ff;
  --color-polar-wind-100: #d8f1f9;
  --color-polar-wind-200: #b8e0ee;
  --color-polar-wind-300: #a7c8d4;
  --color-polar-wind-400: #84a9b6;
  --color-polar-wind-500: #688d9a;
  --color-polar-wind-600: #4e727f;
  --color-polar-wind-700: #3a5b66;
  --color-polar-wind-800: #2a4751;
  --color-polar-wind-900: #1e373f;
  --color-polar-wind-950: #102228;
  --color-cold-canada: #dffdff;
  --color-cold-canada-50: #dffdff;
  --color-cold-canada-100: #def0f1;
  --color-cold-canada-200: #c8ddde;
  --color-cold-canada-300: #aec7c9;
  --color-cold-canada-400: #8da8aa;
  --color-cold-canada-500: #718c8e;
  --color-cold-canada-600: #577173;
  --color-cold-canada-700: #425a5c;
  --color-cold-canada-800: #324748;
  --color-cold-canada-900: #253638;
  --color-cold-canada-950: #152223;
}