Drops of God to Quiet Abyss Color Palette

About this palette

Drops of God to Quiet Abyss is a 4-color dark palette: #602030 (Drops of God), #883D5C (Liaison), #3A203E (Purple Void), #180030 (Quiet Abyss). It mixes brown, red, purple tones and feels balanced overall. The strongest text pairing is #883D5C on #180030 with a contrast ratio of 2.65:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Drops of God	rgb(96, 32, 48)	hsl(345, 50%, 25%)
Liaison	rgb(136, 61, 92)	hsl(335, 38%, 39%)
Purple Void	rgb(58, 32, 62)	hsl(292, 32%, 18%)
Quiet Abyss	rgb(24, 0, 48)	hsl(270, 100%, 9%)

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

/* Drops of God to Quiet Abyss — https://swatchly.xyz/palette/602030-883d5c-3a203e-180030 */
:root {
  --drops-of-god: #602030;
  --liaison: #883d5c;
  --purple-void: #3a203e;
  --quiet-abyss: #180030;
}

Tailwind CSS v4

/* Drops of God to Quiet Abyss — https://swatchly.xyz/palette/602030-883d5c-3a203e-180030 */
@theme {
  --color-drops-of-god: #602030;
  --color-drops-of-god-50: #fff1f3;
  --color-drops-of-god-100: #ffe3e7;
  --color-drops-of-god-200: #ffc6cf;
  --color-drops-of-god-300: #efacb7;
  --color-drops-of-god-400: #d48b98;
  --color-drops-of-god-500: #b9707e;
  --color-drops-of-god-600: #9d5765;
  --color-drops-of-god-700: #834350;
  --color-drops-of-god-800: #6c3440;
  --color-drops-of-god-900: #602030;
  --color-drops-of-god-950: #3b171f;
  --color-liaison: #883d5c;
  --color-liaison-50: #fff1f5;
  --color-liaison-100: #ffe2ec;
  --color-liaison-200: #ffc6da;
  --color-liaison-300: #f3aac5;
  --color-liaison-400: #d889a6;
  --color-liaison-500: #bd6d8c;
  --color-liaison-600: #a05372;
  --color-liaison-700: #883d5c;
  --color-liaison-800: #6c2e48;
  --color-liaison-900: #562137;
  --color-liaison-950: #381222;
  --color-purple-void: #3a203e;
  --color-purple-void-50: #fdf0ff;
  --color-purple-void-100: #f8e3fb;
  --color-purple-void-200: #e7ceea;
  --color-purple-void-300: #d2b6d6;
  --color-purple-void-400: #b294b7;
  --color-purple-void-500: #96779a;
  --color-purple-void-600: #795c7d;
  --color-purple-void-700: #5f4563;
  --color-purple-void-800: #49334c;
  --color-purple-void-900: #3a203e;
  --color-purple-void-950: #211522;
  --color-quiet-abyss: #180030;
  --color-quiet-abyss-50: #f7f3ff;
  --color-quiet-abyss-100: #efe6ff;
  --color-quiet-abyss-200: #dfcefe;
  --color-quiet-abyss-300: #c9b6ec;
  --color-quiet-abyss-400: #ab95d0;
  --color-quiet-abyss-500: #8c76b1;
  --color-quiet-abyss-600: #6e5990;
  --color-quiet-abyss-700: #544171;
  --color-quiet-abyss-800: #3d2d55;
  --color-quiet-abyss-900: #2a1d3c;
  --color-quiet-abyss-950: #180030;
}