Black Magic to Italian Basil color palette

51485BBlack Magic A7A3C0Pastel Purple 1D1A21Night Demons D1D4BCMedlar 626B57Italian Basil

About this palette

Black Magic to Italian Basil is a 5-color muted palette: #51485B (Black Magic), #A7A3C0 (Pastel Purple), #1D1A21 (Night Demons), #D1D4BC (Medlar), #626B57 (Italian Basil). It mixes gray, purple tones and feels cool overall. The strongest text pairing is #1D1A21 on #D1D4BC with a contrast ratio of 11.34:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Magic	rgb(81, 72, 91)	hsl(268, 12%, 32%)
Pastel Purple	rgb(167, 163, 192)	hsl(248, 19%, 70%)
Night Demons	rgb(29, 26, 33)	hsl(266, 12%, 12%)
Medlar	rgb(209, 212, 188)	hsl(68, 22%, 78%)
Italian Basil	rgb(98, 107, 87)	hsl(87, 10%, 38%)

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.34:1 Very good#1D1A21 on #D1D4BC
Aa11.34:1 Very good#D1D4BC on #1D1A21
Aa7.07:1 Very good#A7A3C0 on #1D1A21
Aa7.07:1 Very good#1D1A21 on #A7A3C0
Aa5.71:1 Good#51485B on #D1D4BC
Aa5.71:1 Good#D1D4BC on #51485B
Aa3.68:1 Poor#D1D4BC on #626B57
Aa3.68:1 Poor#626B57 on #D1D4BC

Color blindness preview

CSS variables

/* Black Magic to Italian Basil — https://swatchly.xyz/palette/51485b-a7a3c0-1d1a21-d1d4bc-626b57 */
:root {
  --black-magic: #51485b;
  --pastel-purple: #a7a3c0;
  --night-demons: #1d1a21;
  --medlar: #d1d4bc;
  --italian-basil: #626b57;
}

Tailwind CSS v4

/* Black Magic to Italian Basil — https://swatchly.xyz/palette/51485b-a7a3c0-1d1a21-d1d4bc-626b57 */
@theme {
  --color-black-magic: #51485b;
  --color-black-magic-50: #f8f2ff;
  --color-black-magic-100: #eee8f6;
  --color-black-magic-200: #dad2e3;
  --color-black-magic-300: #c2b9cc;
  --color-black-magic-400: #a198ad;
  --color-black-magic-500: #857b90;
  --color-black-magic-600: #696073;
  --color-black-magic-700: #51485b;
  --color-black-magic-800: #3f3846;
  --color-black-magic-900: #302b37;
  --color-black-magic-950: #1e1922;
  --color-pastel-purple: #a7a3c0;
  --color-pastel-purple-50: #f7f6ff;
  --color-pastel-purple-100: #eeecfe;
  --color-pastel-purple-200: #dbd8ee;
  --color-pastel-purple-300: #c6c2db;
  --color-pastel-purple-400: #a7a3c0;
  --color-pastel-purple-500: #8b87a3;
  --color-pastel-purple-600: #6f6b86;
  --color-pastel-purple-700: #58546c;
  --color-pastel-purple-800: #444156;
  --color-pastel-purple-900: #343143;
  --color-pastel-purple-950: #1f1d2a;
  --color-night-demons: #1d1a21;
  --color-night-demons-50: #f6f4f9;
  --color-night-demons-100: #eceaf0;
  --color-night-demons-200: #d9d6dd;
  --color-night-demons-300: #c2bfc7;
  --color-night-demons-400: #a39fa8;
  --color-night-demons-500: #87838c;
  --color-night-demons-600: #6c6871;
  --color-night-demons-700: #555159;
  --color-night-demons-800: #413e45;
  --color-night-demons-900: #312e34;
  --color-night-demons-950: #1d1a21;
  --color-medlar: #d1d4bc;
  --color-medlar-50: #f1f3e4;
  --color-medlar-100: #e6e8d8;
  --color-medlar-200: #d1d4bc;
  --color-medlar-300: #bcbeaa;
  --color-medlar-400: #9da08a;
  --color-medlar-500: #838670;
  --color-medlar-600: #6a6c57;
  --color-medlar-700: #545643;
  --color-medlar-800: #424433;
  --color-medlar-900: #333426;
  --color-medlar-950: #1f2016;
  --color-italian-basil: #626b57;
  --color-italian-basil-50: #f2f8eb;
  --color-italian-basil-100: #e6eddf;
  --color-italian-basil-200: #d1d9c8;
  --color-italian-basil-300: #b9c2af;
  --color-italian-basil-400: #99a28d;
  --color-italian-basil-500: #7d8671;
  --color-italian-basil-600: #626b57;
  --color-italian-basil-700: #4d5543;
  --color-italian-basil-800: #3c4233;
  --color-italian-basil-900: #2d3326;
  --color-italian-basil-950: #1c2016;
}