Midnight Velvet to Neon Boneyard color palette

2F1B40Midnight Velvet 55357EKingfisher Daisy 974DF2Orion Nebula A383D5Wisteria DAC9FFNeon Boneyard

About this palette

Midnight Velvet to Neon Boneyard is a 5-color cool, monochromatic, gradient palette: #2F1B40 (Midnight Velvet), #55357E (Kingfisher Daisy), #974DF2 (Orion Nebula), #A383D5 (Wisteria), #DAC9FF (Neon Boneyard). It mixes purple tones and feels cool overall. The strongest text pairing is #2F1B40 on #DAC9FF with a contrast ratio of 10.19:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Velvet	rgb(47, 27, 64)	hsl(272, 41%, 18%)
Kingfisher Daisy	rgb(85, 53, 126)	hsl(266, 41%, 35%)
Orion Nebula	rgb(151, 77, 242)	hsl(267, 86%, 63%)
Wisteria	rgb(163, 131, 213)	hsl(263, 49%, 67%)
Neon Boneyard	rgb(218, 201, 255)	hsl(259, 100%, 89%)

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.

Aa10.19:1 Very good#2F1B40 on #DAC9FF
Aa10.19:1 Very good#DAC9FF on #2F1B40
Aa6.27:1 Good#55357E on #DAC9FF
Aa6.27:1 Good#DAC9FF on #55357E
Aa5.00:1 Good#2F1B40 on #A383D5
Aa5.00:1 Good#A383D5 on #2F1B40
Aa3.45:1 Poor#2F1B40 on #974DF2
Aa3.45:1 Poor#974DF2 on #2F1B40

Color blindness preview

CSS variables

/* Midnight Velvet to Neon Boneyard — https://swatchly.xyz/palette/2f1b40-55357e-974df2-a383d5-dac9ff */
:root {
  --midnight-velvet: #2f1b40;
  --kingfisher-daisy: #55357e;
  --orion-nebula: #974df2;
  --wisteria: #a383d5;
  --neon-boneyard: #dac9ff;
}

Tailwind CSS v4

/* Midnight Velvet to Neon Boneyard — https://swatchly.xyz/palette/2f1b40-55357e-974df2-a383d5-dac9ff */
@theme {
  --color-midnight-velvet: #2f1b40;
  --color-midnight-velvet-50: #f8f2ff;
  --color-midnight-velvet-100: #f2e5ff;
  --color-midnight-velvet-200: #e0cff3;
  --color-midnight-velvet-300: #cbb7e0;
  --color-midnight-velvet-400: #ad97c3;
  --color-midnight-velvet-500: #937da9;
  --color-midnight-velvet-600: #79648e;
  --color-midnight-velvet-700: #634f76;
  --color-midnight-velvet-800: #503e61;
  --color-midnight-velvet-900: #40314f;
  --color-midnight-velvet-950: #2f1b40;
  --color-kingfisher-daisy: #55357e;
  --color-kingfisher-daisy-50: #f7f3ff;
  --color-kingfisher-daisy-100: #efe6ff;
  --color-kingfisher-daisy-200: #dfcdff;
  --color-kingfisher-daisy-300: #ceb3fa;
  --color-kingfisher-daisy-400: #b192e0;
  --color-kingfisher-daisy-500: #9777c6;
  --color-kingfisher-daisy-600: #7d5eaa;
  --color-kingfisher-daisy-700: #67498f;
  --color-kingfisher-daisy-800: #55357e;
  --color-kingfisher-daisy-900: #412a60;
  --color-kingfisher-daisy-950: #2a1940;
  --color-orion-nebula: #974df2;
  --color-orion-nebula-50: #f5f1ff;
  --color-orion-nebula-100: #ece3ff;
  --color-orion-nebula-200: #dbc9ff;
  --color-orion-nebula-300: #c7a9ff;
  --color-orion-nebula-400: #af79ff;
  --color-orion-nebula-500: #974df2;
  --color-orion-nebula-600: #7d30d1;
  --color-orion-nebula-700: #6619b1;
  --color-orion-nebula-800: #520592;
  --color-orion-nebula-900: #410076;
  --color-orion-nebula-950: #29004f;
  --color-wisteria: #a383d5;
  --color-wisteria-50: #f3eeff;
  --color-wisteria-100: #eadfff;
  --color-wisteria-200: #d9c3ff;
  --color-wisteria-300: #c3a6f2;
  --color-wisteria-400: #a383d5;
  --color-wisteria-500: #8a6ab9;
  --color-wisteria-600: #71529d;
  --color-wisteria-700: #5b3f83;
  --color-wisteria-800: #49306b;
  --color-wisteria-900: #3a2457;
  --color-wisteria-950: #25153b;
  --color-neon-boneyard: #dac9ff;
  --color-neon-boneyard-50: #f4f0ff;
  --color-neon-boneyard-100: #ebe2ff;
  --color-neon-boneyard-200: #dac9ff;
  --color-neon-boneyard-300: #c3b5e3;
  --color-neon-boneyard-400: #a595c7;
  --color-neon-boneyard-500: #8b7aac;
  --color-neon-boneyard-600: #716190;
  --color-neon-boneyard-700: #5a4c76;
  --color-neon-boneyard-800: #473a5f;
  --color-neon-boneyard-900: #372c4b;
  --color-neon-boneyard-950: #221a31;
}