Asphalt to Midnight Aubergine Color Palette

About this palette

Asphalt to Midnight Aubergine is a 5-color dark, warm palette: #180900 (Asphalt), #792139 (Whisky Cola), #350D4E (Hollow Knight), #592349 (Murasaki), #853E6D (Midnight Aubergine). It mixes black, red, purple tones and feels warm overall. The strongest text pairing is #180900 on #853E6D with a contrast ratio of 2.70:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Asphalt	rgb(24, 9, 0)	hsl(22, 100%, 5%)
Whisky Cola	rgb(121, 33, 57)	hsl(344, 57%, 30%)
Hollow Knight	rgb(53, 13, 78)	hsl(277, 71%, 18%)
Murasaki	rgb(89, 35, 73)	hsl(318, 44%, 24%)
Midnight Aubergine	rgb(133, 62, 109)	hsl(320, 36%, 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

/* Asphalt to Midnight Aubergine — https://swatchly.xyz/palette/180900-792139-350d4e-592349-853e6d */
:root {
  --asphalt: #180900;
  --whisky-cola: #792139;
  --hollow-knight: #350d4e;
  --murasaki: #592349;
  --midnight-aubergine: #853e6d;
}

Tailwind CSS v4

/* Asphalt to Midnight Aubergine — https://swatchly.xyz/palette/180900-792139-350d4e-592349-853e6d */
@theme {
  --color-asphalt: #180900;
  --color-asphalt-50: #fff3e8;
  --color-asphalt-100: #f7e8dc;
  --color-asphalt-200: #e5d4c6;
  --color-asphalt-300: #d0bdad;
  --color-asphalt-400: #b29d8b;
  --color-asphalt-500: #937e6c;
  --color-asphalt-600: #736050;
  --color-asphalt-700: #574738;
  --color-asphalt-800: #3f3226;
  --color-asphalt-900: #2a2017;
  --color-asphalt-950: #180900;
  --color-whisky-cola: #792139;
  --color-whisky-cola-50: #fff1f3;
  --color-whisky-cola-100: #ffe3e7;
  --color-whisky-cola-200: #ffc6cf;
  --color-whisky-cola-300: #fca5b4;
  --color-whisky-cola-400: #e18394;
  --color-whisky-cola-500: #c5667a;
  --color-whisky-cola-600: #a84d60;
  --color-whisky-cola-700: #8c394c;
  --color-whisky-cola-800: #792139;
  --color-whisky-cola-900: #5c1c2c;
  --color-whisky-cola-950: #3d0f1b;
  --color-hollow-knight: #350d4e;
  --color-hollow-knight-50: #f9f2ff;
  --color-hollow-knight-100: #f2e5ff;
  --color-hollow-knight-200: #e6caff;
  --color-hollow-knight-300: #d3b0f1;
  --color-hollow-knight-400: #b58fd5;
  --color-hollow-knight-500: #9b74bb;
  --color-hollow-knight-600: #815b9f;
  --color-hollow-knight-700: #6a4786;
  --color-hollow-knight-800: #56366f;
  --color-hollow-knight-900: #452a5b;
  --color-hollow-knight-950: #350d4e;
  --color-murasaki: #592349;
  --color-murasaki-50: #fff0f9;
  --color-murasaki-100: #ffe1f4;
  --color-murasaki-200: #f8c6e6;
  --color-murasaki-300: #e5add1;
  --color-murasaki-400: #ca8db4;
  --color-murasaki-500: #af729a;
  --color-murasaki-600: #945981;
  --color-murasaki-700: #7b456a;
  --color-murasaki-800: #663656;
  --color-murasaki-900: #592349;
  --color-murasaki-950: #37182e;
  --color-midnight-aubergine: #853e6d;
  --color-midnight-aubergine-50: #fff0f9;
  --color-midnight-aubergine-100: #ffe1f3;
  --color-midnight-aubergine-200: #ffc4e8;
  --color-midnight-aubergine-300: #efabd5;
  --color-midnight-aubergine-400: #d489b8;
  --color-midnight-aubergine-500: #b96d9e;
  --color-midnight-aubergine-600: #9d5483;
  --color-midnight-aubergine-700: #853e6d;
  --color-midnight-aubergine-800: #6a2f56;
  --color-midnight-aubergine-900: #542143;
  --color-midnight-aubergine-950: #37122b;
}