Midnight Velvet to White Asparagus color palette

2E243EMidnight Velvet 3E5E00Deep Forestial Escapade 8F75DDMatt Purple BF8DEFDreamy Candy Forest E3E9C0White Asparagus

Open in generator Export PNG, PDF, ASE…

About this palette

Midnight Velvet to White Asparagus is a 5-color cool palette: #2E243E (Midnight Velvet), #3E5E00 (Deep Forestial Escapade), #8F75DD (Matt Purple), #BF8DEF (Dreamy Candy Forest), #E3E9C0 (White Asparagus). It mixes purple, green tones and feels cool overall. The strongest text pairing is #2E243E on #E3E9C0 with a contrast ratio of 11.60:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Velvet	rgb(46, 36, 62)	hsl(263, 27%, 19%)
Deep Forestial Escapade	rgb(62, 94, 0)	hsl(80, 100%, 18%)
Matt Purple	rgb(143, 117, 221)	hsl(255, 60%, 66%)
Dreamy Candy Forest	rgb(191, 141, 239)	hsl(271, 75%, 75%)
White Asparagus	rgb(227, 233, 192)	hsl(69, 48%, 83%)

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.

Aa11.60:1 Very good#2E243E on #E3E9C0
Aa11.60:1 Very good#E3E9C0 on #2E243E
Aa5.95:1 Good#3E5E00 on #E3E9C0
Aa5.95:1 Good#E3E9C0 on #3E5E00
Aa5.75:1 Good#2E243E on #BF8DEF
Aa5.75:1 Good#BF8DEF on #2E243E
Aa4.00:1 Poor#2E243E on #8F75DD
Aa4.00:1 Poor#8F75DD on #2E243E

Color blindness preview

CSS variables

/* Midnight Velvet to White Asparagus — https://swatchly.xyz/palette/2e243e-3e5e00-8f75dd-bf8def-e3e9c0 */
:root {
  --midnight-velvet: #2e243e;
  --deep-forestial-escapade: #3e5e00;
  --matt-purple: #8f75dd;
  --dreamy-candy-forest: #bf8def;
  --white-asparagus: #e3e9c0;
}

Tailwind CSS v4

/* Midnight Velvet to White Asparagus — https://swatchly.xyz/palette/2e243e-3e5e00-8f75dd-bf8def-e3e9c0 */
@theme {
  --color-midnight-velvet: #2e243e;
  --color-midnight-velvet-50: #f7f3ff;
  --color-midnight-velvet-100: #eee7fd;
  --color-midnight-velvet-200: #dbd3ec;
  --color-midnight-velvet-300: #c5bbd8;
  --color-midnight-velvet-400: #a499b9;
  --color-midnight-velvet-500: #877c9b;
  --color-midnight-velvet-600: #6b617e;
  --color-midnight-velvet-700: #534963;
  --color-midnight-velvet-800: #3e364c;
  --color-midnight-velvet-900: #2e243e;
  --color-midnight-velvet-950: #1a1622;
  --color-deep-forestial-escapade: #3e5e00;
  --color-deep-forestial-escapade-50: #e8fed1;
  --color-deep-forestial-escapade-100: #dcf5c2;
  --color-deep-forestial-escapade-200: #c5e3a6;
  --color-deep-forestial-escapade-300: #accd87;
  --color-deep-forestial-escapade-400: #8aae60;
  --color-deep-forestial-escapade-500: #6e9141;
  --color-deep-forestial-escapade-600: #557626;
  --color-deep-forestial-escapade-700: #3e5e00;
  --color-deep-forestial-escapade-800: #304902;
  --color-deep-forestial-escapade-900: #243900;
  --color-deep-forestial-escapade-950: #152300;
  --color-matt-purple: #8f75dd;
  --color-matt-purple-50: #f6f4ff;
  --color-matt-purple-100: #ede9ff;
  --color-matt-purple-200: #dad3ff;
  --color-matt-purple-300: #c6b8ff;
  --color-matt-purple-400: #a992f7;
  --color-matt-purple-500: #8f75dd;
  --color-matt-purple-600: #7459bd;
  --color-matt-purple-700: #5d439e;
  --color-matt-purple-800: #493182;
  --color-matt-purple-900: #382368;
  --color-matt-purple-950: #231345;
  --color-dreamy-candy-forest: #bf8def;
  --color-dreamy-candy-forest-50: #faf5ff;
  --color-dreamy-candy-forest-100: #f3e9ff;
  --color-dreamy-candy-forest-200: #e7d1ff;
  --color-dreamy-candy-forest-300: #d8b3ff;
  --color-dreamy-candy-forest-400: #bf8def;
  --color-dreamy-candy-forest-500: #a270cf;
  --color-dreamy-candy-forest-600: #8555b0;
  --color-dreamy-candy-forest-700: #6c3e93;
  --color-dreamy-candy-forest-800: #552d77;
  --color-dreamy-candy-forest-900: #42205e;
  --color-dreamy-candy-forest-950: #2a113e;
  --color-white-asparagus: #e3e9c0;
  --color-white-asparagus-50: #eef2da;
  --color-white-asparagus-100: #e3e9c0;
  --color-white-asparagus-200: #d1d5b6;
  --color-white-asparagus-300: #bbc09e;
  --color-white-asparagus-400: #9da27d;
  --color-white-asparagus-500: #838862;
  --color-white-asparagus-600: #6a6f4b;
  --color-white-asparagus-700: #555938;
  --color-white-asparagus-800: #424528;
  --color-white-asparagus-900: #32351d;
  --color-white-asparagus-950: #1f210f;
}