Start generating

Void to Majestic Magic color palette

001126Void11084DSilent Twilight272A43Midnight Masquerade0A336DAtlantic Navy114D8FDancing Sea5C526DMajestic Magic
Open in generator Export PNG, PDF, ASE…

About this palette

Void to Majestic Magic is a 6-color dark, cool, gradient palette: #001126 (Void), #11084D (Silent Twilight), #272A43 (Midnight Masquerade), #0A336D (Atlantic Navy), #114D8F (Dancing Sea), #5C526D (Majestic Magic). It mixes black, purple, blue tones and feels cool overall. The strongest text pairing is #001126 on #5C526D with a contrast ratio of 2.60:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Voidrgb(0, 17, 38)hsl(213, 100%, 7%)
Silent Twilightrgb(17, 8, 77)hsl(248, 81%, 17%)
Midnight Masqueradergb(39, 42, 67)hsl(234, 26%, 21%)
Atlantic Navyrgb(10, 51, 109)hsl(215, 83%, 23%)
Dancing Seargb(17, 77, 143)hsl(211, 79%, 31%)
Majestic Magicrgb(92, 82, 109)hsl(262, 14%, 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

    • Protanopia
    • Deuteranopia
    • Tritanopia
    • Achromatopsia
    • Dog vision

    CSS variables

    /* Void to Majestic Magic — https://swatchly.xyz/palette/001126-11084d-272a43-0a336d-114d8f-5c526d */
:root {
  --void: #001126;
  --silent-twilight: #11084d;
  --midnight-masquerade: #272a43;
  --atlantic-navy: #0a336d;
  --dancing-sea: #114d8f;
  --majestic-magic: #5c526d;
}

    Tailwind CSS v4

    /* Void to Majestic Magic — https://swatchly.xyz/palette/001126-11084d-272a43-0a336d-114d8f-5c526d */
@theme {
  --color-void: #001126;
  --color-void-50: #eef6ff;
  --color-void-100: #ddedff;
  --color-void-200: #c6daf0;
  --color-void-300: #adc4dd;
  --color-void-400: #8ba4c0;
  --color-void-500: #6c86a1;
  --color-void-600: #506882;
  --color-void-700: #3a4e65;
  --color-void-800: #28394b;
  --color-void-900: #1a2735;
  --color-void-950: #001126;
  --color-silent-twilight: #11084d;
  --color-silent-twilight-50: #f2f5ff;
  --color-silent-twilight-100: #e6eaff;
  --color-silent-twilight-200: #cdd5ff;
  --color-silent-twilight-300: #b0bcff;
  --color-silent-twilight-400: #8f9be7;
  --color-silent-twilight-500: #737eca;
  --color-silent-twilight-600: #5962aa;
  --color-silent-twilight-700: #434a8b;
  --color-silent-twilight-800: #32376f;
  --color-silent-twilight-900: #242856;
  --color-silent-twilight-950: #11084d;
  --color-midnight-masquerade: #272a43;
  --color-midnight-masquerade-50: #f3f4ff;
  --color-midnight-masquerade-100: #e6eaff;
  --color-midnight-masquerade-200: #d2d6ee;
  --color-midnight-masquerade-300: #babfdb;
  --color-midnight-masquerade-400: #999ebc;
  --color-midnight-masquerade-500: #7d819f;
  --color-midnight-masquerade-600: #626682;
  --color-midnight-masquerade-700: #4b4f68;
  --color-midnight-masquerade-800: #383b50;
  --color-midnight-masquerade-900: #272a43;
  --color-midnight-masquerade-950: #181925;
  --color-atlantic-navy: #0a336d;
  --color-atlantic-navy-50: #eff6ff;
  --color-atlantic-navy-100: #e0ecff;
  --color-atlantic-navy-200: #c0d9ff;
  --color-atlantic-navy-300: #9cc3fe;
  --color-atlantic-navy-400: #79a3e4;
  --color-atlantic-navy-500: #5d88c9;
  --color-atlantic-navy-600: #446eac;
  --color-atlantic-navy-700: #315790;
  --color-atlantic-navy-800: #234477;
  --color-atlantic-navy-900: #0a336d;
  --color-atlantic-navy-950: #0c2140;
  --color-dancing-sea: #114d8f;
  --color-dancing-sea-50: #eff6ff;
  --color-dancing-sea-100: #deedff;
  --color-dancing-sea-200: #bbd9ff;
  --color-dancing-sea-300: #90c1ff;
  --color-dancing-sea-400: #67a0e6;
  --color-dancing-sea-500: #4982c9;
  --color-dancing-sea-600: #2f66a8;
  --color-dancing-sea-700: #114d8f;
  --color-dancing-sea-800: #103c6f;
  --color-dancing-sea-900: #082e59;
  --color-dancing-sea-950: #031c3a;
  --color-majestic-magic: #5c526d;
  --color-majestic-magic-50: #f7f3ff;
  --color-majestic-magic-100: #eee7fb;
  --color-majestic-magic-200: #dcd3eb;
  --color-majestic-magic-300: #c6bdd7;
  --color-majestic-magic-400: #a79dba;
  --color-majestic-magic-500: #8c829f;
  --color-majestic-magic-600: #726884;
  --color-majestic-magic-700: #5c526d;
  --color-majestic-magic-800: #484056;
  --color-majestic-magic-900: #373043;
  --color-majestic-magic-950: #221d2b;
}

    Similar palettes