Eternal Darkness to Star of Life color palette

002A41Eternal Darkness B3E3FFFrozen Landscape 004E76Sea Paint 1DA9E7Thalassophile 007CBCStar of Life

Open in generator Export PNG, PDF, ASE…

About this palette

Eternal Darkness to Star of Life is a 5-color cool, monochromatic palette: #002A41 (Eternal Darkness), #B3E3FF (Frozen Landscape), #004E76 (Sea Paint), #1DA9E7 (Thalassophile), #007CBC (Star of Life). It mixes blue tones and feels cool overall. The strongest text pairing is #002A41 on #B3E3FF with a contrast ratio of 10.90:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Eternal Darkness	rgb(0, 42, 65)	hsl(201, 100%, 13%)
Frozen Landscape	rgb(179, 227, 255)	hsl(202, 100%, 85%)
Sea Paint	rgb(0, 78, 118)	hsl(200, 100%, 23%)
Thalassophile	rgb(29, 169, 231)	hsl(198, 81%, 51%)
Star of Life	rgb(0, 124, 188)	hsl(200, 100%, 37%)

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.90:1 Very good#002A41 on #B3E3FF
Aa10.90:1 Very good#B3E3FF on #002A41
Aa6.53:1 Good#B3E3FF on #004E76
Aa6.53:1 Good#004E76 on #B3E3FF
Aa5.60:1 Good#002A41 on #1DA9E7
Aa5.60:1 Good#1DA9E7 on #002A41
Aa3.35:1 Poor#004E76 on #1DA9E7
Aa3.35:1 Poor#1DA9E7 on #004E76

Color blindness preview

CSS variables

/* Eternal Darkness to Star of Life — https://swatchly.xyz/palette/002a41-b3e3ff-004e76-1da9e7-007cbc */
:root {
  --eternal-darkness: #002a41;
  --frozen-landscape: #b3e3ff;
  --sea-paint: #004e76;
  --thalassophile: #1da9e7;
  --star-of-life: #007cbc;
}

Tailwind CSS v4

/* Eternal Darkness to Star of Life — https://swatchly.xyz/palette/002a41-b3e3ff-004e76-1da9e7-007cbc */
@theme {
  --color-eternal-darkness: #002a41;
  --color-eternal-darkness-50: #ecf7ff;
  --color-eternal-darkness-100: #d8efff;
  --color-eternal-darkness-200: #bddcf3;
  --color-eternal-darkness-300: #a3c6df;
  --color-eternal-darkness-400: #80a7c3;
  --color-eternal-darkness-500: #658da9;
  --color-eternal-darkness-600: #4d748e;
  --color-eternal-darkness-700: #3a5e76;
  --color-eternal-darkness-800: #2b4c61;
  --color-eternal-darkness-900: #203d50;
  --color-eternal-darkness-950: #002a41;
  --color-frozen-landscape: #b3e3ff;
  --color-frozen-landscape-50: #f0f9ff;
  --color-frozen-landscape-100: #ddf2ff;
  --color-frozen-landscape-200: #b3e3ff;
  --color-frozen-landscape-300: #a3cae1;
  --color-frozen-landscape-400: #7fabc4;
  --color-frozen-landscape-500: #618fa8;
  --color-frozen-landscape-600: #47738c;
  --color-frozen-landscape-700: #335b71;
  --color-frozen-landscape-800: #23475a;
  --color-frozen-landscape-900: #183747;
  --color-frozen-landscape-950: #0c222e;
  --color-sea-paint: #004e76;
  --color-sea-paint-50: #ecf7ff;
  --color-sea-paint-100: #d9efff;
  --color-sea-paint-200: #b1deff;
  --color-sea-paint-300: #93caf1;
  --color-sea-paint-400: #6facd7;
  --color-sea-paint-500: #5191bd;
  --color-sea-paint-600: #3877a1;
  --color-sea-paint-700: #246187;
  --color-sea-paint-800: #004e76;
  --color-sea-paint-900: #093c5a;
  --color-sea-paint-950: #02263c;
  --color-thalassophile: #1da9e7;
  --color-thalassophile-50: #e7f6ff;
  --color-thalassophile-100: #d1edff;
  --color-thalassophile-200: #a4ddff;
  --color-thalassophile-300: #66c9ff;
  --color-thalassophile-400: #1da9e7;
  --color-thalassophile-500: #008dc4;
  --color-thalassophile-600: #00729f;
  --color-thalassophile-700: #005a7f;
  --color-thalassophile-800: #004765;
  --color-thalassophile-900: #00374f;
  --color-thalassophile-950: #002334;
  --color-star-of-life: #007cbc;
  --color-star-of-life-50: #ecf7ff;
  --color-star-of-life-100: #ddf0ff;
  --color-star-of-life-200: #bae1ff;
  --color-star-of-life-300: #8eceff;
  --color-star-of-life-400: #57b1f0;
  --color-star-of-life-500: #3296d7;
  --color-star-of-life-600: #007cbc;
  --color-star-of-life-700: #006296;
  --color-star-of-life-800: #004d77;
  --color-star-of-life-900: #003b5c;
  --color-star-of-life-950: #00243c;
}