Dark Matter to Heavy Violet color palette

180001Dark Matter 43082CDark Sanctuary 552200Evil Cigar 6E2E72Galactic Grapevine 4F5671Heavy Violet

About this palette

Dark Matter to Heavy Violet is a 5-color dark, warm palette: #180001 (Dark Matter), #43082C (Dark Sanctuary), #552200 (Evil Cigar), #6E2E72 (Galactic Grapevine), #4F5671 (Heavy Violet). It mixes black, red, brown, purple, blue tones and feels warm overall. The strongest text pairing is #180001 on #4F5671 with a contrast ratio of 2.79:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Matter	rgb(24, 0, 1)	hsl(358, 100%, 5%)
Dark Sanctuary	rgb(67, 8, 44)	hsl(323, 79%, 15%)
Evil Cigar	rgb(85, 34, 0)	hsl(24, 100%, 17%)
Galactic Grapevine	rgb(110, 46, 114)	hsl(296, 43%, 31%)
Heavy Violet	rgb(79, 86, 113)	hsl(228, 18%, 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.

Color blindness preview

CSS variables

/* Dark Matter to Heavy Violet — https://swatchly.xyz/palette/180001-43082c-552200-6e2e72-4f5671 */
:root {
  --dark-matter: #180001;
  --dark-sanctuary: #43082c;
  --evil-cigar: #552200;
  --galactic-grapevine: #6e2e72;
  --heavy-violet: #4f5671;
}

Tailwind CSS v4

/* Dark Matter to Heavy Violet — https://swatchly.xyz/palette/180001-43082c-552200-6e2e72-4f5671 */
@theme {
  --color-dark-matter: #180001;
  --color-dark-matter-50: #fff2f0;
  --color-dark-matter-100: #ffe4e2;
  --color-dark-matter-200: #f1cecb;
  --color-dark-matter-300: #ddb6b3;
  --color-dark-matter-400: #c09692;
  --color-dark-matter-500: #9e7572;
  --color-dark-matter-600: #7c5653;
  --color-dark-matter-700: #5d3d3b;
  --color-dark-matter-800: #412826;
  --color-dark-matter-900: #291716;
  --color-dark-matter-950: #180001;
  --color-dark-sanctuary: #43082c;
  --color-dark-sanctuary-50: #fff1f7;
  --color-dark-sanctuary-100: #ffe2ef;
  --color-dark-sanctuary-200: #fcc5df;
  --color-dark-sanctuary-300: #eaacca;
  --color-dark-sanctuary-400: #cd8aab;
  --color-dark-sanctuary-500: #b26f91;
  --color-dark-sanctuary-600: #965677;
  --color-dark-sanctuary-700: #7d4261;
  --color-dark-sanctuary-800: #66324e;
  --color-dark-sanctuary-900: #53263e;
  --color-dark-sanctuary-950: #43082c;
  --color-evil-cigar: #552200;
  --color-evil-cigar-50: #fff2ec;
  --color-evil-cigar-100: #ffe5d8;
  --color-evil-cigar-200: #fcccb3;
  --color-evil-cigar-300: #eab397;
  --color-evil-cigar-400: #cd9273;
  --color-evil-cigar-500: #b17657;
  --color-evil-cigar-600: #945c3e;
  --color-evil-cigar-700: #79472b;
  --color-evil-cigar-800: #62361d;
  --color-evil-cigar-900: #552200;
  --color-evil-cigar-950: #321708;
  --color-galactic-grapevine: #6e2e72;
  --color-galactic-grapevine-50: #ffefff;
  --color-galactic-grapevine-100: #fee0ff;
  --color-galactic-grapevine-200: #f7c0f9;
  --color-galactic-grapevine-300: #e2a4e5;
  --color-galactic-grapevine-400: #c480c7;
  --color-galactic-grapevine-500: #a663a9;
  --color-galactic-grapevine-600: #87488b;
  --color-galactic-grapevine-700: #6e2e72;
  --color-galactic-grapevine-800: #552558;
  --color-galactic-grapevine-900: #431a46;
  --color-galactic-grapevine-950: #2b0e2d;
  --color-heavy-violet: #4f5671;
  --color-heavy-violet-50: #f2f5ff;
  --color-heavy-violet-100: #e5eaff;
  --color-heavy-violet-200: #d0d7ef;
  --color-heavy-violet-300: #b9c1db;
  --color-heavy-violet-400: #9aa1be;
  --color-heavy-violet-500: #7f86a4;
  --color-heavy-violet-600: #656c88;
  --color-heavy-violet-700: #4f5671;
  --color-heavy-violet-800: #3d4359;
  --color-heavy-violet-900: #2e3346;
  --color-heavy-violet-950: #1c1f2d;
}