Water to Emerald Whispers Color Palette

About this palette

Water to Emerald Whispers is a 4-color cool palette: #DAF5FF (Water), #003B3A (Rich Black), #34ACFF (Cerulean), #008479 (Emerald Whispers). It mixes white, turquoise, blue tones and feels cool overall. The strongest text pairing is #DAF5FF on #003B3A with a contrast ratio of 10.96:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Water	rgb(218, 245, 255)	hsl(196, 100%, 93%)
Rich Black	rgb(0, 59, 58)	hsl(179, 100%, 12%)
Cerulean	rgb(52, 172, 255)	hsl(205, 100%, 60%)
Emerald Whispers	rgb(0, 132, 121)	hsl(175, 100%, 26%)

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.

Aa10.96:1 Very good#DAF5FF on #003B3A
Aa10.96:1 Very good#003B3A on #DAF5FF
Aa5.03:1 Good#003B3A on #34ACFF
Aa5.03:1 Good#34ACFF on #003B3A
Aa4.04:1 Poor#DAF5FF on #008479
Aa4.04:1 Poor#008479 on #DAF5FF

Color blindness preview

CSS variables

/* Water to Emerald Whispers — https://swatchly.xyz/palette/daf5ff-003b3a-34acff-008479 */
:root {
  --water: #daf5ff;
  --rich-black: #003b3a;
  --cerulean: #34acff;
  --emerald-whispers: #008479;
}

Tailwind CSS v4

/* Water to Emerald Whispers — https://swatchly.xyz/palette/daf5ff-003b3a-34acff-008479 */
@theme {
  --color-water: #daf5ff;
  --color-water-50: #f0fbff;
  --color-water-100: #daf5ff;
  --color-water-200: #ccdfe6;
  --color-water-300: #b2c8d0;
  --color-water-400: #90a8b1;
  --color-water-500: #748c95;
  --color-water-600: #597179;
  --color-water-700: #445961;
  --color-water-800: #33464c;
  --color-water-900: #26363b;
  --color-water-950: #162125;
  --color-rich-black: #003b3a;
  --color-rich-black-50: #dffcfb;
  --color-rich-black-100: #d2f3f1;
  --color-rich-black-200: #bae0df;
  --color-rich-black-300: #9fcbc9;
  --color-rich-black-400: #7bacaa;
  --color-rich-black-500: #5e918f;
  --color-rich-black-600: #447674;
  --color-rich-black-700: #305e5d;
  --color-rich-black-800: #214a49;
  --color-rich-black-900: #003b3a;
  --color-rich-black-950: #0a2423;
  --color-cerulean: #34acff;
  --color-cerulean-50: #eef7ff;
  --color-cerulean-100: #ddefff;
  --color-cerulean-200: #b8deff;
  --color-cerulean-300: #8acaff;
  --color-cerulean-400: #34acff;
  --color-cerulean-500: #008fde;
  --color-cerulean-600: #0073b4;
  --color-cerulean-700: #005b90;
  --color-cerulean-800: #004771;
  --color-cerulean-900: #003659;
  --color-cerulean-950: #002139;
  --color-emerald-whispers: #008479;
  --color-emerald-whispers-50: #d7fff9;
  --color-emerald-whispers-100: #c0faf1;
  --color-emerald-whispers-200: #a4eae0;
  --color-emerald-whispers-300: #85d6cb;
  --color-emerald-whispers-400: #59b9ad;
  --color-emerald-whispers-500: #349e93;
  --color-emerald-whispers-600: #008479;
  --color-emerald-whispers-700: #006960;
  --color-emerald-whispers-800: #00524b;
  --color-emerald-whispers-900: #003f39;
  --color-emerald-whispers-950: #002824;
}