Quiet Abyss to Purple Pleasures Color Palette

About this palette

Quiet Abyss to Purple Pleasures is a 4-color dark, cool, gradient palette: #110025 (Quiet Abyss), #3E0428 (Dark Sanctuary), #2D3974 (Good Karma), #7D4492 (Purple Pleasures). It mixes purple, red, blue tones and feels cool overall. The strongest text pairing is #110025 on #7D4492 with a contrast ratio of 2.96:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Quiet Abyss	rgb(17, 0, 37)	hsl(268, 100%, 7%)
Dark Sanctuary	rgb(62, 4, 40)	hsl(323, 88%, 13%)
Good Karma	rgb(45, 57, 116)	hsl(230, 44%, 32%)
Purple Pleasures	rgb(125, 68, 146)	hsl(284, 36%, 42%)

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 Purple Pleasures — https://swatchly.xyz/palette/110025-3e0428-2d3974-7d4492 */
:root {
  --quiet-abyss: #110025;
  --dark-sanctuary: #3e0428;
  --good-karma: #2d3974;
  --purple-pleasures: #7d4492;
}

Tailwind CSS v4

/* Quiet Abyss to Purple Pleasures — https://swatchly.xyz/palette/110025-3e0428-2d3974-7d4492 */
@theme {
  --color-quiet-abyss: #110025;
  --color-quiet-abyss-50: #f7f3ff;
  --color-quiet-abyss-100: #efe6ff;
  --color-quiet-abyss-200: #ddcff8;
  --color-quiet-abyss-300: #c8b8e6;
  --color-quiet-abyss-400: #a997ca;
  --color-quiet-abyss-500: #8977a9;
  --color-quiet-abyss-600: #6a5987;
  --color-quiet-abyss-700: #4f4068;
  --color-quiet-abyss-800: #372b4b;
  --color-quiet-abyss-900: #231a32;
  --color-quiet-abyss-950: #110025;
  --color-dark-sanctuary: #3e0428;
  --color-dark-sanctuary-50: #fff1f7;
  --color-dark-sanctuary-100: #ffe2ef;
  --color-dark-sanctuary-200: #fcc5df;
  --color-dark-sanctuary-300: #e9acca;
  --color-dark-sanctuary-400: #cd8aab;
  --color-dark-sanctuary-500: #b16e90;
  --color-dark-sanctuary-600: #945575;
  --color-dark-sanctuary-700: #79405e;
  --color-dark-sanctuary-800: #62304b;
  --color-dark-sanctuary-900: #4e233a;
  --color-dark-sanctuary-950: #3e0428;
  --color-good-karma: #2d3974;
  --color-good-karma-50: #f2f5ff;
  --color-good-karma-100: #e4ebff;
  --color-good-karma-200: #cad6ff;
  --color-good-karma-300: #acbdf9;
  --color-good-karma-400: #8b9dde;
  --color-good-karma-500: #6f80c2;
  --color-good-karma-600: #5565a3;
  --color-good-karma-700: #414e86;
  --color-good-karma-800: #2d3974;
  --color-good-karma-900: #232d55;
  --color-good-karma-950: #141b37;
  --color-purple-pleasures: #7d4492;
  --color-purple-pleasures-50: #fbf1ff;
  --color-purple-pleasures-100: #f7e3ff;
  --color-purple-pleasures-200: #f0c9ff;
  --color-purple-pleasures-300: #e2aff6;
  --color-purple-pleasures-400: #c78edd;
  --color-purple-pleasures-500: #ad73c4;
  --color-purple-pleasures-600: #935aa9;
  --color-purple-pleasures-700: #7d4492;
  --color-purple-pleasures-800: #633375;
  --color-purple-pleasures-900: #4e245d;
  --color-purple-pleasures-950: #33143e;
}