Neon Boneyard to Aegean Blue Color Palette

About this palette

Neon Boneyard to Aegean Blue is a 4-color cool palette: #DFD0FF (Neon Boneyard), #525EAD (Starstruck), #89A8D4 (Windfall), #184077 (Aegean Blue). It mixes purple, blue tones and feels cool overall. The strongest text pairing is #DFD0FF on #184077 with a contrast ratio of 7.16:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Neon Boneyard	rgb(223, 208, 255)	hsl(259, 100%, 91%)
Starstruck	rgb(82, 94, 173)	hsl(232, 36%, 50%)
Windfall	rgb(137, 168, 212)	hsl(215, 47%, 68%)
Aegean Blue	rgb(24, 64, 119)	hsl(215, 66%, 28%)

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.16:1 Very good#DFD0FF on #184077
Aa7.16:1 Very good#184077 on #DFD0FF
Aa4.23:1 Poor#89A8D4 on #184077
Aa4.23:1 Poor#184077 on #89A8D4
Aa4.10:1 Poor#DFD0FF on #525EAD
Aa4.10:1 Poor#525EAD on #DFD0FF

Color blindness preview

CSS variables

/* Neon Boneyard to Aegean Blue — https://swatchly.xyz/palette/dfd0ff-525ead-89a8d4-184077 */
:root {
  --neon-boneyard: #dfd0ff;
  --starstruck: #525ead;
  --windfall: #89a8d4;
  --aegean-blue: #184077;
}

Tailwind CSS v4

/* Neon Boneyard to Aegean Blue — https://swatchly.xyz/palette/dfd0ff-525ead-89a8d4-184077 */
@theme {
  --color-neon-boneyard: #dfd0ff;
  --color-neon-boneyard-50: #f7f4ff;
  --color-neon-boneyard-100: #efe8ff;
  --color-neon-boneyard-200: #dfd0ff;
  --color-neon-boneyard-300: #c7bbe2;
  --color-neon-boneyard-400: #a89ac5;
  --color-neon-boneyard-500: #8c7ea9;
  --color-neon-boneyard-600: #72648d;
  --color-neon-boneyard-700: #5a4e73;
  --color-neon-boneyard-800: #473c5c;
  --color-neon-boneyard-900: #362d48;
  --color-neon-boneyard-950: #221b2f;
  --color-starstruck: #525ead;
  --color-starstruck-50: #f2f5ff;
  --color-starstruck-100: #e4e9ff;
  --color-starstruck-200: #c9d3ff;
  --color-starstruck-300: #aab9ff;
  --color-starstruck-400: #8797e8;
  --color-starstruck-500: #6c7acc;
  --color-starstruck-600: #525ead;
  --color-starstruck-700: #3f498e;
  --color-starstruck-800: #303874;
  --color-starstruck-900: #242a5d;
  --color-starstruck-950: #15193e;
  --color-windfall: #89a8d4;
  --color-windfall-50: #f2f7ff;
  --color-windfall-100: #e3efff;
  --color-windfall-200: #c5ddfe;
  --color-windfall-300: #acc7ed;
  --color-windfall-400: #89a8d4;
  --color-windfall-500: #6e8cb6;
  --color-windfall-600: #537098;
  --color-windfall-700: #3e587d;
  --color-windfall-800: #2e4464;
  --color-windfall-900: #21344f;
  --color-windfall-950: #122033;
  --color-aegean-blue: #184077;
  --color-aegean-blue-50: #eff6ff;
  --color-aegean-blue-100: #dfecff;
  --color-aegean-blue-200: #bfdaff;
  --color-aegean-blue-300: #9cc3fa;
  --color-aegean-blue-400: #79a3df;
  --color-aegean-blue-500: #5c87c3;
  --color-aegean-blue-600: #436ca5;
  --color-aegean-blue-700: #305488;
  --color-aegean-blue-800: #184077;
  --color-aegean-blue-900: #163258;
  --color-aegean-blue-950: #0b1e3a;
}