Quiet Abyss to Sumptuous Purple Color Palette

About this palette

Quiet Abyss to Sumptuous Purple is a 4-color dark, cool, monochromatic, gradient palette: #13002E (Quiet Abyss), #0E2A34 (Black Box), #632774 (Imperial), #634E90 (Sumptuous Purple). It mixes purple, blue tones and feels cool overall. The strongest text pairing is #13002E on #634E90 with a contrast ratio of 2.83:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Quiet Abyss	rgb(19, 0, 46)	hsl(265, 100%, 9%)
Black Box	rgb(14, 42, 52)	hsl(196, 58%, 13%)
Imperial	rgb(99, 39, 116)	hsl(287, 50%, 30%)
Sumptuous Purple	rgb(99, 78, 144)	hsl(259, 30%, 44%)

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 Sumptuous Purple — https://swatchly.xyz/palette/13002e-0e2a34-632774-634e90 */
:root {
  --quiet-abyss: #13002e;
  --black-box: #0e2a34;
  --imperial: #632774;
  --sumptuous-purple: #634e90;
}

Tailwind CSS v4

/* Quiet Abyss to Sumptuous Purple — https://swatchly.xyz/palette/13002e-0e2a34-632774-634e90 */
@theme {
  --color-quiet-abyss: #13002e;
  --color-quiet-abyss-50: #f6f3ff;
  --color-quiet-abyss-100: #ede7ff;
  --color-quiet-abyss-200: #dbcfff;
  --color-quiet-abyss-300: #c5b8ed;
  --color-quiet-abyss-400: #a697d1;
  --color-quiet-abyss-500: #8777b1;
  --color-quiet-abyss-600: #695a90;
  --color-quiet-abyss-700: #4e4170;
  --color-quiet-abyss-800: #382d53;
  --color-quiet-abyss-900: #251d39;
  --color-quiet-abyss-950: #13002e;
  --color-black-box: #0e2a34;
  --color-black-box-50: #e8f8ff;
  --color-black-box-100: #dbeff7;
  --color-black-box-200: #c5dce6;
  --color-black-box-300: #abc6d1;
  --color-black-box-400: #8aa7b3;
  --color-black-box-500: #6f8d99;
  --color-black-box-600: #57747f;
  --color-black-box-700: #435e68;
  --color-black-box-800: #344b55;
  --color-black-box-900: #283c45;
  --color-black-box-950: #0e2a34;
  --color-imperial: #632774;
  --color-imperial-50: #fcf1ff;
  --color-imperial-100: #f8e2ff;
  --color-imperial-200: #f1c5ff;
  --color-imperial-300: #e1aaf2;
  --color-imperial-400: #c588d7;
  --color-imperial-500: #aa6cbd;
  --color-imperial-600: #8e52a0;
  --color-imperial-700: #753d86;
  --color-imperial-800: #632774;
  --color-imperial-900: #4b2057;
  --color-imperial-950: #31123a;
  --color-sumptuous-purple: #634e90;
  --color-sumptuous-purple-50: #f6f3ff;
  --color-sumptuous-purple-100: #ede7ff;
  --color-sumptuous-purple-200: #ddd1ff;
  --color-sumptuous-purple-300: #c9b8f7;
  --color-sumptuous-purple-400: #ac98dd;
  --color-sumptuous-purple-500: #927dc3;
  --color-sumptuous-purple-600: #7964a7;
  --color-sumptuous-purple-700: #634e90;
  --color-sumptuous-purple-800: #4e3c73;
  --color-sumptuous-purple-900: #3c2d5c;
  --color-sumptuous-purple-950: #261b3d;
}