Midnight to Minotaur Hide Color Palette

About this palette

Midnight to Minotaur Hide is a 4-color dark, warm palette: #080027 (Midnight), #724C3D (Cappuccino), #67305B (Opulent Purple), #4E120B (Minotaur Hide). It mixes purple, brown tones and feels warm overall. The strongest text pairing is #080027 on #724C3D with a contrast ratio of 2.71:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight	rgb(8, 0, 39)	hsl(252, 100%, 8%)
Cappuccino	rgb(114, 76, 61)	hsl(17, 30%, 34%)
Opulent Purple	rgb(103, 48, 91)	hsl(313, 36%, 30%)
Minotaur Hide	rgb(78, 18, 11)	hsl(6, 75%, 17%)

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

/* Midnight to Minotaur Hide — https://swatchly.xyz/palette/080027-724c3d-67305b-4e120b */
:root {
  --midnight: #080027;
  --cappuccino: #724c3d;
  --opulent-purple: #67305b;
  --minotaur-hide: #4e120b;
}

Tailwind CSS v4

/* Midnight to Minotaur Hide — https://swatchly.xyz/palette/080027-724c3d-67305b-4e120b */
@theme {
  --color-midnight: #080027;
  --color-midnight-50: #f3f4ff;
  --color-midnight-100: #e8e9ff;
  --color-midnight-200: #d2d3fe;
  --color-midnight-300: #bbbcec;
  --color-midnight-400: #9b9cd1;
  --color-midnight-500: #7b7bb0;
  --color-midnight-600: #5c5c8d;
  --color-midnight-700: #43426b;
  --color-midnight-800: #2d2c4d;
  --color-midnight-900: #1b1a32;
  --color-midnight-950: #080027;
  --color-cappuccino: #724c3d;
  --color-cappuccino-50: #fff2ed;
  --color-cappuccino-100: #ffe5db;
  --color-cappuccino-200: #f1cfc2;
  --color-cappuccino-300: #deb8a9;
  --color-cappuccino-400: #c19888;
  --color-cappuccino-500: #a67c6c;
  --color-cappuccino-600: #8a6253;
  --color-cappuccino-700: #724c3d;
  --color-cappuccino-800: #5a3b2f;
  --color-cappuccino-900: #462c22;
  --color-cappuccino-950: #2d1a13;
  --color-opulent-purple: #67305b;
  --color-opulent-purple-50: #fff0fb;
  --color-opulent-purple-100: #ffe1f6;
  --color-opulent-purple-200: #f7c6ea;
  --color-opulent-purple-300: #e5aed6;
  --color-opulent-purple-400: #c98dba;
  --color-opulent-purple-500: #ae729f;
  --color-opulent-purple-600: #935885;
  --color-opulent-purple-700: #79446d;
  --color-opulent-purple-800: #67305b;
  --color-opulent-purple-900: #4e2645;
  --color-opulent-purple-950: #33162d;
  --color-minotaur-hide: #4e120b;
  --color-minotaur-hide-50: #fff2ef;
  --color-minotaur-hide-100: #ffe4df;
  --color-minotaur-hide-200: #ffc9bf;
  --color-minotaur-hide-300: #efafa3;
  --color-minotaur-hide-400: #d18b7f;
  --color-minotaur-hide-500: #b36d62;
  --color-minotaur-hide-600: #935248;
  --color-minotaur-hide-700: #753c33;
  --color-minotaur-hide-800: #5b2b23;
  --color-minotaur-hide-900: #4e120b;
  --color-minotaur-hide-950: #2a0f0b;
}