Quiet Abyss to Midnight Aubergine color palette

13003AQuiet Abyss 39001FVienna Roast 441461Clairvoyant 053F60Poseidon 882938Polished Apple 823F69Midnight Aubergine

Open in generator Export PNG, PDF, ASE…

About this palette

Quiet Abyss to Midnight Aubergine is a 6-color dark palette: #13003A (Quiet Abyss), #39001F (Vienna Roast), #441461 (Clairvoyant), #053F60 (Poseidon), #882938 (Polished Apple), #823F69 (Midnight Aubergine). It mixes purple, red, blue tones and feels balanced overall. The strongest text pairing is #13003A on #823F69 with a contrast ratio of 2.63:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Quiet Abyss	rgb(19, 0, 58)	hsl(260, 100%, 11%)
Vienna Roast	rgb(57, 0, 31)	hsl(327, 100%, 11%)
Clairvoyant	rgb(68, 20, 97)	hsl(277, 66%, 23%)
Poseidon	rgb(5, 63, 96)	hsl(202, 90%, 20%)
Polished Apple	rgb(136, 41, 56)	hsl(351, 54%, 35%)
Midnight Aubergine	rgb(130, 63, 105)	hsl(322, 35%, 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

/* Quiet Abyss to Midnight Aubergine — https://swatchly.xyz/palette/13003a-39001f-441461-053f60-882938-823f69 */
:root {
  --quiet-abyss: #13003a;
  --vienna-roast: #39001f;
  --clairvoyant: #441461;
  --poseidon: #053f60;
  --polished-apple: #882938;
  --midnight-aubergine: #823f69;
}

Tailwind CSS v4

/* Quiet Abyss to Midnight Aubergine — https://swatchly.xyz/palette/13003a-39001f-441461-053f60-882938-823f69 */
@theme {
  --color-quiet-abyss: #13003a;
  --color-quiet-abyss-50: #f4f4ff;
  --color-quiet-abyss-100: #e9e9ff;
  --color-quiet-abyss-200: #d5d2ff;
  --color-quiet-abyss-300: #bdb9f7;
  --color-quiet-abyss-400: #9e98dc;
  --color-quiet-abyss-500: #8079bd;
  --color-quiet-abyss-600: #635c9b;
  --color-quiet-abyss-700: #4b437b;
  --color-quiet-abyss-800: #36305e;
  --color-quiet-abyss-900: #252044;
  --color-quiet-abyss-950: #13003a;
  --color-vienna-roast: #39001f;
  --color-vienna-roast-50: #fff1f6;
  --color-vienna-roast-100: #ffe2ed;
  --color-vienna-roast-200: #fdc5db;
  --color-vienna-roast-300: #ebacc5;
  --color-vienna-roast-400: #ce8aa6;
  --color-vienna-roast-500: #b16d8a;
  --color-vienna-roast-600: #93536e;
  --color-vienna-roast-700: #773e57;
  --color-vienna-roast-800: #5e2d43;
  --color-vienna-roast-900: #492032;
  --color-vienna-roast-950: #39001f;
  --color-clairvoyant: #441461;
  --color-clairvoyant-50: #f9f2ff;
  --color-clairvoyant-100: #f3e5ff;
  --color-clairvoyant-200: #e7caff;
  --color-clairvoyant-300: #d6adf7;
  --color-clairvoyant-400: #b88bdc;
  --color-clairvoyant-500: #9c6ec0;
  --color-clairvoyant-600: #8053a2;
  --color-clairvoyant-700: #673e85;
  --color-clairvoyant-800: #512d6b;
  --color-clairvoyant-900: #441461;
  --color-clairvoyant-950: #281237;
  --color-poseidon: #053f60;
  --color-poseidon-50: #ecf7ff;
  --color-poseidon-100: #d9eeff;
  --color-poseidon-200: #b6ddfb;
  --color-poseidon-300: #99c6e8;
  --color-poseidon-400: #73a5ca;
  --color-poseidon-500: #5588ad;
  --color-poseidon-600: #3b6c8f;
  --color-poseidon-700: #275372;
  --color-poseidon-800: #053f60;
  --color-poseidon-900: #0f3046;
  --color-poseidon-950: #061d2c;
  --color-polished-apple: #882938;
  --color-polished-apple-50: #fff1f2;
  --color-polished-apple-100: #ffe3e4;
  --color-polished-apple-200: #ffc5c8;
  --color-polished-apple-300: #fea1a7;
  --color-polished-apple-400: #e17c85;
  --color-polished-apple-500: #c35e69;
  --color-polished-apple-600: #a2444f;
  --color-polished-apple-700: #882938;
  --color-polished-apple-800: #6a202b;
  --color-polished-apple-900: #541620;
  --color-polished-apple-950: #370a12;
  --color-midnight-aubergine: #823f69;
  --color-midnight-aubergine-50: #fff0f8;
  --color-midnight-aubergine-100: #ffe1f2;
  --color-midnight-aubergine-200: #ffc4e6;
  --color-midnight-aubergine-300: #edacd2;
  --color-midnight-aubergine-400: #d18ab4;
  --color-midnight-aubergine-500: #b66f9a;
  --color-midnight-aubergine-600: #9a557f;
  --color-midnight-aubergine-700: #823f69;
  --color-midnight-aubergine-800: #673052;
  --color-midnight-aubergine-900: #512240;
  --color-midnight-aubergine-950: #351329;
}