Blizzard Blue to Dark Eclipse color palette

A1E4F2Blizzard Blue 64B3DFMilky Waves 0089C6Way Beyond the Blue 0C4850Nocturnal Expedition 112147Dark Eclipse

Open in generator Export PNG, PDF, ASE…

About this palette

Blizzard Blue to Dark Eclipse is a 5-color cool palette: #A1E4F2 (Blizzard Blue), #64B3DF (Milky Waves), #0089C6 (Way Beyond the Blue), #0C4850 (Nocturnal Expedition), #112147 (Dark Eclipse). It mixes turquoise, blue tones and feels cool overall. The strongest text pairing is #A1E4F2 on #112147 with a contrast ratio of 11.18:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blizzard Blue	rgb(161, 228, 242)	hsl(190, 76%, 79%)
Milky Waves	rgb(100, 179, 223)	hsl(201, 66%, 63%)
Way Beyond the Blue	rgb(0, 137, 198)	hsl(198, 100%, 39%)
Nocturnal Expedition	rgb(12, 72, 80)	hsl(187, 74%, 18%)
Dark Eclipse	rgb(17, 33, 71)	hsl(222, 61%, 17%)

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.

Aa11.18:1 Very good#A1E4F2 on #112147
Aa11.18:1 Very good#112147 on #A1E4F2
Aa7.24:1 Very good#A1E4F2 on #0C4850
Aa7.24:1 Very good#0C4850 on #A1E4F2
Aa6.80:1 Good#64B3DF on #112147
Aa6.80:1 Good#112147 on #64B3DF
Aa4.40:1 Poor#64B3DF on #0C4850
Aa4.40:1 Poor#0C4850 on #64B3DF

Color blindness preview

CSS variables

/* Blizzard Blue to Dark Eclipse — https://swatchly.xyz/palette/a1e4f2-64b3df-0089c6-0c4850-112147 */
:root {
  --blizzard-blue: #a1e4f2;
  --milky-waves: #64b3df;
  --way-beyond-the-blue: #0089c6;
  --nocturnal-expedition: #0c4850;
  --dark-eclipse: #112147;
}

Tailwind CSS v4

/* Blizzard Blue to Dark Eclipse — https://swatchly.xyz/palette/a1e4f2-64b3df-0089c6-0c4850-112147 */
@theme {
  --color-blizzard-blue: #a1e4f2;
  --color-blizzard-blue-50: #e2faff;
  --color-blizzard-blue-100: #cbf3fc;
  --color-blizzard-blue-200: #a1e4f2;
  --color-blizzard-blue-300: #94cbd7;
  --color-blizzard-blue-400: #6eadba;
  --color-blizzard-blue-500: #50919e;
  --color-blizzard-blue-600: #357683;
  --color-blizzard-blue-700: #215f6a;
  --color-blizzard-blue-800: #124a54;
  --color-blizzard-blue-900: #073a42;
  --color-blizzard-blue-950: #02242a;
  --color-milky-waves: #64b3df;
  --color-milky-waves-50: #f0f9ff;
  --color-milky-waves-100: #def3ff;
  --color-milky-waves-200: #b7e4ff;
  --color-milky-waves-300: #91d1f6;
  --color-milky-waves-400: #64b3df;
  --color-milky-waves-500: #4695c0;
  --color-milky-waves-600: #2679a2;
  --color-milky-waves-700: #0a6085;
  --color-milky-waves-800: #004a6a;
  --color-milky-waves-900: #003952;
  --color-milky-waves-950: #002334;
  --color-way-beyond-the-blue: #0089c6;
  --color-way-beyond-the-blue-50: #e9f6ff;
  --color-way-beyond-the-blue-100: #d3edff;
  --color-way-beyond-the-blue-200: #a8dcff;
  --color-way-beyond-the-blue-300: #6fc7ff;
  --color-way-beyond-the-blue-400: #3da6e3;
  --color-way-beyond-the-blue-500: #0089c6;
  --color-way-beyond-the-blue-600: #006ea0;
  --color-way-beyond-the-blue-700: #005881;
  --color-way-beyond-the-blue-800: #004566;
  --color-way-beyond-the-blue-900: #003550;
  --color-way-beyond-the-blue-950: #002135;
  --color-nocturnal-expedition: #0c4850;
  --color-nocturnal-expedition-50: #e1fbff;
  --color-nocturnal-expedition-100: #d0f3f8;
  --color-nocturnal-expedition-200: #b7e0e7;
  --color-nocturnal-expedition-300: #9bcad2;
  --color-nocturnal-expedition-400: #76abb3;
  --color-nocturnal-expedition-500: #598f97;
  --color-nocturnal-expedition-600: #3f737b;
  --color-nocturnal-expedition-700: #2b5b63;
  --color-nocturnal-expedition-800: #0c4850;
  --color-nocturnal-expedition-900: #12373c;
  --color-nocturnal-expedition-950: #072226;
  --color-dark-eclipse: #112147;
  --color-dark-eclipse-50: #f0f5ff;
  --color-dark-eclipse-100: #e2ebff;
  --color-dark-eclipse-200: #c6d8fd;
  --color-dark-eclipse-300: #adc1eb;
  --color-dark-eclipse-400: #8ba1cf;
  --color-dark-eclipse-500: #7187b5;
  --color-dark-eclipse-600: #586d99;
  --color-dark-eclipse-700: #44577f;
  --color-dark-eclipse-800: #344568;
  --color-dark-eclipse-900: #283654;
  --color-dark-eclipse-950: #112147;
}