Noir Fiction to Midnight Aubergine color palette

19070CNoir Fiction 2C023EDark Purple 32285DPurple Noir 5E383BRampant Rhubarb 863F63Midnight Aubergine

Open in generator Export PNG, PDF, ASE…

About this palette

Noir Fiction to Midnight Aubergine is a 5-color dark, gradient palette: #19070C (Noir Fiction), #2C023E (Dark Purple), #32285D (Purple Noir), #5E383B (Rampant Rhubarb), #863F63 (Midnight Aubergine). It mixes black, purple, brown, red tones and feels balanced overall. The strongest text pairing is #19070C on #863F63 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
Noir Fiction	rgb(25, 7, 12)	hsl(343, 56%, 6%)
Dark Purple	rgb(44, 2, 62)	hsl(282, 94%, 13%)
Purple Noir	rgb(50, 40, 93)	hsl(251, 40%, 26%)
Rampant Rhubarb	rgb(94, 56, 59)	hsl(355, 25%, 29%)
Midnight Aubergine	rgb(134, 63, 99)	hsl(330, 36%, 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

/* Noir Fiction to Midnight Aubergine — https://swatchly.xyz/palette/19070c-2c023e-32285d-5e383b-863f63 */
:root {
  --noir-fiction: #19070c;
  --dark-purple: #2c023e;
  --purple-noir: #32285d;
  --rampant-rhubarb: #5e383b;
  --midnight-aubergine: #863f63;
}

Tailwind CSS v4

/* Noir Fiction to Midnight Aubergine — https://swatchly.xyz/palette/19070c-2c023e-32285d-5e383b-863f63 */
@theme {
  --color-noir-fiction: #19070c;
  --color-noir-fiction-50: #fff1f4;
  --color-noir-fiction-100: #f8e6ea;
  --color-noir-fiction-200: #e7d1d6;
  --color-noir-fiction-300: #d2babf;
  --color-noir-fiction-400: #b49a9f;
  --color-noir-fiction-500: #957a80;
  --color-noir-fiction-600: #755d62;
  --color-noir-fiction-700: #594449;
  --color-noir-fiction-800: #402f33;
  --color-noir-fiction-900: #2b1f22;
  --color-noir-fiction-950: #19070c;
  --color-dark-purple: #2c023e;
  --color-dark-purple-50: #faf2ff;
  --color-dark-purple-100: #f5e4ff;
  --color-dark-purple-200: #eac9fe;
  --color-dark-purple-300: #d5b0ec;
  --color-dark-purple-400: #b88ed0;
  --color-dark-purple-500: #9c72b4;
  --color-dark-purple-600: #7f5796;
  --color-dark-purple-700: #66417a;
  --color-dark-purple-800: #4f3061;
  --color-dark-purple-900: #3d224b;
  --color-dark-purple-950: #2c023e;
  --color-purple-noir: #32285d;
  --color-purple-noir-50: #f4f4ff;
  --color-purple-noir-100: #eae8ff;
  --color-purple-noir-200: #d5d2ff;
  --color-purple-noir-300: #bfb9f1;
  --color-purple-noir-400: #9f99d5;
  --color-purple-noir-500: #847dba;
  --color-purple-noir-600: #6a629c;
  --color-purple-noir-700: #544c81;
  --color-purple-noir-800: #413a68;
  --color-purple-noir-900: #32285d;
  --color-purple-noir-950: #1e1a36;
  --color-rampant-rhubarb: #5e383b;
  --color-rampant-rhubarb-50: #fff1f2;
  --color-rampant-rhubarb-100: #ffe3e5;
  --color-rampant-rhubarb-200: #f1cdcf;
  --color-rampant-rhubarb-300: #deb6b8;
  --color-rampant-rhubarb-400: #c19698;
  --color-rampant-rhubarb-500: #a67a7d;
  --color-rampant-rhubarb-600: #8a6163;
  --color-rampant-rhubarb-700: #714b4e;
  --color-rampant-rhubarb-800: #5e383b;
  --color-rampant-rhubarb-900: #472c2e;
  --color-rampant-rhubarb-950: #2e1a1c;
  --color-midnight-aubergine: #863f63;
  --color-midnight-aubergine-50: #fff1f7;
  --color-midnight-aubergine-100: #ffe2ee;
  --color-midnight-aubergine-200: #ffc6df;
  --color-midnight-aubergine-300: #f1abcb;
  --color-midnight-aubergine-400: #d58aad;
  --color-midnight-aubergine-500: #ba6e93;
  --color-midnight-aubergine-600: #9e5579;
  --color-midnight-aubergine-700: #863f63;
  --color-midnight-aubergine-800: #6a304e;
  --color-midnight-aubergine-900: #54223c;
  --color-midnight-aubergine-950: #371326;
}