Neon Boneyard to Midnight Velvet Color Palette

About this palette

Neon Boneyard to Midnight Velvet is a 5-color cool, monochromatic, gradient palette: #EAC4FF (Neon Boneyard), #A388B0 (Wizard’s Brew), #895C9E (Vicious Violet), #623672 (Heartless), #372143 (Midnight Velvet). It mixes purple tones and feels cool overall. The strongest text pairing is #EAC4FF on #372143 with a contrast ratio of 9.47:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Neon Boneyard	rgb(234, 196, 255)	hsl(279, 100%, 88%)
Wizard’s Brew	rgb(163, 136, 176)	hsl(280, 20%, 61%)
Vicious Violet	rgb(137, 92, 158)	hsl(281, 26%, 49%)
Heartless	rgb(98, 54, 114)	hsl(284, 36%, 33%)
Midnight Velvet	rgb(55, 33, 67)	hsl(279, 34%, 20%)

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.47:1 Very good#EAC4FF on #372143
Aa9.47:1 Very good#372143 on #EAC4FF
Aa6.04:1 Good#EAC4FF on #623672
Aa6.04:1 Good#623672 on #EAC4FF
Aa4.59:1 Good#A388B0 on #372143
Aa4.59:1 Good#372143 on #A388B0
Aa3.38:1 Poor#EAC4FF on #895C9E
Aa3.38:1 Poor#895C9E on #EAC4FF

Color blindness preview

CSS variables

/* Neon Boneyard to Midnight Velvet — https://swatchly.xyz/palette/eac4ff-a388b0-895c9e-623672-372143 */
:root {
  --neon-boneyard: #eac4ff;
  --wizard-s-brew: #a388b0;
  --vicious-violet: #895c9e;
  --heartless: #623672;
  --midnight-velvet: #372143;
}

Tailwind CSS v4

/* Neon Boneyard to Midnight Velvet — https://swatchly.xyz/palette/eac4ff-a388b0-895c9e-623672-372143 */
@theme {
  --color-neon-boneyard: #eac4ff;
  --color-neon-boneyard-50: #f9efff;
  --color-neon-boneyard-100: #f4e1ff;
  --color-neon-boneyard-200: #eac4ff;
  --color-neon-boneyard-300: #d1b1e2;
  --color-neon-boneyard-400: #b390c6;
  --color-neon-boneyard-500: #9875ab;
  --color-neon-boneyard-600: #7d5b8f;
  --color-neon-boneyard-700: #654675;
  --color-neon-boneyard-800: #50365e;
  --color-neon-boneyard-900: #3f284b;
  --color-neon-boneyard-950: #281730;
  --color-wizard-s-brew: #a388b0;
  --color-wizard-s-brew-50: #f8eaff;
  --color-wizard-s-brew-100: #efdcf8;
  --color-wizard-s-brew-200: #dbc4e6;
  --color-wizard-s-brew-300: #c3aad0;
  --color-wizard-s-brew-400: #a388b0;
  --color-wizard-s-brew-500: #8a7096;
  --color-wizard-s-brew-600: #71587c;
  --color-wizard-s-brew-700: #5b4566;
  --color-wizard-s-brew-800: #493652;
  --color-wizard-s-brew-900: #3a2942;
  --color-wizard-s-brew-950: #261a2c;
  --color-vicious-violet: #895c9e;
  --color-vicious-violet-50: #faf1ff;
  --color-vicious-violet-100: #f6e5ff;
  --color-vicious-violet-200: #edcaff;
  --color-vicious-violet-300: #dbb2ee;
  --color-vicious-violet-400: #be91d4;
  --color-vicious-violet-500: #a476b9;
  --color-vicious-violet-600: #895c9e;
  --color-vicious-violet-700: #6f4682;
  --color-vicious-violet-800: #583469;
  --color-vicious-violet-900: #452653;
  --color-vicious-violet-950: #2c1636;
  --color-heartless: #623672;
  --color-heartless-50: #fbf1ff;
  --color-heartless-100: #f7e3ff;
  --color-heartless-200: #edc8fb;
  --color-heartless-300: #dab1eb;
  --color-heartless-400: #bf91d0;
  --color-heartless-500: #a576b7;
  --color-heartless-600: #8b5d9c;
  --color-heartless-700: #744983;
  --color-heartless-800: #623672;
  --color-heartless-900: #4b2a57;
  --color-heartless-950: #31193a;
  --color-midnight-velvet: #372143;
  --color-midnight-velvet-50: #faf2ff;
  --color-midnight-velvet-100: #f5e4ff;
  --color-midnight-velvet-200: #e3cfef;
  --color-midnight-velvet-300: #ceb7db;
  --color-midnight-velvet-400: #ae95bd;
  --color-midnight-velvet-500: #9178a0;
  --color-midnight-velvet-600: #755d82;
  --color-midnight-velvet-700: #5c4668;
  --color-midnight-velvet-800: #463450;
  --color-midnight-velvet-900: #372143;
  --color-midnight-velvet-950: #1f1525;
}