Celestial to Calm Waters Color Palette

About this palette

Celestial to Calm Waters is a 5-color cool, monochromatic palette: #1A788F (Celestial), #009EC9 (Blue Ocean), #1F4753 (Mallard), #95D3E8 (Over the Sky), #E2F7FF (Calm Waters). It mixes blue, white tones and feels cool overall. The strongest text pairing is #1F4753 on #E2F7FF with a contrast ratio of 9.11:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Celestial	rgb(26, 120, 143)	hsl(192, 69%, 33%)
Blue Ocean	rgb(0, 158, 201)	hsl(193, 100%, 39%)
Mallard	rgb(31, 71, 83)	hsl(194, 46%, 22%)
Over the Sky	rgb(149, 211, 232)	hsl(195, 64%, 75%)
Calm Waters	rgb(226, 247, 255)	hsl(197, 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.

Aa9.11:1 Very good#1F4753 on #E2F7FF
Aa9.11:1 Very good#E2F7FF on #1F4753
Aa6.12:1 Good#1F4753 on #95D3E8
Aa6.12:1 Good#95D3E8 on #1F4753
Aa4.60:1 Good#1A788F on #E2F7FF
Aa4.60:1 Good#E2F7FF on #1A788F
Aa3.23:1 Poor#009EC9 on #1F4753
Aa3.23:1 Poor#1F4753 on #009EC9

Color blindness preview

CSS variables

/* Celestial to Calm Waters — https://swatchly.xyz/palette/1a788f-009ec9-1f4753-95d3e8-e2f7ff */
:root {
  --celestial: #1a788f;
  --blue-ocean: #009ec9;
  --mallard: #1f4753;
  --over-the-sky: #95d3e8;
  --calm-waters: #e2f7ff;
}

Tailwind CSS v4

/* Celestial to Calm Waters — https://swatchly.xyz/palette/1a788f-009ec9-1f4753-95d3e8-e2f7ff */
@theme {
  --color-celestial: #1a788f;
  --color-celestial-50: #e6f9ff;
  --color-celestial-100: #cdf3ff;
  --color-celestial-200: #a7e3f5;
  --color-celestial-300: #88cde3;
  --color-celestial-400: #5fafc6;
  --color-celestial-500: #3d93ab;
  --color-celestial-600: #1a788f;
  --color-celestial-700: #006074;
  --color-celestial-800: #004b5b;
  --color-celestial-900: #003a47;
  --color-celestial-950: #00242d;
  --color-blue-ocean: #009ec9;
  --color-blue-ocean-50: #ecf9ff;
  --color-blue-ocean-100: #d9f4ff;
  --color-blue-ocean-200: #ade7ff;
  --color-blue-ocean-300: #79d6fa;
  --color-blue-ocean-400: #46b8e1;
  --color-blue-ocean-500: #009ec9;
  --color-blue-ocean-600: #007fa2;
  --color-blue-ocean-700: #006581;
  --color-blue-ocean-800: #004e65;
  --color-blue-ocean-900: #003c4e;
  --color-blue-ocean-950: #002532;
  --color-mallard: #1f4753;
  --color-mallard-50: #e7f9ff;
  --color-mallard-100: #d6f0f9;
  --color-mallard-200: #bedee8;
  --color-mallard-300: #a3c8d4;
  --color-mallard-400: #80a8b6;
  --color-mallard-500: #648d9a;
  --color-mallard-600: #4a727e;
  --color-mallard-700: #365a65;
  --color-mallard-800: #1f4753;
  --color-mallard-900: #1b363e;
  --color-mallard-950: #0e2127;
  --color-over-the-sky: #95d3e8;
  --color-over-the-sky-50: #f0fbff;
  --color-over-the-sky-100: #daf5ff;
  --color-over-the-sky-200: #bbe6f5;
  --color-over-the-sky-300: #95d3e8;
  --color-over-the-sky-400: #78b1c4;
  --color-over-the-sky-500: #5894a8;
  --color-over-the-sky-600: #3c788b;
  --color-over-the-sky-700: #276071;
  --color-over-the-sky-800: #174a59;
  --color-over-the-sky-900: #0c3945;
  --color-over-the-sky-950: #04232c;
  --color-calm-waters: #e2f7ff;
  --color-calm-waters-50: #e2f7ff;
  --color-calm-waters-100: #dfecf1;
  --color-calm-waters-200: #cad9df;
  --color-calm-waters-300: #b2c3ca;
  --color-calm-waters-400: #92a4ac;
  --color-calm-waters-500: #768991;
  --color-calm-waters-600: #5d6f76;
  --color-calm-waters-700: #48585f;
  --color-calm-waters-800: #37454a;
  --color-calm-waters-900: #29353a;
  --color-calm-waters-950: #182124;
}