Quiet Abyss to Plum Highness Color Palette

About this palette

Quiet Abyss to Plum Highness is a 4-color dark, gradient palette: #11023B (Quiet Abyss), #2E224E (Pāua), #65313A (Chocolate Truffle), #815174 (Plum Highness). It mixes purple, brown, pink tones and feels balanced overall. The strongest text pairing is #11023B on #815174 with a contrast ratio of 3.07:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Quiet Abyss	rgb(17, 2, 59)	hsl(256, 93%, 12%)
Pāua	rgb(46, 34, 78)	hsl(256, 39%, 22%)
Chocolate Truffle	rgb(101, 49, 58)	hsl(350, 35%, 29%)
Plum Highness	rgb(129, 81, 116)	hsl(316, 23%, 41%)

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.

Aa3.07:1 Poor#11023B on #815174
Aa3.07:1 Poor#815174 on #11023B

Color blindness preview

CSS variables

/* Quiet Abyss to Plum Highness — https://swatchly.xyz/palette/11023b-2e224e-65313a-815174 */
:root {
  --quiet-abyss: #11023b;
  --p-ua: #2e224e;
  --chocolate-truffle: #65313a;
  --plum-highness: #815174;
}

Tailwind CSS v4

/* Quiet Abyss to Plum Highness — https://swatchly.xyz/palette/11023b-2e224e-65313a-815174 */
@theme {
  --color-quiet-abyss: #11023b;
  --color-quiet-abyss-50: #f4f4ff;
  --color-quiet-abyss-100: #e8e9ff;
  --color-quiet-abyss-200: #d2d3ff;
  --color-quiet-abyss-300: #babaf7;
  --color-quiet-abyss-400: #9a99dc;
  --color-quiet-abyss-500: #7c7bbd;
  --color-quiet-abyss-600: #605e9c;
  --color-quiet-abyss-700: #48457c;
  --color-quiet-abyss-800: #34315f;
  --color-quiet-abyss-900: #232145;
  --color-quiet-abyss-950: #11023b;
  --color-p-ua: #2e224e;
  --color-p-ua-50: #f5f3ff;
  --color-p-ua-100: #ece8ff;
  --color-p-ua-200: #d9d1fb;
  --color-p-ua-300: #c2b9e9;
  --color-p-ua-400: #a297cb;
  --color-p-ua-500: #857aae;
  --color-p-ua-600: #6a5f8f;
  --color-p-ua-700: #524873;
  --color-p-ua-800: #3e355a;
  --color-p-ua-900: #2e224e;
  --color-p-ua-950: #1a162a;
  --color-chocolate-truffle: #65313a;
  --color-chocolate-truffle-50: #fff1f3;
  --color-chocolate-truffle-100: #ffe3e6;
  --color-chocolate-truffle-200: #fac9cf;
  --color-chocolate-truffle-300: #e7b1b7;
  --color-chocolate-truffle-400: #ca9097;
  --color-chocolate-truffle-500: #af747c;
  --color-chocolate-truffle-600: #925a62;
  --color-chocolate-truffle-700: #78454d;
  --color-chocolate-truffle-800: #65313a;
  --color-chocolate-truffle-900: #4c272d;
  --color-chocolate-truffle-950: #31171b;
  --color-plum-highness: #815174;
  --color-plum-highness-50: #fff0fa;
  --color-plum-highness-100: #ffdef5;
  --color-plum-highness-200: #f0c6e3;
  --color-plum-highness-300: #dbabcd;
  --color-plum-highness-400: #bc89ad;
  --color-plum-highness-500: #9e6c90;
  --color-plum-highness-600: #815174;
  --color-plum-highness-700: #683e5d;
  --color-plum-highness-800: #532f4a;
  --color-plum-highness-900: #41233a;
  --color-plum-highness-950: #2a1424;
}