Palette

Moonlit Garden Gloom

Muted, deep purplish grays and blues capture the quiet mystery of a garden under moonlight.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Moonlit Garden Gloom reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Moonlit Garden Gloom.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#2C2C3F#47475E#6C6C83#9292A8#B8B8CE

Palette guide

How to use Moonlit Garden Gloom

Overview

The Moonlit Garden Gloom palette masterfully captures the quiet mystery of a garden under a pale moon. Dominated by deep, purplish-grays and blues, this collection is ideal for creating designs that evoke a sense of elegant darkness and subtle intrigue. With shades like the profound base of #2C2C3F, the versatile mid-tone #6C6C83, and the soft, ethereal highlight of #B8B8CE, it offers a sophisticated range for UI elements, branding, or atmospheric digital art. Designers and developers can leverage its muted depth to build immersive experiences, ensuring a consistent mood across various applications. This palette provides a foundation for visually rich, understated designs that demand attention without being overtly bright.

Best used for

Dark mode user interfaces and applications
Luxury brand identity and packaging
Gothic or mysterious themed websites
Elegant digital art and illustrations
Photography portfolios with a moody aesthetic
Understated, sophisticated marketing materials

Suggested color roles

primary

Use #2C2C3F as the foundational dark color for backgrounds, primary containers, or large text blocks in dark mode.

secondary

Apply #47475E for supporting elements like navigation bars, card headers, or subtle dividers to add depth.

accent

Employ #9292A8 or #B8B8CE for interactive elements, highlights, or subtle graphic accents to provide gentle contrast.

background

The deepest hue, #2C2C3F, creates an immersive, elegant dark background, while #47475E can serve as a slightly lighter canvas.

text

For optimal readability on dark backgrounds like #2C2C3F, use #B8B8CE or #9292A8. Consider a near-white for starker contrast.

Accessibility notes

Ensure sufficient contrast when pairing #6C6C83 or #9292A8 with darker backgrounds like #2C2C3F.
Text in #B8B8CE on #2C2C3F provides good readability for body copy.
Avoid using #47475E on #2C2C3F for small text to prevent low contrast issues.
Always test color combinations with accessibility checkers for WCAG compliance, especially for interactive elements.

Recommended combinations

Deep Night

Ideal for dark mode themes where #2C2C3F serves as background, #6C6C83 for elements, and #B8B8CE for text/icons.

#2C2C3F · #6C6C83 · #B8B8CE

Muted Layers

Perfect for layering UI components, with #47475E as base, #9292A8 for secondary text, and #B8B8CE for highlights.

#47475E · #9292A8 · #B8B8CE

Subtle Glow

Creates a rich, tonal depth for headers or large graphics, moving from deep darks to a softer, muted highlight.

#2C2C3F · #47475E · #9292A8

CSS variables

:root {
  --moonlit-garden-gloom-1: #2C2C3F;
  --moonlit-garden-gloom-2: #47475E;
  --moonlit-garden-gloom-3: #6C6C83;
  --moonlit-garden-gloom-4: #9292A8;
  --moonlit-garden-gloom-5: #B8B8CE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-garden-gloom": {
        1: "#2C2C3F",
        2: "#47475E",
        3: "#6C6C83",
        4: "#9292A8",
        5: "#B8B8CE",
      }
    }
  }
}

Hex values

Color 1#2C2C3F

Color 2#47475E

Color 3#6C6C83

Color 4#9292A8

Color 5#B8B8CE

Accessibility

Contrast checker

1.5:1Fail

2.7:1Fail

4.5:1AA18

7:1AAA

1.5:1Fail

1.8:1Fail

3:1Fail

4.6:1AA

2.7:1Fail

1.8:1Fail

1.7:1Fail

2.6:1Fail

4.5:1AA18

3:1Fail

1.7:1Fail

1.6:1Fail

7:1AAA

4.6:1AA

2.6:1Fail

1.6:1Fail

Similar palettes

More like Moonlit Garden Gloom

View all dark

Celestial Deep Blue

Deep Plum Twilight

Enchanted Forest Night

Enchanted Gloom Garden

Enigmatic Shadow Tale

Galactic Star Dust