Midnight Edition to Twilight color palette

001319Midnight Edition 031047Storm 251E43Black Market 3D3047Sanctum of Shadows 284C6BSeafarer 554F8DTwilight

Open in generator Export PNG, PDF, ASE…

About this palette

Midnight Edition to Twilight is a 6-color dark, cool, gradient palette: #001319 (Midnight Edition), #031047 (Storm), #251E43 (Black Market), #3D3047 (Sanctum of Shadows), #284C6B (Seafarer), #554F8D (Twilight). It mixes black, blue, purple tones and feels cool overall. The strongest text pairing is #001319 on #554F8D with a contrast ratio of 2.61:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Edition	rgb(0, 19, 25)	hsl(194, 100%, 5%)
Storm	rgb(3, 16, 71)	hsl(229, 92%, 15%)
Black Market	rgb(37, 30, 67)	hsl(251, 38%, 19%)
Sanctum of Shadows	rgb(61, 48, 71)	hsl(274, 19%, 23%)
Seafarer	rgb(40, 76, 107)	hsl(208, 46%, 29%)
Twilight	rgb(85, 79, 141)	hsl(246, 28%, 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.

Color blindness preview

CSS variables

/* Midnight Edition to Twilight — https://swatchly.xyz/palette/001319-031047-251e43-3d3047-284c6b-554f8d */
:root {
  --midnight-edition: #001319;
  --storm: #031047;
  --black-market: #251e43;
  --sanctum-of-shadows: #3d3047;
  --seafarer: #284c6b;
  --twilight: #554f8d;
}

Tailwind CSS v4

/* Midnight Edition to Twilight — https://swatchly.xyz/palette/001319-031047-251e43-3d3047-284c6b-554f8d */
@theme {
  --color-midnight-edition: #001319;
  --color-midnight-edition-50: #e9f8fd;
  --color-midnight-edition-100: #deeff4;
  --color-midnight-edition-200: #c8dce2;
  --color-midnight-edition-300: #afc5cd;
  --color-midnight-edition-400: #8ea6ae;
  --color-midnight-edition-500: #6f888f;
  --color-midnight-edition-600: #526a71;
  --color-midnight-edition-700: #3b5056;
  --color-midnight-edition-800: #293a3f;
  --color-midnight-edition-900: #1a272b;
  --color-midnight-edition-950: #001319;
  --color-storm: #031047;
  --color-storm-50: #f0f5ff;
  --color-storm-100: #e2ebff;
  --color-storm-200: #c5d8ff;
  --color-storm-300: #a5c0fb;
  --color-storm-400: #83a0e0;
  --color-storm-500: #6683c3;
  --color-storm-600: #4c67a4;
  --color-storm-700: #384f85;
  --color-storm-800: #273b69;
  --color-storm-900: #1b2b51;
  --color-storm-950: #031047;
  --color-black-market: #251e43;
  --color-black-market-50: #f5f4ff;
  --color-black-market-100: #eae8ff;
  --color-black-market-200: #d6d3f7;
  --color-black-market-300: #bfbbe4;
  --color-black-market-400: #a09bc8;
  --color-black-market-500: #8681ae;
  --color-black-market-600: #6d6892;
  --color-black-market-700: #58537a;
  --color-black-market-800: #464164;
  --color-black-market-900: #373351;
  --color-black-market-950: #251e43;
  --color-sanctum-of-shadows: #3d3047;
  --color-sanctum-of-shadows-50: #f9f2ff;
  --color-sanctum-of-shadows-100: #f1e7f9;
  --color-sanctum-of-shadows-200: #ded2e8;
  --color-sanctum-of-shadows-300: #c8bbd3;
  --color-sanctum-of-shadows-400: #aa9bb6;
  --color-sanctum-of-shadows-500: #8f819b;
  --color-sanctum-of-shadows-600: #756781;
  --color-sanctum-of-shadows-700: #5f5269;
  --color-sanctum-of-shadows-800: #4b4054;
  --color-sanctum-of-shadows-900: #3d3047;
  --color-sanctum-of-shadows-950: #261f2b;
  --color-seafarer: #284c6b;
  --color-seafarer-50: #edf6ff;
  --color-seafarer-100: #dbeeff;
  --color-seafarer-200: #bedbf7;
  --color-seafarer-300: #a5c7e6;
  --color-seafarer-400: #83a8ca;
  --color-seafarer-500: #688eb0;
  --color-seafarer-600: #507495;
  --color-seafarer-700: #3c5e7d;
  --color-seafarer-800: #284c6b;
  --color-seafarer-900: #203a51;
  --color-seafarer-950: #112536;
  --color-twilight: #554f8d;
  --color-twilight-50: #f4f4ff;
  --color-twilight-100: #e9e9ff;
  --color-twilight-200: #d4d3ff;
  --color-twilight-300: #bdbbf7;
  --color-twilight-400: #9e9bdc;
  --color-twilight-500: #847fc2;
  --color-twilight-600: #6b65a5;
  --color-twilight-700: #554f8d;
  --color-twilight-800: #423d70;
  --color-twilight-900: #322e59;
  --color-twilight-950: #1f1c3b;
}