Ephemeral Blue to Blue Whale color palette

C7D3E5Ephemeral Blue 95B2CCMont Blanc 54799CQuiet Harbour 4D5C6DStorm Rising 243142Blue Whale

About this palette

Ephemeral Blue to Blue Whale is a 5-color muted, cool, gradient palette: #C7D3E5 (Ephemeral Blue), #95B2CC (Mont Blanc), #54799C (Quiet Harbour), #4D5C6D (Storm Rising), #243142 (Blue Whale). It mixes gray, blue tones and feels cool overall. The strongest text pairing is #C7D3E5 on #243142 with a contrast ratio of 8.71:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ephemeral Blue	rgb(199, 211, 229)	hsl(216, 37%, 84%)
Mont Blanc	rgb(149, 178, 204)	hsl(208, 35%, 69%)
Quiet Harbour	rgb(84, 121, 156)	hsl(209, 30%, 47%)
Storm Rising	rgb(77, 92, 109)	hsl(212, 17%, 36%)
Blue Whale	rgb(36, 49, 66)	hsl(214, 29%, 20%)

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.

Aa8.71:1 Very good#C7D3E5 on #243142
Aa8.71:1 Very good#243142 on #C7D3E5
Aa5.97:1 Good#95B2CC on #243142
Aa5.97:1 Good#243142 on #95B2CC
Aa4.52:1 Good#C7D3E5 on #4D5C6D
Aa4.52:1 Good#4D5C6D on #C7D3E5
Aa3.10:1 Poor#95B2CC on #4D5C6D
Aa3.10:1 Poor#4D5C6D on #95B2CC

Color blindness preview

CSS variables

/* Ephemeral Blue to Blue Whale — https://swatchly.xyz/palette/c7d3e5-95b2cc-54799c-4d5c6d-243142 */
:root {
  --ephemeral-blue: #c7d3e5;
  --mont-blanc: #95b2cc;
  --quiet-harbour: #54799c;
  --storm-rising: #4d5c6d;
  --blue-whale: #243142;
}

Tailwind CSS v4

/* Ephemeral Blue to Blue Whale — https://swatchly.xyz/palette/c7d3e5-95b2cc-54799c-4d5c6d-243142 */
@theme {
  --color-ephemeral-blue: #c7d3e5;
  --color-ephemeral-blue-50: #ebf2fd;
  --color-ephemeral-blue-100: #dfe7f3;
  --color-ephemeral-blue-200: #c7d3e5;
  --color-ephemeral-blue-300: #b3bdcd;
  --color-ephemeral-blue-400: #949faf;
  --color-ephemeral-blue-500: #798495;
  --color-ephemeral-blue-600: #616b7a;
  --color-ephemeral-blue-700: #4c5563;
  --color-ephemeral-blue-800: #3b434f;
  --color-ephemeral-blue-900: #2c333e;
  --color-ephemeral-blue-950: #1b2027;
  --color-mont-blanc: #95b2cc;
  --color-mont-blanc-50: #f5faff;
  --color-mont-blanc-100: #e7f4ff;
  --color-mont-blanc-200: #cfe3f6;
  --color-mont-blanc-300: #b7cfe5;
  --color-mont-blanc-400: #95b2cc;
  --color-mont-blanc-500: #7894ad;
  --color-mont-blanc-600: #5c778f;
  --color-mont-blanc-700: #455e74;
  --color-mont-blanc-800: #33485c;
  --color-mont-blanc-900: #243747;
  --color-mont-blanc-950: #14212c;
  --color-quiet-harbour: #54799c;
  --color-quiet-harbour-50: #eef6ff;
  --color-quiet-harbour-100: #dfefff;
  --color-quiet-harbour-200: #c2dffb;
  --color-quiet-harbour-300: #a9caea;
  --color-quiet-harbour-400: #88acd0;
  --color-quiet-harbour-500: #6d92b6;
  --color-quiet-harbour-600: #54799c;
  --color-quiet-harbour-700: #3e6080;
  --color-quiet-harbour-800: #2d4b67;
  --color-quiet-harbour-900: #1f3951;
  --color-quiet-harbour-950: #112335;
  --color-storm-rising: #4d5c6d;
  --color-storm-rising-50: #eef6ff;
  --color-storm-rising-100: #e2ecf9;
  --color-storm-rising-200: #cddae9;
  --color-storm-rising-300: #b6c5d5;
  --color-storm-rising-400: #96a6b8;
  --color-storm-rising-500: #7c8c9e;
  --color-storm-rising-600: #637283;
  --color-storm-rising-700: #4d5c6d;
  --color-storm-rising-800: #3b4856;
  --color-storm-rising-900: #2d3743;
  --color-storm-rising-950: #1b222b;
  --color-blue-whale: #243142;
  --color-blue-whale-50: #eff6ff;
  --color-blue-whale-100: #e2ecfa;
  --color-blue-whale-200: #ccd9e9;
  --color-blue-whale-300: #b4c2d5;
  --color-blue-whale-400: #93a2b6;
  --color-blue-whale-500: #77869b;
  --color-blue-whale-600: #5d6c7f;
  --color-blue-whale-700: #475465;
  --color-blue-whale-800: #364150;
  --color-blue-whale-900: #243142;
  --color-blue-whale-950: #171e26;
}