Astral to Cold and Dark Color Palette

About this palette

Astral to Cold and Dark is a 5-color cool, monochromatic palette: #287288 (Astral), #98E9FE (Winter Wizard), #8BBAC7 (Juvie), #689FAD (Tranquili Teal), #19404C (Cold and Dark). It mixes blue tones and feels cool overall. The strongest text pairing is #98E9FE on #19404C with a contrast ratio of 8.21:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Astral	rgb(40, 114, 136)	hsl(194, 55%, 35%)
Winter Wizard	rgb(152, 233, 254)	hsl(192, 98%, 80%)
Juvie	rgb(139, 186, 199)	hsl(193, 35%, 66%)
Tranquili Teal	rgb(104, 159, 173)	hsl(192, 30%, 54%)
Cold and Dark	rgb(25, 64, 76)	hsl(194, 50%, 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.21:1 Very good#98E9FE on #19404C
Aa8.21:1 Very good#19404C on #98E9FE
Aa5.29:1 Good#8BBAC7 on #19404C
Aa5.29:1 Good#19404C on #8BBAC7
Aa4.00:1 Poor#287288 on #98E9FE
Aa4.00:1 Poor#98E9FE on #287288
Aa3.81:1 Poor#689FAD on #19404C
Aa3.81:1 Poor#19404C on #689FAD

Color blindness preview

CSS variables

/* Astral to Cold and Dark — https://swatchly.xyz/palette/287288-98e9fe-8bbac7-689fad-19404c */
:root {
  --astral: #287288;
  --winter-wizard: #98e9fe;
  --juvie: #8bbac7;
  --tranquili-teal: #689fad;
  --cold-and-dark: #19404c;
}

Tailwind CSS v4

/* Astral to Cold and Dark — https://swatchly.xyz/palette/287288-98e9fe-8bbac7-689fad-19404c */
@theme {
  --color-astral: #287288;
  --color-astral-50: #e7f9ff;
  --color-astral-100: #ccf2ff;
  --color-astral-200: #abe0f2;
  --color-astral-300: #8dc9de;
  --color-astral-400: #66aac0;
  --color-astral-500: #468ea4;
  --color-astral-600: #287288;
  --color-astral-700: #165b6e;
  --color-astral-800: #064758;
  --color-astral-900: #003746;
  --color-astral-950: #00232d;
  --color-winter-wizard: #98e9fe;
  --color-winter-wizard-50: #eafbff;
  --color-winter-wizard-100: #d1f5ff;
  --color-winter-wizard-200: #98e9fe;
  --color-winter-wizard-300: #8dcfe1;
  --color-winter-wizard-400: #64b0c3;
  --color-winter-wizard-500: #4394a8;
  --color-winter-wizard-600: #24788b;
  --color-winter-wizard-700: #086071;
  --color-winter-wizard-800: #004b59;
  --color-winter-wizard-900: #003a45;
  --color-winter-wizard-950: #00242c;
  --color-juvie: #8bbac7;
  --color-juvie-50: #f4fcff;
  --color-juvie-100: #e1f8ff;
  --color-juvie-200: #c9e9f2;
  --color-juvie-300: #b0d6e0;
  --color-juvie-400: #8bbac7;
  --color-juvie-500: #6e9ba8;
  --color-juvie-600: #507d8a;
  --color-juvie-700: #39636f;
  --color-juvie-800: #284d57;
  --color-juvie-900: #1a3a42;
  --color-juvie-950: #0c2329;
  --color-tranquili-teal: #689fad;
  --color-tranquili-teal-50: #d9f7ff;
  --color-tranquili-teal-100: #c7ecf6;
  --color-tranquili-teal-200: #acd7e3;
  --color-tranquili-teal-300: #8ec0cd;
  --color-tranquili-teal-400: #689fad;
  --color-tranquili-teal-500: #4f8693;
  --color-tranquili-teal-600: #386d7a;
  --color-tranquili-teal-700: #275763;
  --color-tranquili-teal-800: #1a4550;
  --color-tranquili-teal-900: #11373f;
  --color-tranquili-teal-950: #07232a;
  --color-cold-and-dark: #19404c;
  --color-cold-and-dark-50: #e7f9ff;
  --color-cold-and-dark-100: #d6f0f9;
  --color-cold-and-dark-200: #bfdde8;
  --color-cold-and-dark-300: #a5c8d4;
  --color-cold-and-dark-400: #84aab8;
  --color-cold-and-dark-500: #69909e;
  --color-cold-and-dark-600: #507784;
  --color-cold-and-dark-700: #3d616d;
  --color-cold-and-dark-800: #2e4e59;
  --color-cold-and-dark-900: #19404c;
  --color-cold-and-dark-950: #13282f;
}