Mysterious Depths to Midnight Shadow color palette

000928Mysterious Depths 002119Nightmare 00374BSea of Stars 00545CAbyssal Waters 566272Midnight Shadow

Open in generator Export PNG, PDF, ASE…

About this palette

Mysterious Depths to Midnight Shadow is a 5-color dark, cool, gradient palette: #000928 (Mysterious Depths), #002119 (Nightmare), #00374B (Sea of Stars), #00545C (Abyssal Waters), #566272 (Midnight Shadow). It mixes blue, turquoise, gray tones and feels cool overall. The strongest text pairing is #000928 on #566272 with a contrast ratio of 3.17:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mysterious Depths	rgb(0, 9, 40)	hsl(226, 100%, 8%)
Nightmare	rgb(0, 33, 25)	hsl(165, 100%, 6%)
Sea of Stars	rgb(0, 55, 75)	hsl(196, 100%, 15%)
Abyssal Waters	rgb(0, 84, 92)	hsl(185, 100%, 18%)
Midnight Shadow	rgb(86, 98, 114)	hsl(214, 14%, 39%)

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.17:1 Poor#000928 on #566272
Aa3.17:1 Poor#566272 on #000928

Color blindness preview

CSS variables

/* Mysterious Depths to Midnight Shadow — https://swatchly.xyz/palette/000928-002119-00374b-00545c-566272 */
:root {
  --mysterious-depths: #000928;
  --nightmare: #002119;
  --sea-of-stars: #00374b;
  --abyssal-waters: #00545c;
  --midnight-shadow: #566272;
}

Tailwind CSS v4

/* Mysterious Depths to Midnight Shadow — https://swatchly.xyz/palette/000928-002119-00374b-00545c-566272 */
@theme {
  --color-mysterious-depths: #000928;
  --color-mysterious-depths-50: #f0f5ff;
  --color-mysterious-depths-100: #e1ecff;
  --color-mysterious-depths-200: #c5d9f9;
  --color-mysterious-depths-300: #acc2e7;
  --color-mysterious-depths-400: #8ba2ca;
  --color-mysterious-depths-500: #6b83ab;
  --color-mysterious-depths-600: #4f6489;
  --color-mysterious-depths-700: #374a6a;
  --color-mysterious-depths-800: #25344d;
  --color-mysterious-depths-900: #162135;
  --color-mysterious-depths-950: #000928;
  --color-nightmare: #002119;
  --color-nightmare-50: #e6fbf4;
  --color-nightmare-100: #daf1e9;
  --color-nightmare-200: #c4dfd6;
  --color-nightmare-300: #aac9bf;
  --color-nightmare-400: #88aa9f;
  --color-nightmare-500: #6b8e83;
  --color-nightmare-600: #517268;
  --color-nightmare-700: #3c5a51;
  --color-nightmare-800: #2b453d;
  --color-nightmare-900: #1e342d;
  --color-nightmare-950: #002119;
  --color-sea-of-stars: #00374b;
  --color-sea-of-stars-50: #eaf8ff;
  --color-sea-of-stars-100: #d4f0ff;
  --color-sea-of-stars-200: #b9def0;
  --color-sea-of-stars-300: #9ec8dd;
  --color-sea-of-stars-400: #7aa9c0;
  --color-sea-of-stars-500: #5d8da4;
  --color-sea-of-stars-600: #437288;
  --color-sea-of-stars-700: #2f5a6e;
  --color-sea-of-stars-800: #204658;
  --color-sea-of-stars-900: #00374b;
  --color-sea-of-stars-950: #0a212c;
  --color-abyssal-waters: #00545c;
  --color-abyssal-waters-50: #dffbff;
  --color-abyssal-waters-100: #cbf4f9;
  --color-abyssal-waters-200: #b0e2e8;
  --color-abyssal-waters-300: #95ced5;
  --color-abyssal-waters-400: #71b1b9;
  --color-abyssal-waters-500: #53969f;
  --color-abyssal-waters-600: #397d85;
  --color-abyssal-waters-700: #25666e;
  --color-abyssal-waters-800: #00545c;
  --color-abyssal-waters-900: #094046;
  --color-abyssal-waters-950: #02292e;
  --color-midnight-shadow: #566272;
  --color-midnight-shadow-50: #eff6ff;
  --color-midnight-shadow-100: #e1eaf6;
  --color-midnight-shadow-200: #cad4e2;
  --color-midnight-shadow-300: #b0bccc;
  --color-midnight-shadow-400: #8e9bac;
  --color-midnight-shadow-500: #717e8f;
  --color-midnight-shadow-600: #566272;
  --color-midnight-shadow-700: #434d5b;
  --color-midnight-shadow-800: #343c48;
  --color-midnight-shadow-900: #272f39;
  --color-midnight-shadow-950: #171d24;
}