Calm Waters to Depths of the Nile Color Palette

About this palette

Calm Waters to Depths of the Nile is a 4-color muted, cool, gradient palette: #E5F7FF (Calm Waters), #88A6B7 (Grauzone), #4C6A76 (Silent Night), #243D49 (Depths of the Nile). It mixes white, blue tones and feels cool overall. The strongest text pairing is #E5F7FF on #243D49 with a contrast ratio of 10.38:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Calm Waters	rgb(229, 247, 255)	hsl(198, 100%, 95%)
Grauzone	rgb(136, 166, 183)	hsl(202, 25%, 63%)
Silent Night	rgb(76, 106, 118)	hsl(197, 22%, 38%)
Depths of the Nile	rgb(36, 61, 73)	hsl(199, 34%, 21%)

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.38:1 Very good#E5F7FF on #243D49
Aa10.38:1 Very good#243D49 on #E5F7FF
Aa5.26:1 Good#E5F7FF on #4C6A76
Aa5.26:1 Good#4C6A76 on #E5F7FF
Aa4.45:1 Poor#88A6B7 on #243D49
Aa4.45:1 Poor#243D49 on #88A6B7

Color blindness preview

CSS variables

/* Calm Waters to Depths of the Nile — https://swatchly.xyz/palette/e5f7ff-88a6b7-4c6a76-243d49 */
:root {
  --calm-waters: #e5f7ff;
  --grauzone: #88a6b7;
  --silent-night: #4c6a76;
  --depths-of-the-nile: #243d49;
}

Tailwind CSS v4

/* Calm Waters to Depths of the Nile — https://swatchly.xyz/palette/e5f7ff-88a6b7-4c6a76-243d49 */
@theme {
  --color-calm-waters: #e5f7ff;
  --color-calm-waters-50: #e5f7ff;
  --color-calm-waters-100: #e1ecf1;
  --color-calm-waters-200: #ccd9df;
  --color-calm-waters-300: #b4c3c9;
  --color-calm-waters-400: #94a4ab;
  --color-calm-waters-500: #798990;
  --color-calm-waters-600: #5f6f75;
  --color-calm-waters-700: #4a585e;
  --color-calm-waters-800: #38454a;
  --color-calm-waters-900: #2a3539;
  --color-calm-waters-950: #192124;
  --color-grauzone: #88a6b7;
  --color-grauzone-50: #eaf7ff;
  --color-grauzone-100: #dbeefa;
  --color-grauzone-200: #c4dbe8;
  --color-grauzone-300: #abc5d4;
  --color-grauzone-400: #88a6b7;
  --color-grauzone-500: #6d8b9b;
  --color-grauzone-600: #54707f;
  --color-grauzone-700: #405967;
  --color-grauzone-800: #2f4652;
  --color-grauzone-900: #233640;
  --color-grauzone-950: #142129;
  --color-silent-night: #4c6a76;
  --color-silent-night-50: #e8f8ff;
  --color-silent-night-100: #d9eef7;
  --color-silent-night-200: #c1dae4;
  --color-silent-night-300: #a6c2ce;
  --color-silent-night-400: #83a2af;
  --color-silent-night-500: #678692;
  --color-silent-night-600: #4c6a76;
  --color-silent-night-700: #3a545f;
  --color-silent-night-800: #2b424b;
  --color-silent-night-900: #20333b;
  --color-silent-night-950: #122025;
  --color-depths-of-the-nile: #243d49;
  --color-depths-of-the-nile-50: #eaf8ff;
  --color-depths-of-the-nile-100: #dceff8;
  --color-depths-of-the-nile-200: #c6dbe6;
  --color-depths-of-the-nile-300: #adc5d2;
  --color-depths-of-the-nile-400: #8da7b5;
  --color-depths-of-the-nile-500: #728d9b;
  --color-depths-of-the-nile-600: #5a7481;
  --color-depths-of-the-nile-700: #465e6a;
  --color-depths-of-the-nile-800: #364b56;
  --color-depths-of-the-nile-900: #243d49;
  --color-depths-of-the-nile-950: #18262d;
}