Midnight Masquerade to Holographic Lavender color palette

352A44Midnight Masquerade 5A4967Nightly Walk 71628EHeron A18ABBPetrified Purple D1B8F3Violet Heaven EEE7FFHolographic Lavender

Open in generator Export PNG, PDF, ASE…

About this palette

Midnight Masquerade to Holographic Lavender is a 6-color cool, monochromatic, gradient palette: #352A44 (Midnight Masquerade), #5A4967 (Nightly Walk), #71628E (Heron), #A18ABB (Petrified Purple), #D1B8F3 (Violet Heaven), #EEE7FF (Holographic Lavender). It mixes purple, white tones and feels cool overall. The strongest text pairing is #352A44 on #EEE7FF with a contrast ratio of 11.18:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Masquerade	rgb(53, 42, 68)	hsl(265, 24%, 22%)
Nightly Walk	rgb(90, 73, 103)	hsl(274, 17%, 35%)
Heron	rgb(113, 98, 142)	hsl(260, 18%, 47%)
Petrified Purple	rgb(161, 138, 187)	hsl(268, 26%, 64%)
Violet Heaven	rgb(209, 184, 243)	hsl(265, 71%, 84%)
Holographic Lavender	rgb(238, 231, 255)	hsl(258, 100%, 95%)

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.18:1 Very good#352A44 on #EEE7FF
Aa11.18:1 Very good#EEE7FF on #352A44
Aa7.57:1 Very good#352A44 on #D1B8F3
Aa7.57:1 Very good#D1B8F3 on #352A44
Aa6.78:1 Good#5A4967 on #EEE7FF
Aa6.78:1 Good#EEE7FF on #5A4967
Aa4.59:1 Good#5A4967 on #D1B8F3
Aa4.59:1 Good#D1B8F3 on #5A4967

Color blindness preview

CSS variables

/* Midnight Masquerade to Holographic Lavender — https://swatchly.xyz/palette/352a44-5a4967-71628e-a18abb-d1b8f3-eee7ff */
:root {
  --midnight-masquerade: #352a44;
  --nightly-walk: #5a4967;
  --heron: #71628e;
  --petrified-purple: #a18abb;
  --violet-heaven: #d1b8f3;
  --holographic-lavender: #eee7ff;
}

Tailwind CSS v4

/* Midnight Masquerade to Holographic Lavender — https://swatchly.xyz/palette/352a44-5a4967-71628e-a18abb-d1b8f3-eee7ff */
@theme {
  --color-midnight-masquerade: #352a44;
  --color-midnight-masquerade-50: #f7f3ff;
  --color-midnight-masquerade-100: #efe7fc;
  --color-midnight-masquerade-200: #dcd2eb;
  --color-midnight-masquerade-300: #c6bbd7;
  --color-midnight-masquerade-400: #a79ab9;
  --color-midnight-masquerade-500: #8b7e9d;
  --color-midnight-masquerade-600: #706481;
  --color-midnight-masquerade-700: #584e68;
  --color-midnight-masquerade-800: #443b51;
  --color-midnight-masquerade-900: #352a44;
  --color-midnight-masquerade-950: #201a27;
  --color-nightly-walk: #5a4967;
  --color-nightly-walk-50: #f9f2ff;
  --color-nightly-walk-100: #f2e6fc;
  --color-nightly-walk-200: #dfd0eb;
  --color-nightly-walk-300: #c8b8d6;
  --color-nightly-walk-400: #a997b7;
  --color-nightly-walk-500: #8d7b9b;
  --color-nightly-walk-600: #71607f;
  --color-nightly-walk-700: #5a4967;
  --color-nightly-walk-800: #463950;
  --color-nightly-walk-900: #362b3f;
  --color-nightly-walk-950: #221a28;
  --color-heron: #71628e;
  --color-heron-50: #f6f3ff;
  --color-heron-100: #eee7ff;
  --color-heron-200: #dcd0f5;
  --color-heron-300: #c6b8e2;
  --color-heron-400: #a798c5;
  --color-heron-500: #8c7caa;
  --color-heron-600: #71628e;
  --color-heron-700: #5a4d74;
  --color-heron-800: #473b5d;
  --color-heron-900: #362c49;
  --color-heron-950: #221b2f;
  --color-petrified-purple: #a18abb;
  --color-petrified-purple-50: #f5edff;
  --color-petrified-purple-100: #edddff;
  --color-petrified-purple-200: #d9c6ef;
  --color-petrified-purple-300: #c1acda;
  --color-petrified-purple-400: #a18abb;
  --color-petrified-purple-500: #8871a1;
  --color-petrified-purple-600: #6f5986;
  --color-petrified-purple-700: #59466e;
  --color-petrified-purple-800: #473659;
  --color-petrified-purple-900: #382a47;
  --color-petrified-purple-950: #241a2f;
  --color-violet-heaven: #d1b8f3;
  --color-violet-heaven-50: #f9f5ff;
  --color-violet-heaven-100: #f2eaff;
  --color-violet-heaven-200: #e4d2fd;
  --color-violet-heaven-300: #d1b8f3;
  --color-violet-heaven-400: #b099cf;
  --color-violet-heaven-500: #947cb3;
  --color-violet-heaven-600: #786196;
  --color-violet-heaven-700: #604b7b;
  --color-violet-heaven-800: #4b3962;
  --color-violet-heaven-900: #3a2a4d;
  --color-violet-heaven-950: #241932;
  --color-holographic-lavender: #eee7ff;
  --color-holographic-lavender-50: #f6f3ff;
  --color-holographic-lavender-100: #eee7ff;
  --color-holographic-lavender-200: #d9d4e6;
  --color-holographic-lavender-300: #c3bdd1;
  --color-holographic-lavender-400: #a49eb3;
  --color-holographic-lavender-500: #898298;
  --color-holographic-lavender-600: #6e687c;
  --color-holographic-lavender-700: #575264;
  --color-holographic-lavender-800: #443f4f;
  --color-holographic-lavender-900: #34303e;
  --color-holographic-lavender-950: #201d27;
}