Dwarf Fortress to Midnight Aubergine Color Palette

About this palette

Dwarf Fortress to Midnight Aubergine is a 5-color dark, warm, earthy, gradient palette: #250400 (Dwarf Fortress), #321500 (Shadow Play), #4E2540 (Murasaki), #5E3531 (Rampant Rhubarb), #8D3C71 (Midnight Aubergine). It mixes brown, red tones and feels warm overall. The strongest text pairing is #250400 on #8D3C71 with a contrast ratio of 2.75:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dwarf Fortress	rgb(37, 4, 0)	hsl(6, 100%, 7%)
Shadow Play	rgb(50, 21, 0)	hsl(25, 100%, 10%)
Murasaki	rgb(78, 37, 64)	hsl(320, 36%, 23%)
Rampant Rhubarb	rgb(94, 53, 49)	hsl(5, 31%, 28%)
Midnight Aubergine	rgb(141, 60, 113)	hsl(321, 40%, 39%)

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

/* Dwarf Fortress to Midnight Aubergine — https://swatchly.xyz/palette/250400-321500-4e2540-5e3531-8d3c71 */
:root {
  --dwarf-fortress: #250400;
  --shadow-play: #321500;
  --murasaki: #4e2540;
  --rampant-rhubarb: #5e3531;
  --midnight-aubergine: #8d3c71;
}

Tailwind CSS v4

/* Dwarf Fortress to Midnight Aubergine — https://swatchly.xyz/palette/250400-321500-4e2540-5e3531-8d3c71 */
@theme {
  --color-dwarf-fortress: #250400;
  --color-dwarf-fortress-50: #fff2ee;
  --color-dwarf-fortress-100: #ffe5dd;
  --color-dwarf-fortress-200: #f3cec4;
  --color-dwarf-fortress-300: #e0b6aa;
  --color-dwarf-fortress-400: #c29589;
  --color-dwarf-fortress-500: #a3776a;
  --color-dwarf-fortress-600: #835a4e;
  --color-dwarf-fortress-700: #664238;
  --color-dwarf-fortress-800: #4c2e26;
  --color-dwarf-fortress-900: #361f18;
  --color-dwarf-fortress-950: #250400;
  --color-shadow-play: #321500;
  --color-shadow-play-50: #fff2ea;
  --color-shadow-play-100: #ffe6d5;
  --color-shadow-play-200: #efd1bd;
  --color-shadow-play-300: #dbb9a3;
  --color-shadow-play-400: #be9981;
  --color-shadow-play-500: #a27d64;
  --color-shadow-play-600: #85634b;
  --color-shadow-play-700: #6c4d37;
  --color-shadow-play-800: #553b28;
  --color-shadow-play-900: #422c1c;
  --color-shadow-play-950: #321500;
  --color-murasaki: #4e2540;
  --color-murasaki-50: #fff0f9;
  --color-murasaki-100: #ffe1f3;
  --color-murasaki-200: #f2cae2;
  --color-murasaki-300: #deb2cc;
  --color-murasaki-400: #c191ae;
  --color-murasaki-500: #a67694;
  --color-murasaki-600: #8a5d79;
  --color-murasaki-700: #714862;
  --color-murasaki-800: #5b374e;
  --color-murasaki-900: #4e2540;
  --color-murasaki-950: #2f1927;
  --color-rampant-rhubarb: #5e3531;
  --color-rampant-rhubarb-50: #fff2f0;
  --color-rampant-rhubarb-100: #ffe4e1;
  --color-rampant-rhubarb-200: #f4cdc8;
  --color-rampant-rhubarb-300: #e0b5b0;
  --color-rampant-rhubarb-400: #c3948f;
  --color-rampant-rhubarb-500: #a77873;
  --color-rampant-rhubarb-600: #8b5e5a;
  --color-rampant-rhubarb-700: #714945;
  --color-rampant-rhubarb-800: #5e3531;
  --color-rampant-rhubarb-900: #472a27;
  --color-rampant-rhubarb-950: #2d1916;
  --color-midnight-aubergine: #8d3c71;
  --color-midnight-aubergine-50: #fff0f8;
  --color-midnight-aubergine-100: #ffe1f2;
  --color-midnight-aubergine-200: #ffc5e7;
  --color-midnight-aubergine-300: #f5a9d7;
  --color-midnight-aubergine-400: #db87bb;
  --color-midnight-aubergine-500: #c16ba1;
  --color-midnight-aubergine-600: #a55287;
  --color-midnight-aubergine-700: #8d3c71;
  --color-midnight-aubergine-800: #712c59;
  --color-midnight-aubergine-900: #591f46;
  --color-midnight-aubergine-950: #3b102d;
}