Neon Boneyard to Deep Space Royal color palette

E3BFFFNeon Boneyard B29BDEViolet Velvet 8477BDVenus Violet 59559DUltrapurple Merge 31337DDeep Space Royal

Open in generator Export PNG, PDF, ASE…

About this palette

Neon Boneyard to Deep Space Royal is a 5-color cool, gradient palette: #E3BFFF (Neon Boneyard), #B29BDE (Violet Velvet), #8477BD (Venus Violet), #59559D (Ultrapurple Merge), #31337D (Deep Space Royal). It mixes purple tones and feels cool overall. The strongest text pairing is #E3BFFF on #31337D with a contrast ratio of 6.93:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Neon Boneyard	rgb(227, 191, 255)	hsl(274, 100%, 87%)
Violet Velvet	rgb(178, 155, 222)	hsl(261, 50%, 74%)
Venus Violet	rgb(132, 119, 189)	hsl(251, 35%, 60%)
Ultrapurple Merge	rgb(89, 85, 157)	hsl(243, 30%, 47%)
Deep Space Royal	rgb(49, 51, 125)	hsl(238, 44%, 34%)

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.93:1 Good#E3BFFF on #31337D
Aa6.93:1 Good#31337D on #E3BFFF
Aa4.54:1 Good#B29BDE on #31337D
Aa4.54:1 Good#31337D on #B29BDE
Aa4.10:1 Poor#E3BFFF on #59559D
Aa4.10:1 Poor#59559D on #E3BFFF

Color blindness preview

CSS variables

/* Neon Boneyard to Deep Space Royal — https://swatchly.xyz/palette/e3bfff-b29bde-8477bd-59559d-31337d */
:root {
  --neon-boneyard: #e3bfff;
  --violet-velvet: #b29bde;
  --venus-violet: #8477bd;
  --ultrapurple-merge: #59559d;
  --deep-space-royal: #31337d;
}

Tailwind CSS v4

/* Neon Boneyard to Deep Space Royal — https://swatchly.xyz/palette/e3bfff-b29bde-8477bd-59559d-31337d */
@theme {
  --color-neon-boneyard: #e3bfff;
  --color-neon-boneyard-50: #f6ebff;
  --color-neon-boneyard-100: #efdcff;
  --color-neon-boneyard-200: #e3bfff;
  --color-neon-boneyard-300: #cbace3;
  --color-neon-boneyard-400: #ae8dc8;
  --color-neon-boneyard-500: #9472ad;
  --color-neon-boneyard-600: #7a5a92;
  --color-neon-boneyard-700: #634578;
  --color-neon-boneyard-800: #4f3562;
  --color-neon-boneyard-900: #3e284d;
  --color-neon-boneyard-950: #271732;
  --color-violet-velvet: #b29bde;
  --color-violet-velvet-50: #f9f6ff;
  --color-violet-velvet-100: #f1ecff;
  --color-violet-velvet-200: #e2d5ff;
  --color-violet-velvet-300: #cfbcf5;
  --color-violet-velvet-400: #b29bde;
  --color-violet-velvet-500: #957ebf;
  --color-violet-velvet-600: #7963a1;
  --color-violet-velvet-700: #604c84;
  --color-violet-velvet-800: #4b396a;
  --color-violet-velvet-900: #3a2a54;
  --color-violet-velvet-950: #231836;
  --color-venus-violet: #8477bd;
  --color-venus-violet-50: #f4f3ff;
  --color-venus-violet-100: #eae7ff;
  --color-venus-violet-200: #d6cfff;
  --color-venus-violet-300: #bfb5f5;
  --color-venus-violet-400: #9f93d9;
  --color-venus-violet-500: #8477bd;
  --color-venus-violet-600: #6a5da0;
  --color-venus-violet-700: #554884;
  --color-venus-violet-800: #42376b;
  --color-venus-violet-900: #332956;
  --color-venus-violet-950: #201938;
  --color-ultrapurple-merge: #59559d;
  --color-ultrapurple-merge-50: #f3f4ff;
  --color-ultrapurple-merge-100: #e8e9ff;
  --color-ultrapurple-merge-200: #d4d5ff;
  --color-ultrapurple-merge-300: #bdbdff;
  --color-ultrapurple-merge-400: #9f9ee8;
  --color-ultrapurple-merge-500: #8684d0;
  --color-ultrapurple-merge-600: #6d6bb4;
  --color-ultrapurple-merge-700: #59559d;
  --color-ultrapurple-merge-800: #45417e;
  --color-ultrapurple-merge-900: #353165;
  --color-ultrapurple-merge-950: #201e44;
  --color-deep-space-royal: #31337d;
  --color-deep-space-royal-50: #f2f4ff;
  --color-deep-space-royal-100: #e6eaff;
  --color-deep-space-royal-200: #cdd5ff;
  --color-deep-space-royal-300: #b0bbff;
  --color-deep-space-royal-400: #8e98e9;
  --color-deep-space-royal-500: #727bcc;
  --color-deep-space-royal-600: #5960ad;
  --color-deep-space-royal-700: #44498e;
  --color-deep-space-royal-800: #31337d;
  --color-deep-space-royal-900: #26295b;
  --color-deep-space-royal-950: #16183c;
}