Dark Matter to Hot Brown Color Palette

About this palette

Dark Matter to Hot Brown is a 5-color dark, cool palette: #170100 (Dark Matter), #3D093E (Eggplant), #452C47 (Sanctum of Shadows), #552474 (Purple Seduction), #93421A (Hot Brown). It mixes black, purple, brown tones and feels cool overall. The strongest text pairing is #170100 on #93421A with a contrast ratio of 2.92:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Matter	rgb(23, 1, 0)	hsl(3, 100%, 5%)
Eggplant	rgb(61, 9, 62)	hsl(299, 75%, 14%)
Sanctum of Shadows	rgb(69, 44, 71)	hsl(296, 23%, 23%)
Purple Seduction	rgb(85, 36, 116)	hsl(277, 53%, 30%)
Hot Brown	rgb(147, 66, 26)	hsl(20, 70%, 34%)

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 Hot Brown — https://swatchly.xyz/palette/170100-3d093e-452c47-552474-93421a */
:root {
  --dark-matter: #170100;
  --eggplant: #3d093e;
  --sanctum-of-shadows: #452c47;
  --purple-seduction: #552474;
  --hot-brown: #93421a;
}

Tailwind CSS v4

/* Dark Matter to Hot Brown — https://swatchly.xyz/palette/170100-3d093e-452c47-552474-93421a */
@theme {
  --color-dark-matter: #170100;
  --color-dark-matter-50: #fff2ef;
  --color-dark-matter-100: #ffe4de;
  --color-dark-matter-200: #eecfc8;
  --color-dark-matter-300: #dbb8b0;
  --color-dark-matter-400: #bd978f;
  --color-dark-matter-500: #9c776e;
  --color-dark-matter-600: #7a5850;
  --color-dark-matter-700: #5b3e38;
  --color-dark-matter-800: #402924;
  --color-dark-matter-900: #281815;
  --color-dark-matter-950: #170100;
  --color-eggplant: #3d093e;
  --color-eggplant-50: #ffeffe;
  --color-eggplant-100: #ffe0fe;
  --color-eggplant-200: #f4c6f2;
  --color-eggplant-300: #e1addf;
  --color-eggplant-400: #c38bc2;
  --color-eggplant-500: #a970a8;
  --color-eggplant-600: #8d578d;
  --color-eggplant-700: #754375;
  --color-eggplant-800: #5f335f;
  --color-eggplant-900: #4d274d;
  --color-eggplant-950: #3d093e;
  --color-sanctum-of-shadows: #452c47;
  --color-sanctum-of-shadows-50: #fef0ff;
  --color-sanctum-of-shadows-100: #f8e4f9;
  --color-sanctum-of-shadows-200: #e6cfe7;
  --color-sanctum-of-shadows-300: #d1b7d3;
  --color-sanctum-of-shadows-400: #b497b6;
  --color-sanctum-of-shadows-500: #997c9b;
  --color-sanctum-of-shadows-600: #7f6380;
  --color-sanctum-of-shadows-700: #674e69;
  --color-sanctum-of-shadows-800: #533d54;
  --color-sanctum-of-shadows-900: #452c47;
  --color-sanctum-of-shadows-950: #2a1c2b;
  --color-purple-seduction: #552474;
  --color-purple-seduction-50: #f9f2ff;
  --color-purple-seduction-100: #f3e5ff;
  --color-purple-seduction-200: #e7caff;
  --color-purple-seduction-300: #d7acf9;
  --color-purple-seduction-400: #b989dd;
  --color-purple-seduction-500: #9d6cc1;
  --color-purple-seduction-600: #8151a3;
  --color-purple-seduction-700: #673c86;
  --color-purple-seduction-800: #552474;
  --color-purple-seduction-900: #401f55;
  --color-purple-seduction-950: #281138;
  --color-hot-brown: #93421a;
  --color-hot-brown-50: #fff2ed;
  --color-hot-brown-100: #ffe5da;
  --color-hot-brown-200: #ffccb7;
  --color-hot-brown-300: #fcaf8e;
  --color-hot-brown-400: #e28e69;
  --color-hot-brown-500: #c8724c;
  --color-hot-brown-600: #ab5833;
  --color-hot-brown-700: #93421a;
  --color-hot-brown-800: #75320f;
  --color-hot-brown-900: #5d2304;
  --color-hot-brown-950: #3e1400;
}