Neon Boneyard to Purple Prose Color Palette

About this palette

Neon Boneyard to Purple Prose is a 5-color cool, gradient palette: #D8C5FB (Neon Boneyard), #A8AAD5 (Imperial Lilac), #877097 (Purple Haze), #5B5F83 (Admiral Blue), #5B3353 (Purple Prose). It mixes purple tones and feels cool overall. The strongest text pairing is #D8C5FB on #5B3353 with a contrast ratio of 6.51:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Neon Boneyard	rgb(216, 197, 251)	hsl(261, 87%, 88%)
Imperial Lilac	rgb(168, 170, 213)	hsl(237, 35%, 75%)
Purple Haze	rgb(135, 112, 151)	hsl(275, 16%, 52%)
Admiral Blue	rgb(91, 95, 131)	hsl(234, 18%, 44%)
Purple Prose	rgb(91, 51, 83)	hsl(312, 28%, 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.

Aa6.51:1 Good#D8C5FB on #5B3353
Aa6.51:1 Good#5B3353 on #D8C5FB
Aa4.59:1 Good#A8AAD5 on #5B3353
Aa4.59:1 Good#5B3353 on #A8AAD5
Aa3.90:1 Poor#D8C5FB on #5B5F83
Aa3.90:1 Poor#5B5F83 on #D8C5FB

Color blindness preview

CSS variables

/* Neon Boneyard to Purple Prose — https://swatchly.xyz/palette/d8c5fb-a8aad5-877097-5b5f83-5b3353 */
:root {
  --neon-boneyard: #d8c5fb;
  --imperial-lilac: #a8aad5;
  --purple-haze: #877097;
  --admiral-blue: #5b5f83;
  --purple-prose: #5b3353;
}

Tailwind CSS v4

/* Neon Boneyard to Purple Prose — https://swatchly.xyz/palette/d8c5fb-a8aad5-877097-5b5f83-5b3353 */
@theme {
  --color-neon-boneyard: #d8c5fb;
  --color-neon-boneyard-50: #f3ecff;
  --color-neon-boneyard-100: #e9deff;
  --color-neon-boneyard-200: #d8c5fb;
  --color-neon-boneyard-300: #c2b1e0;
  --color-neon-boneyard-400: #a492c4;
  --color-neon-boneyard-500: #8a78aa;
  --color-neon-boneyard-600: #715f8e;
  --color-neon-boneyard-700: #5b4b75;
  --color-neon-boneyard-800: #483a5f;
  --color-neon-boneyard-900: #382c4b;
  --color-neon-boneyard-950: #231a31;
  --color-imperial-lilac: #a8aad5;
  --color-imperial-lilac-50: #f9f9ff;
  --color-imperial-lilac-100: #f0f1ff;
  --color-imperial-lilac-200: #dcdefd;
  --color-imperial-lilac-300: #c7c9ec;
  --color-imperial-lilac-400: #a8aad5;
  --color-imperial-lilac-500: #8b8cb5;
  --color-imperial-lilac-600: #6e6f97;
  --color-imperial-lilac-700: #56577b;
  --color-imperial-lilac-800: #424262;
  --color-imperial-lilac-900: #31314c;
  --color-imperial-lilac-950: #1d1d30;
  --color-purple-haze: #877097;
  --color-purple-haze-50: #f8efff;
  --color-purple-haze-100: #f0e0fc;
  --color-purple-haze-200: #dcc9ea;
  --color-purple-haze-300: #c5afd4;
  --color-purple-haze-400: #a48db5;
  --color-purple-haze-500: #877097;
  --color-purple-haze-600: #6e597d;
  --color-purple-haze-700: #584566;
  --color-purple-haze-800: #463551;
  --color-purple-haze-900: #372941;
  --color-purple-haze-950: #23192a;
  --color-admiral-blue: #5b5f83;
  --color-admiral-blue-50: #f3f4ff;
  --color-admiral-blue-100: #e4e8ff;
  --color-admiral-blue-200: #cdd2f1;
  --color-admiral-blue-300: #b4b9dc;
  --color-admiral-blue-400: #9398be;
  --color-admiral-blue-500: #767ba0;
  --color-admiral-blue-600: #5b5f83;
  --color-admiral-blue-700: #474b6a;
  --color-admiral-blue-800: #373a55;
  --color-admiral-blue-900: #2a2c43;
  --color-admiral-blue-950: #191b2b;
  --color-purple-prose: #5b3353;
  --color-purple-prose-50: #fff0fb;
  --color-purple-prose-100: #ffe1f7;
  --color-purple-prose-200: #efcae6;
  --color-purple-prose-300: #dcb2d2;
  --color-purple-prose-400: #be91b4;
  --color-purple-prose-500: #a37699;
  --color-purple-prose-600: #875c7d;
  --color-purple-prose-700: #6e4765;
  --color-purple-prose-800: #5b3353;
  --color-purple-prose-900: #45283f;
  --color-purple-prose-950: #2c1828;
}