Start generating

Moonless Mystery to Green Glint color palette

1E2434Moonless Mystery3C457AQueen of the Night ShiftA76FA4Drama QueenB7C197Beige and SageE2F5C0Green Glint
Open in generator Export PNG, PDF, ASE…

About this palette

Moonless Mystery to Green Glint is a 5-color cool palette: #1E2434 (Moonless Mystery), #3C457A (Queen of the Night Shift), #A76FA4 (Drama Queen), #B7C197 (Beige and Sage), #E2F5C0 (Green Glint). It mixes gray, blue, pink, green tones and feels cool overall. The strongest text pairing is #1E2434 on #E2F5C0 with a contrast ratio of 13.30:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Moonless Mysteryrgb(30, 36, 52)hsl(224, 27%, 16%)
Queen of the Night Shiftrgb(60, 69, 122)hsl(231, 34%, 36%)
Drama Queenrgb(167, 111, 164)hsl(303, 24%, 55%)
Beige and Sagergb(183, 193, 151)hsl(74, 25%, 67%)
Green Glintrgb(226, 245, 192)hsl(82, 73%, 86%)

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.

  • Aa13.30:1 Super#1E2434 on #E2F5C0
  • Aa13.30:1 Super#E2F5C0 on #1E2434
  • Aa8.17:1 Very good#1E2434 on #B7C197
  • Aa8.17:1 Very good#B7C197 on #1E2434
  • Aa7.77:1 Very good#3C457A on #E2F5C0
  • Aa7.77:1 Very good#E2F5C0 on #3C457A
  • Aa4.77:1 Good#3C457A on #B7C197
  • Aa4.77:1 Good#B7C197 on #3C457A

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Moonless Mystery to Green Glint — https://swatchly.xyz/palette/1e2434-3c457a-a76fa4-b7c197-e2f5c0 */
:root {
  --moonless-mystery: #1e2434;
  --queen-of-the-night-shift: #3c457a;
  --drama-queen: #a76fa4;
  --beige-and-sage: #b7c197;
  --green-glint: #e2f5c0;
}

Tailwind CSS v4

/* Moonless Mystery to Green Glint — https://swatchly.xyz/palette/1e2434-3c457a-a76fa4-b7c197-e2f5c0 */
@theme {
  --color-moonless-mystery: #1e2434;
  --color-moonless-mystery-50: #f1f5ff;
  --color-moonless-mystery-100: #e6ebf9;
  --color-moonless-mystery-200: #d1d7e7;
  --color-moonless-mystery-300: #b9c1d3;
  --color-moonless-mystery-400: #99a1b5;
  --color-moonless-mystery-500: #7f879b;
  --color-moonless-mystery-600: #666e81;
  --color-moonless-mystery-700: #515869;
  --color-moonless-mystery-800: #404655;
  --color-moonless-mystery-900: #323744;
  --color-moonless-mystery-950: #1e2434;
  --color-queen-of-the-night-shift: #3c457a;
  --color-queen-of-the-night-shift-50: #f2f5ff;
  --color-queen-of-the-night-shift-100: #e5eaff;
  --color-queen-of-the-night-shift-200: #cbd5ff;
  --color-queen-of-the-night-shift-300: #b3bff4;
  --color-queen-of-the-night-shift-400: #94a1da;
  --color-queen-of-the-night-shift-500: #7a86c1;
  --color-queen-of-the-night-shift-600: #626da5;
  --color-queen-of-the-night-shift-700: #4e588b;
  --color-queen-of-the-night-shift-800: #3c457a;
  --color-queen-of-the-night-shift-900: #2e355d;
  --color-queen-of-the-night-shift-950: #1c213e;
  --color-drama-queen: #a76fa4;
  --color-drama-queen-50: #ffeffe;
  --color-drama-queen-100: #ffdffc;
  --color-drama-queen-200: #f4c6f0;
  --color-drama-queen-300: #e0addd;
  --color-drama-queen-400: #c38bbf;
  --color-drama-queen-500: #a76fa4;
  --color-drama-queen-600: #8a5588;
  --color-drama-queen-700: #71416f;
  --color-drama-queen-800: #5a3058;
  --color-drama-queen-900: #472345;
  --color-drama-queen-950: #2e142d;
  --color-beige-and-sage: #b7c197;
  --color-beige-and-sage-50: #eff6dd;
  --color-beige-and-sage-100: #e4ebcf;
  --color-beige-and-sage-200: #cfd7b7;
  --color-beige-and-sage-300: #b7c197;
  --color-beige-and-sage-400: #99a27b;
  --color-beige-and-sage-500: #7f8860;
  --color-beige-and-sage-600: #666e48;
  --color-beige-and-sage-700: #505835;
  --color-beige-and-sage-800: #3f4527;
  --color-beige-and-sage-900: #30361c;
  --color-beige-and-sage-950: #1e210f;
  --color-green-glint: #e2f5c0;
  --color-green-glint-50: #f0fbde;
  --color-green-glint-100: #e2f5c0;
  --color-green-glint-200: #d1dfb9;
  --color-green-glint-300: #b9c99d;
  --color-green-glint-400: #99aa7a;
  --color-green-glint-500: #7d8e5d;
  --color-green-glint-600: #637344;
  --color-green-glint-700: #4e5c31;
  --color-green-glint-800: #3c4822;
  --color-green-glint-900: #2d3717;
  --color-green-glint-950: #1b220b;
}

Similar palettes