Black Magic to Dripping Wisteria color palette

513D50Black Magic EDE0EFPink Champagne 8F7794Muted Berry 201821Night Demons B69EBEDripping Wisteria

About this palette

Black Magic to Dripping Wisteria is a 5-color muted, cool palette: #513D50 (Black Magic), #EDE0EF (Pink Champagne), #8F7794 (Muted Berry), #201821 (Night Demons), #B69EBE (Dripping Wisteria). It mixes purple, gray tones and feels cool overall. The strongest text pairing is #EDE0EF on #201821 with a contrast ratio of 13.60:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Magic	rgb(81, 61, 80)	hsl(303, 14%, 28%)
Pink Champagne	rgb(237, 224, 239)	hsl(292, 32%, 91%)
Muted Berry	rgb(143, 119, 148)	hsl(290, 12%, 52%)
Night Demons	rgb(32, 24, 33)	hsl(293, 16%, 11%)
Dripping Wisteria	rgb(182, 158, 190)	hsl(285, 20%, 68%)

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.

Aa13.60:1 Super#EDE0EF on #201821
Aa13.60:1 Super#201821 on #EDE0EF
Aa7.74:1 Very good#513D50 on #EDE0EF
Aa7.74:1 Very good#EDE0EF on #513D50
Aa7.10:1 Very good#201821 on #B69EBE
Aa7.10:1 Very good#B69EBE on #201821
Aa4.31:1 Poor#8F7794 on #201821
Aa4.31:1 Poor#201821 on #8F7794

Color blindness preview

CSS variables

/* Black Magic to Dripping Wisteria — https://swatchly.xyz/palette/513d50-ede0ef-8f7794-201821-b69ebe */
:root {
  --black-magic: #513d50;
  --pink-champagne: #ede0ef;
  --muted-berry: #8f7794;
  --night-demons: #201821;
  --dripping-wisteria: #b69ebe;
}

Tailwind CSS v4

/* Black Magic to Dripping Wisteria — https://swatchly.xyz/palette/513d50-ede0ef-8f7794-201821-b69ebe */
@theme {
  --color-black-magic: #513d50;
  --color-black-magic-50: #fef0fd;
  --color-black-magic-100: #f5e6f4;
  --color-black-magic-200: #e3d1e2;
  --color-black-magic-300: #cebacd;
  --color-black-magic-400: #b19aaf;
  --color-black-magic-500: #967f94;
  --color-black-magic-600: #7b657a;
  --color-black-magic-700: #635062;
  --color-black-magic-800: #513d50;
  --color-black-magic-900: #3e2f3d;
  --color-black-magic-950: #271d27;
  --color-pink-champagne: #ede0ef;
  --color-pink-champagne-50: #f5edf6;
  --color-pink-champagne-100: #ede0ef;
  --color-pink-champagne-200: #d8cfda;
  --color-pink-champagne-300: #c4b9c5;
  --color-pink-champagne-400: #a69aa8;
  --color-pink-champagne-500: #8b808d;
  --color-pink-champagne-600: #726773;
  --color-pink-champagne-700: #5b515d;
  --color-pink-champagne-800: #483f49;
  --color-pink-champagne-900: #373038;
  --color-pink-champagne-950: #221d23;
  --color-muted-berry: #8f7794;
  --color-muted-berry-50: #fcefff;
  --color-muted-berry-100: #f3e3f7;
  --color-muted-berry-200: #e1cde5;
  --color-muted-berry-300: #cbb4cf;
  --color-muted-berry-400: #ab93b0;
  --color-muted-berry-500: #8f7794;
  --color-muted-berry-600: #755e79;
  --color-muted-berry-700: #5e4a62;
  --color-muted-berry-800: #4a394e;
  --color-muted-berry-900: #3a2b3d;
  --color-muted-berry-950: #251a27;
  --color-night-demons: #201821;
  --color-night-demons-50: #f9f3fa;
  --color-night-demons-100: #efe8f0;
  --color-night-demons-200: #ddd4de;
  --color-night-demons-300: #c7bdc8;
  --color-night-demons-400: #a89ea9;
  --color-night-demons-500: #8c818d;
  --color-night-demons-600: #706671;
  --color-night-demons-700: #585059;
  --color-night-demons-800: #443c45;
  --color-night-demons-900: #332d34;
  --color-night-demons-950: #201821;
  --color-dripping-wisteria: #b69ebe;
  --color-dripping-wisteria-50: #fcf4ff;
  --color-dripping-wisteria-100: #f8e8fd;
  --color-dripping-wisteria-200: #e7d5ed;
  --color-dripping-wisteria-300: #d3bed9;
  --color-dripping-wisteria-400: #b69ebe;
  --color-dripping-wisteria-500: #9982a1;
  --color-dripping-wisteria-600: #7d6684;
  --color-dripping-wisteria-700: #64506a;
  --color-dripping-wisteria-800: #4e3d54;
  --color-dripping-wisteria-900: #3c2d41;
  --color-dripping-wisteria-950: #251b29;
}