Start generating

Scented Spring to Midnight Masquerade color palette

ECD7FFScented SpringCDA4F3LilacAC83CCWisteria725F8EMuted Purple594671Haunted Candelabra352B47Midnight Masquerade
Open in generator Export PNG, PDF, ASE…

About this palette

Scented Spring to Midnight Masquerade is a 6-color cool, monochromatic, gradient palette: #ECD7FF (Scented Spring), #CDA4F3 (Lilac), #AC83CC (Wisteria), #725F8E (Muted Purple), #594671 (Haunted Candelabra), #352B47 (Midnight Masquerade). It mixes purple tones and feels cool overall. The strongest text pairing is #ECD7FF on #352B47 with a contrast ratio of 9.91:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Scented Springrgb(236, 215, 255)hsl(272, 100%, 92%)
Lilacrgb(205, 164, 243)hsl(271, 77%, 80%)
Wisteriargb(172, 131, 204)hsl(274, 42%, 66%)
Muted Purplergb(114, 95, 142)hsl(264, 20%, 46%)
Haunted Candelabrargb(89, 70, 113)hsl(267, 23%, 36%)
Midnight Masqueradergb(53, 43, 71)hsl(261, 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.

  • Aa9.91:1 Very good#ECD7FF on #352B47
  • Aa9.91:1 Very good#352B47 on #ECD7FF
  • Aa6.42:1 Good#CDA4F3 on #352B47
  • Aa6.42:1 Good#352B47 on #CDA4F3
  • Aa6.19:1 Good#ECD7FF on #594671
  • Aa6.19:1 Good#594671 on #ECD7FF
  • Aa4.33:1 Poor#AC83CC on #352B47
  • Aa4.33:1 Poor#352B47 on #AC83CC

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Scented Spring to Midnight Masquerade — https://swatchly.xyz/palette/ecd7ff-cda4f3-ac83cc-725f8e-594671-352b47 */
:root {
  --scented-spring: #ecd7ff;
  --lilac: #cda4f3;
  --wisteria: #ac83cc;
  --muted-purple: #725f8e;
  --haunted-candelabra: #594671;
  --midnight-masquerade: #352b47;
}

Tailwind CSS v4

/* Scented Spring to Midnight Masquerade — https://swatchly.xyz/palette/ecd7ff-cda4f3-ac83cc-725f8e-594671-352b47 */
@theme {
  --color-scented-spring: #ecd7ff;
  --color-scented-spring-50: #fdfaff;
  --color-scented-spring-100: #f7efff;
  --color-scented-spring-200: #ecd7ff;
  --color-scented-spring-300: #d1c1e1;
  --color-scented-spring-400: #b19ec2;
  --color-scented-spring-500: #9581a6;
  --color-scented-spring-600: #786688;
  --color-scented-spring-700: #5f4e6e;
  --color-scented-spring-800: #4a3b56;
  --color-scented-spring-900: #392d44;
  --color-scented-spring-950: #241b2b;
  --color-lilac: #cda4f3;
  --color-lilac-50: #f5ecff;
  --color-lilac-100: #eeddff;
  --color-lilac-200: #e0c1ff;
  --color-lilac-300: #cda4f3;
  --color-lilac-400: #ae87d2;
  --color-lilac-500: #946db7;
  --color-lilac-600: #7a549b;
  --color-lilac-700: #634080;
  --color-lilac-800: #4f3169;
  --color-lilac-900: #3f2455;
  --color-lilac-950: #281537;
  --color-wisteria: #ac83cc;
  --color-wisteria-50: #f7edff;
  --color-wisteria-100: #efddff;
  --color-wisteria-200: #e2c1fd;
  --color-wisteria-300: #cba6e9;
  --color-wisteria-400: #ac83cc;
  --color-wisteria-500: #926ab1;
  --color-wisteria-600: #785295;
  --color-wisteria-700: #613f7b;
  --color-wisteria-800: #4e2f64;
  --color-wisteria-900: #3e2451;
  --color-wisteria-950: #281536;
  --color-muted-purple: #725f8e;
  --color-muted-purple-50: #f7f3ff;
  --color-muted-purple-100: #efe6ff;
  --color-muted-purple-200: #ddcef6;
  --color-muted-purple-300: #c7b6e3;
  --color-muted-purple-400: #a895c6;
  --color-muted-purple-500: #8d7aaa;
  --color-muted-purple-600: #725f8e;
  --color-muted-purple-700: #5b4a74;
  --color-muted-purple-800: #47395d;
  --color-muted-purple-900: #372b49;
  --color-muted-purple-950: #23192f;
  --color-haunted-candelabra: #594671;
  --color-haunted-candelabra-50: #f7f2ff;
  --color-haunted-candelabra-100: #f0e6ff;
  --color-haunted-candelabra-200: #decef4;
  --color-haunted-candelabra-300: #c7b6e1;
  --color-haunted-candelabra-400: #a894c3;
  --color-haunted-candelabra-500: #8c78a7;
  --color-haunted-candelabra-600: #705d89;
  --color-haunted-candelabra-700: #594671;
  --color-haunted-candelabra-800: #453658;
  --color-haunted-candelabra-900: #362945;
  --color-haunted-candelabra-950: #21182c;
  --color-midnight-masquerade: #352b47;
  --color-midnight-masquerade-50: #f7f3ff;
  --color-midnight-masquerade-100: #eee7fe;
  --color-midnight-masquerade-200: #dbd2ed;
  --color-midnight-masquerade-300: #c5bbd9;
  --color-midnight-masquerade-400: #a59bbc;
  --color-midnight-masquerade-500: #8a7fa0;
  --color-midnight-masquerade-600: #6f6584;
  --color-midnight-masquerade-700: #584e6a;
  --color-midnight-masquerade-800: #443c54;
  --color-midnight-masquerade-900: #352b47;
  --color-midnight-masquerade-950: #201b29;
}

Similar palettes