Mysterious Depths to Sanctum of Shadows color palette

110829Mysterious Depths 585E95Wizard’s Potion 091A5ASpace Colonisation 622C59Pretty in Prune 392A42Sanctum of Shadows

Open in generator Export PNG, PDF, ASE…

About this palette

Mysterious Depths to Sanctum of Shadows is a 5-color dark, cool palette: #110829 (Mysterious Depths), #585E95 (Wizard’s Potion), #091A5A (Space Colonisation), #622C59 (Pretty in Prune), #392A42 (Sanctum of Shadows). It mixes purple, blue tones and feels cool overall. The strongest text pairing is #110829 on #585E95 with a contrast ratio of 3.16:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mysterious Depths	rgb(17, 8, 41)	hsl(256, 67%, 10%)
Wizard’s Potion	rgb(88, 94, 149)	hsl(234, 26%, 46%)
Space Colonisation	rgb(9, 26, 90)	hsl(227, 82%, 19%)
Pretty in Prune	rgb(98, 44, 89)	hsl(310, 38%, 28%)
Sanctum of Shadows	rgb(57, 42, 66)	hsl(278, 22%, 21%)

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.16:1 Poor#110829 on #585E95
Aa3.16:1 Poor#585E95 on #110829

Color blindness preview

CSS variables

/* Mysterious Depths to Sanctum of Shadows — https://swatchly.xyz/palette/110829-585e95-091a5a-622c59-392a42 */
:root {
  --mysterious-depths: #110829;
  --wizard-s-potion: #585e95;
  --space-colonisation: #091a5a;
  --pretty-in-prune: #622c59;
  --sanctum-of-shadows: #392a42;
}

Tailwind CSS v4

/* Mysterious Depths to Sanctum of Shadows — https://swatchly.xyz/palette/110829-585e95-091a5a-622c59-392a42 */
@theme {
  --color-mysterious-depths: #110829;
  --color-mysterious-depths-50: #f5f4ff;
  --color-mysterious-depths-100: #ebe8ff;
  --color-mysterious-depths-200: #d7d3f5;
  --color-mysterious-depths-300: #c0bbe2;
  --color-mysterious-depths-400: #a19bc6;
  --color-mysterious-depths-500: #827ca7;
  --color-mysterious-depths-600: #655f87;
  --color-mysterious-depths-700: #4c4769;
  --color-mysterious-depths-800: #36324e;
  --color-mysterious-depths-900: #252137;
  --color-mysterious-depths-950: #110829;
  --color-wizard-s-potion: #585e95;
  --color-wizard-s-potion-50: #f3f4ff;
  --color-wizard-s-potion-100: #e4e8ff;
  --color-wizard-s-potion-200: #cad1ff;
  --color-wizard-s-potion-300: #b0b8ee;
  --color-wizard-s-potion-400: #8f97d0;
  --color-wizard-s-potion-500: #737ab3;
  --color-wizard-s-potion-600: #585e95;
  --color-wizard-s-potion-700: #454a79;
  --color-wizard-s-potion-800: #353962;
  --color-wizard-s-potion-900: #282b4e;
  --color-wizard-s-potion-950: #181a33;
  --color-space-colonisation: #091a5a;
  --color-space-colonisation-50: #f1f5ff;
  --color-space-colonisation-100: #e2ebff;
  --color-space-colonisation-200: #c6d7ff;
  --color-space-colonisation-300: #a4c0ff;
  --color-space-colonisation-400: #819fe8;
  --color-space-colonisation-500: #6684cd;
  --color-space-colonisation-600: #4e6ab0;
  --color-space-colonisation-700: #3b5494;
  --color-space-colonisation-800: #2c427a;
  --color-space-colonisation-900: #213364;
  --color-space-colonisation-950: #091a5a;
  --color-pretty-in-prune: #622c59;
  --color-pretty-in-prune-50: #fff0fb;
  --color-pretty-in-prune-100: #ffe1f8;
  --color-pretty-in-prune-200: #f7c6ec;
  --color-pretty-in-prune-300: #e4add8;
  --color-pretty-in-prune-400: #c78bbb;
  --color-pretty-in-prune-500: #ab6f9f;
  --color-pretty-in-prune-600: #8f5684;
  --color-pretty-in-prune-700: #75416b;
  --color-pretty-in-prune-800: #622c59;
  --color-pretty-in-prune-900: #4a2443;
  --color-pretty-in-prune-950: #30142b;
  --color-sanctum-of-shadows: #392a42;
  --color-sanctum-of-shadows-50: #faf2ff;
  --color-sanctum-of-shadows-100: #f2e6f9;
  --color-sanctum-of-shadows-200: #dfd1e8;
  --color-sanctum-of-shadows-300: #cabad4;
  --color-sanctum-of-shadows-400: #ab9ab6;
  --color-sanctum-of-shadows-500: #8f7e9a;
  --color-sanctum-of-shadows-600: #74637e;
  --color-sanctum-of-shadows-700: #5c4d65;
  --color-sanctum-of-shadows-800: #483b50;
  --color-sanctum-of-shadows-900: #392a42;
  --color-sanctum-of-shadows-950: #221a27;
}