Quiet Abyss to Stellar Color Palette

About this palette

Quiet Abyss to Stellar is a 5-color dark, cool, gradient palette: #17003A (Quiet Abyss), #2A2235 (Black Velvet), #36364A (Shuriken), #3A4986 (Queen of the Night Shift), #3E6686 (Stellar). It mixes purple, gray, blue tones and feels cool overall. The strongest text pairing is #17003A on #3E6686 with a contrast ratio of 3.14:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Quiet Abyss	rgb(23, 0, 58)	hsl(264, 100%, 11%)
Black Velvet	rgb(42, 34, 53)	hsl(265, 22%, 17%)
Shuriken	rgb(54, 54, 74)	hsl(240, 16%, 25%)
Queen of the Night Shift	rgb(58, 73, 134)	hsl(228, 40%, 38%)
Stellar	rgb(62, 102, 134)	hsl(207, 37%, 38%)

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.14:1 Poor#17003A on #3E6686
Aa3.14:1 Poor#3E6686 on #17003A

Color blindness preview

CSS variables

/* Quiet Abyss to Stellar — https://swatchly.xyz/palette/17003a-2a2235-36364a-3a4986-3e6686 */
:root {
  --quiet-abyss: #17003a;
  --black-velvet: #2a2235;
  --shuriken: #36364a;
  --queen-of-the-night-shift: #3a4986;
  --stellar: #3e6686;
}

Tailwind CSS v4

/* Quiet Abyss to Stellar — https://swatchly.xyz/palette/17003a-2a2235-36364a-3a4986-3e6686 */
@theme {
  --color-quiet-abyss: #17003a;
  --color-quiet-abyss-50: #f5f3ff;
  --color-quiet-abyss-100: #ebe8ff;
  --color-quiet-abyss-200: #d8d0ff;
  --color-quiet-abyss-300: #c2b7f5;
  --color-quiet-abyss-400: #a396da;
  --color-quiet-abyss-500: #8577bb;
  --color-quiet-abyss-600: #695b9a;
  --color-quiet-abyss-700: #50437b;
  --color-quiet-abyss-800: #3a2f5e;
  --color-quiet-abyss-900: #292044;
  --color-quiet-abyss-950: #17003a;
  --color-black-velvet: #2a2235;
  --color-black-velvet-50: #f7f3ff;
  --color-black-velvet-100: #eee8f8;
  --color-black-velvet-200: #dbd4e6;
  --color-black-velvet-300: #c5bcd2;
  --color-black-velvet-400: #a69db4;
  --color-black-velvet-500: #8c839a;
  --color-black-velvet-600: #736a80;
  --color-black-velvet-700: #5d5569;
  --color-black-velvet-800: #4b4456;
  --color-black-velvet-900: #3c3646;
  --color-black-velvet-950: #2a2235;
  --color-shuriken: #36364a;
  --color-shuriken-50: #f4f4ff;
  --color-shuriken-100: #e9eafa;
  --color-shuriken-200: #d5d6e8;
  --color-shuriken-300: #bebfd4;
  --color-shuriken-400: #a0a0b7;
  --color-shuriken-500: #85869d;
  --color-shuriken-600: #6c6d83;
  --color-shuriken-700: #57576b;
  --color-shuriken-800: #454557;
  --color-shuriken-900: #36364a;
  --color-shuriken-950: #22222e;
  --color-queen-of-the-night-shift: #3a4986;
  --color-queen-of-the-night-shift-50: #f1f5ff;
  --color-queen-of-the-night-shift-100: #e4ebff;
  --color-queen-of-the-night-shift-200: #c7d5ff;
  --color-queen-of-the-night-shift-300: #a9bcf8;
  --color-queen-of-the-night-shift-400: #879adc;
  --color-queen-of-the-night-shift-500: #6a7dbf;
  --color-queen-of-the-night-shift-600: #51619f;
  --color-queen-of-the-night-shift-700: #3a4986;
  --color-queen-of-the-night-shift-800: #2d3968;
  --color-queen-of-the-night-shift-900: #212b53;
  --color-queen-of-the-night-shift-950: #131a36;
  --color-stellar: #3e6686;
  --color-stellar-50: #edf7ff;
  --color-stellar-100: #d7ecff;
  --color-stellar-200: #b7d8f4;
  --color-stellar-300: #9bc0e0;
  --color-stellar-400: #779fc1;
  --color-stellar-500: #5982a4;
  --color-stellar-600: #3e6686;
  --color-stellar-700: #2e516c;
  --color-stellar-800: #213f57;
  --color-stellar-900: #173145;
  --color-stellar-950: #0c1e2d;
}