Windstorm to Aegean Blue Color Palette

About this palette

Windstorm to Aegean Blue is a 5-color cool, monochromatic palette: #729CC1 (Windstorm), #2C699B (Starry Night), #07203E (Midnight Mirage), #9FCBFF (Baby Blue), #00426C (Aegean Blue). It mixes blue tones and feels cool overall. The strongest text pairing is #07203E on #9FCBFF with a contrast ratio of 9.70:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Windstorm	rgb(114, 156, 193)	hsl(208, 39%, 60%)
Starry Night	rgb(44, 105, 155)	hsl(207, 56%, 39%)
Midnight Mirage	rgb(7, 32, 62)	hsl(213, 80%, 14%)
Baby Blue	rgb(159, 203, 255)	hsl(213, 100%, 81%)
Aegean Blue	rgb(0, 66, 108)	hsl(203, 100%, 21%)

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.70:1 Very good#07203E on #9FCBFF
Aa9.70:1 Very good#9FCBFF on #07203E
Aa6.24:1 Good#9FCBFF on #00426C
Aa6.24:1 Good#00426C on #9FCBFF
Aa5.63:1 Good#729CC1 on #07203E
Aa5.63:1 Good#07203E on #729CC1
Aa3.63:1 Poor#729CC1 on #00426C
Aa3.63:1 Poor#00426C on #729CC1

Color blindness preview

CSS variables

/* Windstorm to Aegean Blue — https://swatchly.xyz/palette/729cc1-2c699b-07203e-9fcbff-00426c */
:root {
  --windstorm: #729cc1;
  --starry-night: #2c699b;
  --midnight-mirage: #07203e;
  --baby-blue: #9fcbff;
  --aegean-blue: #00426c;
}

Tailwind CSS v4

/* Windstorm to Aegean Blue — https://swatchly.xyz/palette/729cc1-2c699b-07203e-9fcbff-00426c */
@theme {
  --color-windstorm: #729cc1;
  --color-windstorm-50: #e6f3ff;
  --color-windstorm-100: #d1e9ff;
  --color-windstorm-200: #b3d5f3;
  --color-windstorm-300: #97bddf;
  --color-windstorm-400: #729cc1;
  --color-windstorm-500: #5982a6;
  --color-windstorm-600: #42698b;
  --color-windstorm-700: #315472;
  --color-windstorm-800: #23425d;
  --color-windstorm-900: #19344a;
  --color-windstorm-950: #0d2131;
  --color-starry-night: #2c699b;
  --color-starry-night-50: #edf6ff;
  --color-starry-night-100: #d9edff;
  --color-starry-night-200: #b2daff;
  --color-starry-night-300: #8ec3f3;
  --color-starry-night-400: #67a2d6;
  --color-starry-night-500: #4985b9;
  --color-starry-night-600: #2c699b;
  --color-starry-night-700: #1d537f;
  --color-starry-night-800: #104167;
  --color-starry-night-900: #073252;
  --color-starry-night-950: #021f36;
  --color-midnight-mirage: #07203e;
  --color-midnight-mirage-50: #eff6ff;
  --color-midnight-mirage-100: #dfedff;
  --color-midnight-mirage-200: #c3daf8;
  --color-midnight-mirage-300: #a9c3e5;
  --color-midnight-mirage-400: #88a4c8;
  --color-midnight-mirage-500: #6c89ad;
  --color-midnight-mirage-600: #536e91;
  --color-midnight-mirage-700: #3f5777;
  --color-midnight-mirage-800: #2f4460;
  --color-midnight-mirage-900: #22354c;
  --color-midnight-mirage-950: #07203e;
  --color-baby-blue: #9fcbff;
  --color-baby-blue-50: #f4f9ff;
  --color-baby-blue-100: #e5f1ff;
  --color-baby-blue-200: #c5e0ff;
  --color-baby-blue-300: #9fcbff;
  --color-baby-blue-400: #81aada;
  --color-baby-blue-500: #648dbe;
  --color-baby-blue-600: #4971a0;
  --color-baby-blue-700: #345983;
  --color-baby-blue-800: #254569;
  --color-baby-blue-900: #193453;
  --color-baby-blue-950: #0c2036;
  --color-aegean-blue: #00426c;
  --color-aegean-blue-50: #edf6ff;
  --color-aegean-blue-100: #dbeeff;
  --color-aegean-blue-200: #b6ddff;
  --color-aegean-blue-300: #95c6f1;
  --color-aegean-blue-400: #70a6d5;
  --color-aegean-blue-500: #528ab8;
  --color-aegean-blue-600: #386e9a;
  --color-aegean-blue-700: #24567e;
  --color-aegean-blue-800: #00426c;
  --color-aegean-blue-900: #0c334f;
  --color-aegean-blue-950: #041f33;
}