Celestial to Sky Fall Color Palette

About this palette

Celestial to Sky Fall is a 5-color cool, monochromatic palette: #247492 (Celestial), #1D475B (One Year of Rain), #C0E6F8 (Breaking the Ice), #689DB8 (Lake Lucerne), #7BC8E3 (Sky Fall). It mixes blue tones and feels cool overall. The strongest text pairing is #1D475B on #C0E6F8 with a contrast ratio of 7.56:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Celestial	rgb(36, 116, 146)	hsl(196, 60%, 36%)
One Year of Rain	rgb(29, 71, 91)	hsl(199, 52%, 24%)
Breaking the Ice	rgb(192, 230, 248)	hsl(199, 80%, 86%)
Lake Lucerne	rgb(104, 157, 184)	hsl(200, 36%, 56%)
Sky Fall	rgb(123, 200, 227)	hsl(196, 65%, 69%)

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.

Aa7.56:1 Very good#1D475B on #C0E6F8
Aa7.56:1 Very good#C0E6F8 on #1D475B
Aa5.33:1 Good#1D475B on #7BC8E3
Aa5.33:1 Good#7BC8E3 on #1D475B
Aa3.99:1 Poor#247492 on #C0E6F8
Aa3.99:1 Poor#C0E6F8 on #247492
Aa3.38:1 Poor#1D475B on #689DB8
Aa3.38:1 Poor#689DB8 on #1D475B

Color blindness preview

CSS variables

/* Celestial to Sky Fall — https://swatchly.xyz/palette/247492-1d475b-c0e6f8-689db8-7bc8e3 */
:root {
  --celestial: #247492;
  --one-year-of-rain: #1d475b;
  --breaking-the-ice: #c0e6f8;
  --lake-lucerne: #689db8;
  --sky-fall: #7bc8e3;
}

Tailwind CSS v4

/* Celestial to Sky Fall — https://swatchly.xyz/palette/247492-1d475b-c0e6f8-689db8-7bc8e3 */
@theme {
  --color-celestial: #247492;
  --color-celestial-50: #e9f8ff;
  --color-celestial-100: #d2f1ff;
  --color-celestial-200: #aae0f9;
  --color-celestial-300: #8bcae7;
  --color-celestial-400: #63abca;
  --color-celestial-500: #438fae;
  --color-celestial-600: #247492;
  --color-celestial-700: #0f5c77;
  --color-celestial-800: #004960;
  --color-celestial-900: #00384b;
  --color-celestial-950: #002330;
  --color-one-year-of-rain: #1d475b;
  --color-one-year-of-rain-50: #eaf8ff;
  --color-one-year-of-rain-100: #d5f0ff;
  --color-one-year-of-rain-200: #bcddef;
  --color-one-year-of-rain-300: #a2c7db;
  --color-one-year-of-rain-400: #7ea8be;
  --color-one-year-of-rain-500: #628ca3;
  --color-one-year-of-rain-600: #487187;
  --color-one-year-of-rain-700: #345a6d;
  --color-one-year-of-rain-800: #1d475b;
  --color-one-year-of-rain-900: #1a3644;
  --color-one-year-of-rain-950: #0d222c;
  --color-breaking-the-ice: #c0e6f8;
  --color-breaking-the-ice-50: #f5fcff;
  --color-breaking-the-ice-100: #e1f5ff;
  --color-breaking-the-ice-200: #c0e6f8;
  --color-breaking-the-ice-300: #aecddb;
  --color-breaking-the-ice-400: #8aacbd;
  --color-breaking-the-ice-500: #6c90a0;
  --color-breaking-the-ice-600: #517483;
  --color-breaking-the-ice-700: #3c5b6a;
  --color-breaking-the-ice-800: #2b4753;
  --color-breaking-the-ice-900: #1f3641;
  --color-breaking-the-ice-950: #112229;
  --color-lake-lucerne: #689db8;
  --color-lake-lucerne-50: #e0f4ff;
  --color-lake-lucerne-100: #c7ebfe;
  --color-lake-lucerne-200: #abd6ec;
  --color-lake-lucerne-300: #8ebed7;
  --color-lake-lucerne-400: #689db8;
  --color-lake-lucerne-500: #4f849e;
  --color-lake-lucerne-600: #396b83;
  --color-lake-lucerne-700: #27566c;
  --color-lake-lucerne-800: #1b4457;
  --color-lake-lucerne-900: #113546;
  --color-lake-lucerne-950: #08222f;
  --color-sky-fall: #7bc8e3;
  --color-sky-fall-50: #e0f7ff;
  --color-sky-fall-100: #c5efff;
  --color-sky-fall-200: #a4ddf2;
  --color-sky-fall-300: #7bc8e3;
  --color-sky-fall-400: #5fa9c2;
  --color-sky-fall-500: #408ea8;
  --color-sky-fall-600: #24748c;
  --color-sky-fall-700: #0d5d73;
  --color-sky-fall-800: #00495c;
  --color-sky-fall-900: #003949;
  --color-sky-fall-950: #00242f;
}