Start generating

Mysterious Depths to Starry Night color palette

000927Mysterious Depths001F2BMidnight Dreams004249Rich Black4D3857Shadow Purple2E6190Starry Night
Open in generator Export PNG, PDF, ASE…

About this palette

Mysterious Depths to Starry Night is a 5-color dark, cool, gradient palette: #000927 (Mysterious Depths), #001F2B (Midnight Dreams), #004249 (Rich Black), #4D3857 (Shadow Purple), #2E6190 (Starry Night). It mixes blue, turquoise, purple tones and feels cool overall. The strongest text pairing is #000927 on #2E6190 with a contrast ratio of 3.02:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Mysterious Depthsrgb(0, 9, 39)hsl(226, 100%, 8%)
Midnight Dreamsrgb(0, 31, 43)hsl(197, 100%, 8%)
Rich Blackrgb(0, 66, 73)hsl(186, 100%, 14%)
Shadow Purplergb(77, 56, 87)hsl(281, 22%, 28%)
Starry Nightrgb(46, 97, 144)hsl(209, 52%, 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.

  • Aa3.02:1 Poor#000927 on #2E6190
  • Aa3.02:1 Poor#2E6190 on #000927

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Mysterious Depths to Starry Night — https://swatchly.xyz/palette/000927-001f2b-004249-4d3857-2e6190 */
:root {
  --mysterious-depths: #000927;
  --midnight-dreams: #001f2b;
  --rich-black: #004249;
  --shadow-purple: #4d3857;
  --starry-night: #2e6190;
}

Tailwind CSS v4

/* Mysterious Depths to Starry Night — https://swatchly.xyz/palette/000927-001f2b-004249-4d3857-2e6190 */
@theme {
  --color-mysterious-depths: #000927;
  --color-mysterious-depths-50: #f0f5ff;
  --color-mysterious-depths-100: #e0ecff;
  --color-mysterious-depths-200: #c6d9f8;
  --color-mysterious-depths-300: #adc2e6;
  --color-mysterious-depths-400: #8ba2c9;
  --color-mysterious-depths-500: #6c83aa;
  --color-mysterious-depths-600: #4f6488;
  --color-mysterious-depths-700: #384a69;
  --color-mysterious-depths-800: #25344d;
  --color-mysterious-depths-900: #162134;
  --color-mysterious-depths-950: #000927;
  --color-midnight-dreams: #001f2b;
  --color-midnight-dreams-50: #e9f8ff;
  --color-midnight-dreams-100: #daeff9;
  --color-midnight-dreams-200: #c2dce8;
  --color-midnight-dreams-300: #a9c6d4;
  --color-midnight-dreams-400: #87a7b6;
  --color-midnight-dreams-500: #6a8b9a;
  --color-midnight-dreams-600: #506f7e;
  --color-midnight-dreams-700: #3b5864;
  --color-midnight-dreams-800: #2b434e;
  --color-midnight-dreams-900: #1e333c;
  --color-midnight-dreams-950: #001f2b;
  --color-rich-black: #004249;
  --color-rich-black-50: #e0fbff;
  --color-rich-black-100: #d0f3f8;
  --color-rich-black-200: #b7e0e6;
  --color-rich-black-300: #9bcbd1;
  --color-rich-black-400: #78adb5;
  --color-rich-black-500: #5c939b;
  --color-rich-black-600: #437a81;
  --color-rich-black-700: #30636a;
  --color-rich-black-800: #215056;
  --color-rich-black-900: #004249;
  --color-rich-black-950: #0a2a2d;
  --color-shadow-purple: #4d3857;
  --color-shadow-purple-50: #faf1ff;
  --color-shadow-purple-100: #f4e5fc;
  --color-shadow-purple-200: #e2d0ec;
  --color-shadow-purple-300: #cdb8d7;
  --color-shadow-purple-400: #ae97ba;
  --color-shadow-purple-500: #937c9e;
  --color-shadow-purple-600: #786182;
  --color-shadow-purple-700: #604c69;
  --color-shadow-purple-800: #4d3857;
  --color-shadow-purple-900: #3a2c41;
  --color-shadow-purple-950: #251a2a;
  --color-starry-night: #2e6190;
  --color-starry-night-50: #eef6ff;
  --color-starry-night-100: #dcedff;
  --color-starry-night-200: #bcddff;
  --color-starry-night-300: #9cc9f6;
  --color-starry-night-400: #79abdc;
  --color-starry-night-500: #5d91c3;
  --color-starry-night-600: #4477a7;
  --color-starry-night-700: #2e6190;
  --color-starry-night-800: #214c73;
  --color-starry-night-900: #153a5c;
  --color-starry-night-950: #09243d;
}

Similar palettes