Twilight to Midnight Masquerade color palette

57518DTwilight 847CB8Aster AEA7EBWondrous Wisteria E7EAFFFoundation White 2D2A46Midnight Masquerade

About this palette

Twilight to Midnight Masquerade is a 5-color cool, monochromatic palette: #57518D (Twilight), #847CB8 (Aster), #AEA7EB (Wondrous Wisteria), #E7EAFF (Foundation White), #2D2A46 (Midnight Masquerade). It mixes purple, white tones and feels cool overall. The strongest text pairing is #E7EAFF on #2D2A46 with a contrast ratio of 11.50:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Twilight	rgb(87, 81, 141)	hsl(246, 27%, 44%)
Aster	rgb(132, 124, 184)	hsl(248, 30%, 60%)
Wondrous Wisteria	rgb(174, 167, 235)	hsl(246, 63%, 79%)
Foundation White	rgb(231, 234, 255)	hsl(233, 100%, 95%)
Midnight Masquerade	rgb(45, 42, 70)	hsl(246, 25%, 22%)

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.50:1 Very good#E7EAFF on #2D2A46
Aa11.50:1 Very good#2D2A46 on #E7EAFF
Aa6.22:1 Good#AEA7EB on #2D2A46
Aa6.22:1 Good#2D2A46 on #AEA7EB
Aa5.94:1 Good#57518D on #E7EAFF
Aa5.94:1 Good#E7EAFF on #57518D
Aa3.63:1 Poor#847CB8 on #2D2A46
Aa3.63:1 Poor#2D2A46 on #847CB8

Color blindness preview

CSS variables

/* Twilight to Midnight Masquerade — https://swatchly.xyz/palette/57518d-847cb8-aea7eb-e7eaff-2d2a46 */
:root {
  --twilight: #57518d;
  --aster: #847cb8;
  --wondrous-wisteria: #aea7eb;
  --foundation-white: #e7eaff;
  --midnight-masquerade: #2d2a46;
}

Tailwind CSS v4

/* Twilight to Midnight Masquerade — https://swatchly.xyz/palette/57518d-847cb8-aea7eb-e7eaff-2d2a46 */
@theme {
  --color-twilight: #57518d;
  --color-twilight-50: #f4f4ff;
  --color-twilight-100: #e9e9ff;
  --color-twilight-200: #d5d3ff;
  --color-twilight-300: #bebcf5;
  --color-twilight-400: #a09cdb;
  --color-twilight-500: #8681c1;
  --color-twilight-600: #6c67a5;
  --color-twilight-700: #57518d;
  --color-twilight-800: #443f70;
  --color-twilight-900: #342f59;
  --color-twilight-950: #201c3b;
  --color-aster: #847cb8;
  --color-aster-50: #f4f3ff;
  --color-aster-100: #eae8ff;
  --color-aster-200: #d5d1ff;
  --color-aster-300: #bfb9ef;
  --color-aster-400: #9f98d4;
  --color-aster-500: #847cb8;
  --color-aster-600: #6a629b;
  --color-aster-700: #544c80;
  --color-aster-800: #413a67;
  --color-aster-900: #322c52;
  --color-aster-950: #1f1a36;
  --color-wondrous-wisteria: #aea7eb;
  --color-wondrous-wisteria-50: #fafaff;
  --color-wondrous-wisteria-100: #f2f2ff;
  --color-wondrous-wisteria-200: #e0deff;
  --color-wondrous-wisteria-300: #cbc7fe;
  --color-wondrous-wisteria-400: #aea7eb;
  --color-wondrous-wisteria-500: #9089ca;
  --color-wondrous-wisteria-600: #736baa;
  --color-wondrous-wisteria-700: #5a538c;
  --color-wondrous-wisteria-800: #453e71;
  --color-wondrous-wisteria-900: #342e58;
  --color-wondrous-wisteria-950: #1f1a38;
  --color-foundation-white: #e7eaff;
  --color-foundation-white-50: #f3f5ff;
  --color-foundation-white-100: #e7eaff;
  --color-foundation-white-200: #d4d7e6;
  --color-foundation-white-300: #bdc0d1;
  --color-foundation-white-400: #9ea0b3;
  --color-foundation-white-500: #828598;
  --color-foundation-white-600: #686a7c;
  --color-foundation-white-700: #525464;
  --color-foundation-white-800: #3f414f;
  --color-foundation-white-900: #30323e;
  --color-foundation-white-950: #1d1f27;
  --color-midnight-masquerade: #2d2a46;
  --color-midnight-masquerade-50: #f4f4ff;
  --color-midnight-masquerade-100: #eae8ff;
  --color-midnight-masquerade-200: #d6d4ef;
  --color-midnight-masquerade-300: #bfbddc;
  --color-midnight-masquerade-400: #9e9cbe;
  --color-midnight-masquerade-500: #8280a1;
  --color-midnight-masquerade-600: #676584;
  --color-midnight-masquerade-700: #504e6a;
  --color-midnight-masquerade-800: #3d3b53;
  --color-midnight-masquerade-900: #2d2a46;
  --color-midnight-masquerade-950: #1b1a28;
}