Void to Stellar color palette

001224Void 22082BMidnight Monarch 002151Subnautical 563148Shadow Purple 004D62Raging Thunderstorm 3C607FStellar

Open in generator Export PNG, PDF, ASE…

About this palette

Void to Stellar is a 6-color dark, cool, gradient palette: #001224 (Void), #22082B (Midnight Monarch), #002151 (Subnautical), #563148 (Shadow Purple), #004D62 (Raging Thunderstorm), #3C607F (Stellar). It mixes black, purple, blue, red tones and feels cool overall. The strongest text pairing is #001224 on #3C607F with a contrast ratio of 2.85:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Void	rgb(0, 18, 36)	hsl(210, 100%, 7%)
Midnight Monarch	rgb(34, 8, 43)	hsl(285, 69%, 10%)
Subnautical	rgb(0, 33, 81)	hsl(216, 100%, 16%)
Shadow Purple	rgb(86, 49, 72)	hsl(323, 27%, 26%)
Raging Thunderstorm	rgb(0, 77, 98)	hsl(193, 100%, 19%)
Stellar	rgb(60, 96, 127)	hsl(208, 36%, 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 Stellar — https://swatchly.xyz/palette/001224-22082b-002151-563148-004d62-3c607f */
:root {
  --void: #001224;
  --midnight-monarch: #22082b;
  --subnautical: #002151;
  --shadow-purple: #563148;
  --raging-thunderstorm: #004d62;
  --stellar: #3c607f;
}

Tailwind CSS v4

/* Void to Stellar — https://swatchly.xyz/palette/001224-22082b-002151-563148-004d62-3c607f */
@theme {
  --color-void: #001224;
  --color-void-50: #edf6ff;
  --color-void-100: #dceefe;
  --color-void-200: #c6daee;
  --color-void-300: #adc4da;
  --color-void-400: #8ca5bc;
  --color-void-500: #6d869e;
  --color-void-600: #51697f;
  --color-void-700: #3a4f62;
  --color-void-800: #283949;
  --color-void-900: #1a2734;
  --color-void-950: #001224;
  --color-midnight-monarch: #22082b;
  --color-midnight-monarch-50: #fbf1ff;
  --color-midnight-monarch-100: #f7e3ff;
  --color-midnight-monarch-200: #e6cdf0;
  --color-midnight-monarch-300: #d1b5dc;
  --color-midnight-monarch-400: #b395bf;
  --color-midnight-monarch-500: #9577a1;
  --color-midnight-monarch-600: #785b83;
  --color-midnight-monarch-700: #5e4468;
  --color-midnight-monarch-800: #47324f;
  --color-midnight-monarch-900: #34233a;
  --color-midnight-monarch-950: #22082b;
  --color-subnautical: #002151;
  --color-subnautical-50: #eff6ff;
  --color-subnautical-100: #e0ecff;
  --color-subnautical-200: #c0d9ff;
  --color-subnautical-300: #a0c3f6;
  --color-subnautical-400: #7da3db;
  --color-subnautical-500: #6288c1;
  --color-subnautical-600: #4a6ea4;
  --color-subnautical-700: #37588a;
  --color-subnautical-800: #284672;
  --color-subnautical-900: #1d375d;
  --color-subnautical-950: #002151;
  --color-shadow-purple: #563148;
  --color-shadow-purple-50: #fff0f9;
  --color-shadow-purple-100: #ffe1f2;
  --color-shadow-purple-200: #efcce0;
  --color-shadow-purple-300: #dab3ca;
  --color-shadow-purple-400: #bc92aa;
  --color-shadow-purple-500: #a0758f;
  --color-shadow-purple-600: #835b73;
  --color-shadow-purple-700: #69455b;
  --color-shadow-purple-800: #563148;
  --color-shadow-purple-900: #402736;
  --color-shadow-purple-950: #291722;
  --color-raging-thunderstorm: #004d62;
  --color-raging-thunderstorm-50: #e8f8ff;
  --color-raging-thunderstorm-100: #d0f2ff;
  --color-raging-thunderstorm-200: #b2e0f2;
  --color-raging-thunderstorm-300: #96cbe0;
  --color-raging-thunderstorm-400: #71adc3;
  --color-raging-thunderstorm-500: #5391a9;
  --color-raging-thunderstorm-600: #39778d;
  --color-raging-thunderstorm-700: #256074;
  --color-raging-thunderstorm-800: #004d62;
  --color-raging-thunderstorm-900: #0b3b4a;
  --color-raging-thunderstorm-950: #032530;
  --color-stellar: #3c607f;
  --color-stellar-50: #edf6ff;
  --color-stellar-100: #dbeeff;
  --color-stellar-200: #c0ddf7;
  --color-stellar-300: #a7c8e6;
  --color-stellar-400: #86aaca;
  --color-stellar-500: #6a90b1;
  --color-stellar-600: #527696;
  --color-stellar-700: #3c607f;
  --color-stellar-800: #2d4b65;
  --color-stellar-900: #203a50;
  --color-stellar-950: #112434;
}