Void to Passionate Plum Color Palette

About this palette

Void to Passionate Plum is a 4-color dark, gradient palette: #001226 (Void), #3E1036 (Nightly Voyager), #363C8D (Liquid Denim), #7C3F55 (Passionate Plum). It mixes black, purple, red tones and feels balanced overall. The strongest text pairing is #001226 on #7C3F55 with a contrast ratio of 2.42:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Void	rgb(0, 18, 38)	hsl(212, 100%, 7%)
Nightly Voyager	rgb(62, 16, 54)	hsl(310, 59%, 15%)
Liquid Denim	rgb(54, 60, 141)	hsl(236, 45%, 38%)
Passionate Plum	rgb(124, 63, 85)	hsl(338, 33%, 37%)

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

/* Void to Passionate Plum — https://swatchly.xyz/palette/001226-3e1036-363c8d-7c3f55 */
:root {
  --void: #001226;
  --nightly-voyager: #3e1036;
  --liquid-denim: #363c8d;
  --passionate-plum: #7c3f55;
}

Tailwind CSS v4

/* Void to Passionate Plum — https://swatchly.xyz/palette/001226-3e1036-363c8d-7c3f55 */
@theme {
  --color-void: #001226;
  --color-void-50: #eef6ff;
  --color-void-100: #dcedff;
  --color-void-200: #c6daef;
  --color-void-300: #adc4dc;
  --color-void-400: #8ba5bf;
  --color-void-500: #6c86a0;
  --color-void-600: #516981;
  --color-void-700: #3a4f64;
  --color-void-800: #28394b;
  --color-void-900: #1a2735;
  --color-void-950: #001226;
  --color-nightly-voyager: #3e1036;
  --color-nightly-voyager-50: #fff0fb;
  --color-nightly-voyager-100: #ffe1f7;
  --color-nightly-voyager-200: #f4c8e9;
  --color-nightly-voyager-300: #e1afd4;
  --color-nightly-voyager-400: #c38eb6;
  --color-nightly-voyager-500: #a9739c;
  --color-nightly-voyager-600: #8e5a82;
  --color-nightly-voyager-700: #75466b;
  --color-nightly-voyager-800: #603657;
  --color-nightly-voyager-900: #4e2a46;
  --color-nightly-voyager-950: #3e1036;
  --color-liquid-denim: #363c8d;
  --color-liquid-denim-50: #f2f5ff;
  --color-liquid-denim-100: #e5eaff;
  --color-liquid-denim-200: #ccd5ff;
  --color-liquid-denim-300: #b0bdff;
  --color-liquid-denim-400: #8d9cf2;
  --color-liquid-denim-500: #7380d8;
  --color-liquid-denim-600: #5b66bb;
  --color-liquid-denim-700: #47519e;
  --color-liquid-denim-800: #363c8d;
  --color-liquid-denim-900: #2a2f6a;
  --color-liquid-denim-950: #191c48;
  --color-passionate-plum: #7c3f55;
  --color-passionate-plum-50: #fff1f5;
  --color-passionate-plum-100: #ffe3eb;
  --color-passionate-plum-200: #fdc6d7;
  --color-passionate-plum-300: #eaadc0;
  --color-passionate-plum-400: #ce8ca1;
  --color-passionate-plum-500: #b27086;
  --color-passionate-plum-600: #94566b;
  --color-passionate-plum-700: #7c3f55;
  --color-passionate-plum-800: #623042;
  --color-passionate-plum-900: #4d2333;
  --color-passionate-plum-950: #32141f;
}