Black Magic to Rum Color Palette

About this palette

Black Magic to Rum is a 5-color muted, cool palette: #524257 (Black Magic), #F7E8F9 (Perfume Haze), #D0BCD1 (Tamed Beauty), #AC90AC (Metal Petal), #776178 (Rum). It mixes purple, white, pink tones and feels cool overall. The strongest text pairing is #524257 on #F7E8F9 with a contrast ratio of 7.85:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Magic	rgb(82, 66, 87)	hsl(286, 14%, 30%)
Perfume Haze	rgb(247, 232, 249)	hsl(293, 59%, 94%)
Tamed Beauty	rgb(208, 188, 209)	hsl(297, 19%, 78%)
Metal Petal	rgb(172, 144, 172)	hsl(300, 14%, 62%)
Rum	rgb(119, 97, 120)	hsl(297, 11%, 43%)

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.

Aa7.85:1 Very good#524257 on #F7E8F9
Aa7.85:1 Very good#F7E8F9 on #524257
Aa5.18:1 Good#524257 on #D0BCD1
Aa5.18:1 Good#D0BCD1 on #524257
Aa4.74:1 Good#F7E8F9 on #776178
Aa4.74:1 Good#776178 on #F7E8F9
Aa3.23:1 Poor#524257 on #AC90AC
Aa3.23:1 Poor#AC90AC on #524257

Color blindness preview

CSS variables

/* Black Magic to Rum — https://swatchly.xyz/palette/524257-f7e8f9-d0bcd1-ac90ac-776178 */
:root {
  --black-magic: #524257;
  --perfume-haze: #f7e8f9;
  --tamed-beauty: #d0bcd1;
  --metal-petal: #ac90ac;
  --rum: #776178;
}

Tailwind CSS v4

/* Black Magic to Rum — https://swatchly.xyz/palette/524257-f7e8f9-d0bcd1-ac90ac-776178 */
@theme {
  --color-black-magic: #524257;
  --color-black-magic-50: #fcf1ff;
  --color-black-magic-100: #f2e6f6;
  --color-black-magic-200: #e0d2e5;
  --color-black-magic-300: #ccbcd1;
  --color-black-magic-400: #ae9db4;
  --color-black-magic-500: #94829a;
  --color-black-magic-600: #7a6980;
  --color-black-magic-700: #645469;
  --color-black-magic-800: #524257;
  --color-black-magic-900: #3f3343;
  --color-black-magic-950: #281f2b;
  --color-perfume-haze: #f7e8f9;
  --color-perfume-haze-50: #fcf4fd;
  --color-perfume-haze-100: #f7e8f9;
  --color-perfume-haze-200: #e0d5e2;
  --color-perfume-haze-300: #cabecc;
  --color-perfume-haze-400: #ab9ead;
  --color-perfume-haze-500: #8f8291;
  --color-perfume-haze-600: #746776;
  --color-perfume-haze-700: #5c515e;
  --color-perfume-haze-800: #483e4a;
  --color-perfume-haze-900: #382f39;
  --color-perfume-haze-950: #231d24;
  --color-tamed-beauty: #d0bcd1;
  --color-tamed-beauty-50: #fef2fe;
  --color-tamed-beauty-100: #f5e8f5;
  --color-tamed-beauty-200: #e3d4e4;
  --color-tamed-beauty-300: #d0bcd1;
  --color-tamed-beauty-400: #af9db0;
  --color-tamed-beauty-500: #938194;
  --color-tamed-beauty-600: #786679;
  --color-tamed-beauty-700: #605061;
  --color-tamed-beauty-800: #4b3d4c;
  --color-tamed-beauty-900: #3a2e3b;
  --color-tamed-beauty-950: #241c25;
  --color-metal-petal: #ac90ac;
  --color-metal-petal-50: #feecfd;
  --color-metal-petal-100: #f4e0f4;
  --color-metal-petal-200: #e1cae1;
  --color-metal-petal-300: #cbb1cb;
  --color-metal-petal-400: #ac90ac;
  --color-metal-petal-500: #917691;
  --color-metal-petal-600: #775e77;
  --color-metal-petal-700: #604960;
  --color-metal-petal-800: #4c394d;
  --color-metal-petal-900: #3c2b3c;
  --color-metal-petal-950: #271a27;
  --color-rum: #776178;
  --color-rum-50: #fef0fe;
  --color-rum-100: #f5e5f5;
  --color-rum-200: #e2d0e3;
  --color-rum-300: #cdb8ce;
  --color-rum-400: #ae97af;
  --color-rum-500: #927b93;
  --color-rum-600: #776178;
  --color-rum-700: #5f4c60;
  --color-rum-800: #4b3a4c;
  --color-rum-900: #3a2c3b;
  --color-rum-950: #251b25;
}