Noir Mystique to Murasaki color palette

251600Noir Mystique 723605Cold Press Coffee 7E561BCoffee Adept 280003Dwarf Fortress 3E2000Medium Roast 452A4EMurasaki

Open in generator Export PNG, PDF, ASE…

About this palette

Noir Mystique to Murasaki is a 6-color dark, warm, earthy palette: #251600 (Noir Mystique), #723605 (Cold Press Coffee), #7E561B (Coffee Adept), #280003 (Dwarf Fortress), #3E2000 (Medium Roast), #452A4E (Murasaki). It mixes brown, purple tones and feels warm overall. The strongest text pairing is #7E561B on #280003 with a contrast ratio of 2.96:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Noir Mystique	rgb(37, 22, 0)	hsl(36, 100%, 7%)
Cold Press Coffee	rgb(114, 54, 5)	hsl(27, 92%, 23%)
Coffee Adept	rgb(126, 86, 27)	hsl(36, 65%, 30%)
Dwarf Fortress	rgb(40, 0, 3)	hsl(356, 100%, 8%)
Medium Roast	rgb(62, 32, 0)	hsl(31, 100%, 12%)
Murasaki	rgb(69, 42, 78)	hsl(285, 30%, 24%)

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

/* Noir Mystique to Murasaki — https://swatchly.xyz/palette/251600-723605-7e561b-280003-3e2000-452a4e */
:root {
  --noir-mystique: #251600;
  --cold-press-coffee: #723605;
  --coffee-adept: #7e561b;
  --dwarf-fortress: #280003;
  --medium-roast: #3e2000;
  --murasaki: #452a4e;
}

Tailwind CSS v4

/* Noir Mystique to Murasaki — https://swatchly.xyz/palette/251600-723605-7e561b-280003-3e2000-452a4e */
@theme {
  --color-noir-mystique: #251600;
  --color-noir-mystique-50: #fff3e3;
  --color-noir-mystique-100: #f6e9d7;
  --color-noir-mystique-200: #e4d5c0;
  --color-noir-mystique-300: #cfbea6;
  --color-noir-mystique-400: #b19e84;
  --color-noir-mystique-500: #958267;
  --color-noir-mystique-600: #78664d;
  --color-noir-mystique-700: #5f4f38;
  --color-noir-mystique-800: #493b28;
  --color-noir-mystique-900: #372c1b;
  --color-noir-mystique-950: #251600;
  --color-cold-press-coffee: #723605;
  --color-cold-press-coffee-50: #fff2eb;
  --color-cold-press-coffee-100: #ffe5d7;
  --color-cold-press-coffee-200: #ffcbac;
  --color-cold-press-coffee-300: #efb38f;
  --color-cold-press-coffee-400: #d4936b;
  --color-cold-press-coffee-500: #ba784e;
  --color-cold-press-coffee-600: #9e5e36;
  --color-cold-press-coffee-700: #844a23;
  --color-cold-press-coffee-800: #723605;
  --color-cold-press-coffee-900: #572a0a;
  --color-cold-press-coffee-950: #3a1903;
  --color-coffee-adept: #7e561b;
  --color-coffee-adept-50: #fff3e5;
  --color-coffee-adept-100: #ffe7ca;
  --color-coffee-adept-200: #f5d3aa;
  --color-coffee-adept-300: #e3be8f;
  --color-coffee-adept-400: #c89f6a;
  --color-coffee-adept-500: #af844d;
  --color-coffee-adept-600: #946b33;
  --color-coffee-adept-700: #7e561b;
  --color-coffee-adept-800: #64420f;
  --color-coffee-adept-900: #4f3204;
  --color-coffee-adept-950: #331e00;
  --color-dwarf-fortress: #280003;
  --color-dwarf-fortress-50: #fff2f1;
  --color-dwarf-fortress-100: #ffe4e2;
  --color-dwarf-fortress-200: #f8cbc8;
  --color-dwarf-fortress-300: #e6b2af;
  --color-dwarf-fortress-400: #c9918e;
  --color-dwarf-fortress-500: #a97270;
  --color-dwarf-fortress-600: #895654;
  --color-dwarf-fortress-700: #6b3e3d;
  --color-dwarf-fortress-800: #502b2a;
  --color-dwarf-fortress-900: #381c1b;
  --color-dwarf-fortress-950: #280003;
  --color-medium-roast: #3e2000;
  --color-medium-roast-50: #fff3e8;
  --color-medium-roast-100: #ffe6d1;
  --color-medium-roast-200: #efd1b8;
  --color-medium-roast-300: #dbba9d;
  --color-medium-roast-400: #be9a7a;
  --color-medium-roast-500: #a48060;
  --color-medium-roast-600: #8a6749;
  --color-medium-roast-700: #735336;
  --color-medium-roast-800: #5f4228;
  --color-medium-roast-900: #4e351e;
  --color-medium-roast-950: #3e2000;
  --color-murasaki: #452a4e;
  --color-murasaki-50: #fbf1ff;
  --color-murasaki-100: #f7e3ff;
  --color-murasaki-200: #e6cdee;
  --color-murasaki-300: #d1b5db;
  --color-murasaki-400: #b496be;
  --color-murasaki-500: #997ba4;
  --color-murasaki-600: #7e6188;
  --color-murasaki-700: #674c70;
  --color-murasaki-800: #533b5b;
  --color-murasaki-900: #452a4e;
  --color-murasaki-950: #2a1b2f;
}