Quiet Abyss to Wing Commander Color Palette

About this palette

Quiet Abyss to Wing Commander is a 4-color dark, cool, gradient palette: #0E0032 (Quiet Abyss), #002523 (Sunken Ship), #173A75 (Tardis Blue), #2864B1 (Wing Commander). It mixes purple, turquoise, blue tones and feels cool overall. The strongest text pairing is #0E0032 on #2864B1 with a contrast ratio of 3.33:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Quiet Abyss	rgb(14, 0, 50)	hsl(257, 100%, 10%)
Sunken Ship	rgb(0, 37, 35)	hsl(177, 100%, 7%)
Tardis Blue	rgb(23, 58, 117)	hsl(218, 67%, 27%)
Wing Commander	rgb(40, 100, 177)	hsl(214, 63%, 43%)

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.33:1 Poor#0E0032 on #2864B1
Aa3.33:1 Poor#2864B1 on #0E0032

Color blindness preview

CSS variables

/* Quiet Abyss to Wing Commander — https://swatchly.xyz/palette/0e0032-002523-173a75-2864b1 */
:root {
  --quiet-abyss: #0e0032;
  --sunken-ship: #002523;
  --tardis-blue: #173a75;
  --wing-commander: #2864b1;
}

Tailwind CSS v4

/* Quiet Abyss to Wing Commander — https://swatchly.xyz/palette/0e0032-002523-173a75-2864b1 */
@theme {
  --color-quiet-abyss: #0e0032;
  --color-quiet-abyss-50: #f4f4ff;
  --color-quiet-abyss-100: #e9e9ff;
  --color-quiet-abyss-200: #d3d2ff;
  --color-quiet-abyss-300: #bcbaf3;
  --color-quiet-abyss-400: #9c9ad7;
  --color-quiet-abyss-500: #7d7ab8;
  --color-quiet-abyss-600: #605c95;
  --color-quiet-abyss-700: #474375;
  --color-quiet-abyss-800: #322e57;
  --color-quiet-abyss-900: #201e3c;
  --color-quiet-abyss-950: #0e0032;
  --color-sunken-ship: #002523;
  --color-sunken-ship-50: #e5faf8;
  --color-sunken-ship-100: #d9f1ef;
  --color-sunken-ship-200: #c2dedc;
  --color-sunken-ship-300: #a8c9c6;
  --color-sunken-ship-400: #86aaa7;
  --color-sunken-ship-500: #6a8e8b;
  --color-sunken-ship-600: #507471;
  --color-sunken-ship-700: #3c5c59;
  --color-sunken-ship-800: #2c4846;
  --color-sunken-ship-900: #1f3836;
  --color-sunken-ship-950: #002523;
  --color-tardis-blue: #173a75;
  --color-tardis-blue-50: #f0f6ff;
  --color-tardis-blue-100: #e0ecff;
  --color-tardis-blue-200: #c1d9ff;
  --color-tardis-blue-300: #9dc1fd;
  --color-tardis-blue-400: #79a0e1;
  --color-tardis-blue-500: #5c83c4;
  --color-tardis-blue-600: #4267a5;
  --color-tardis-blue-700: #2f4f86;
  --color-tardis-blue-800: #173a75;
  --color-tardis-blue-900: #162d55;
  --color-tardis-blue-950: #0b1b37;
  --color-wing-commander: #2864b1;
  --color-wing-commander-50: #eff6ff;
  --color-wing-commander-100: #ddebff;
  --color-wing-commander-200: #bad7ff;
  --color-wing-commander-300: #91c0ff;
  --color-wing-commander-400: #639eee;
  --color-wing-commander-500: #4581d0;
  --color-wing-commander-600: #2864b1;
  --color-wing-commander-700: #194f92;
  --color-wing-commander-800: #0c3d77;
  --color-wing-commander-900: #052e60;
  --color-wing-commander-950: #021c40;
}