Palette

Lunar Shadow Garden

Deep, cool blues and greys reflecting a mystical garden bathed in soft, ethereal moonlight.

DarkDark5 colors

More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lunar Shadow Garden 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 Lunar Shadow Garden.

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

Data visualization

#2C3E50#5A728A#8D9CAD#C1CBD4#1A2530

Palette guide

How to use Lunar Shadow Garden

Overview

The Lunar Shadow Garden palette evokes a serene, mystical ambiance with its deep, cool blue-greys. Anchored by the profound #1A2530 and the rich #2C3E50, it transitions smoothly through the muted #5A728A and the ethereal #8D9CAD, culminating in the soft, moonlit #C1CBD4. This collection is ideal for designers and developers seeking to create sophisticated, tranquil digital experiences. Its harmonious blend of shadowy depths and subtle luminosity makes it perfect for conveying elegance, mystery, and a quiet strength. The palette's cohesive nature ensures a polished and immersive visual journey for users.

Best used for

Luxury brand websites and digital interfaces
Evening wear or jewelry e-commerce platforms
Atmospheric game environments or UI
Editorial design for art or culture magazines
Sophisticated dark mode themes for applications
High-end spa or wellness branding

Suggested color roles

primary

Use #2C3E50 as the dominant hue for main sections and primary elements, providing a strong, elegant foundation.

secondary

Apply #5A728A for supporting elements, subheadings, or secondary calls-to-action, offering subtle depth.

accent

Highlight key information or interactive elements with #8D9CAD to introduce a delicate, ethereal touch without overpowering.

background

Employ #1A2530 for deep, immersive backgrounds, establishing a profound sense of mystery and sophistication.

text

Pair #C1CBD4 for primary text on darker backgrounds like #1A2530 or #2C3E50 to ensure excellent readability and a soft contrast.

Accessibility notes

Ensure #C1CBD4 text against #1A2530 or #2C3E50 meets WCAG AA contrast ratios for readability.
Avoid using #5A728A and #8D9CAD together for small text or critical UI elements due to insufficient contrast.
Reserve lighter shades like #C1CBD4 for large headings or graphical elements when placed on #8D9CAD.
Test all text and interactive element contrasts across various screen types to guarantee universal legibility.

Recommended combinations

Mystic Depth

Ideal for a dark mode interface, with deep background, light text, and a subtle accent.

#1A2530 · #C1CBD4 · #8D9CAD

Ethereal Balance

Excellent for hero sections, using the primary as a base, secondary for details, and light for headlines.

#2C3E50 · #5A728A · #C1CBD4

Soft Contrast

Suitable for a lighter content area, with a pale background, dark text, and a mid-tone for links or icons.

#C1CBD4 · #2C3E50 · #5A728A

CSS variables

:root {
  --lunar-shadow-garden-1: #2C3E50;
  --lunar-shadow-garden-2: #5A728A;
  --lunar-shadow-garden-3: #8D9CAD;
  --lunar-shadow-garden-4: #C1CBD4;
  --lunar-shadow-garden-5: #1A2530;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lunar-shadow-garden": {
        1: "#2C3E50",
        2: "#5A728A",
        3: "#8D9CAD",
        4: "#C1CBD4",
        5: "#1A2530",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#5A728A

Color 3#8D9CAD

Color 4#C1CBD4

Color 5#1A2530

Accessibility

Contrast checker

2.2:1Fail

3.9:1AA18

6.7:1AA

1.4:1Fail

2.2:1Fail

1.8:1Fail

3:1AA18

3.1:1AA18

3.9:1AA18

1.8:1Fail

1.7:1Fail

5.5:1AA

6.7:1AA

3:1AA18

1.7:1Fail

9.4:1AAA

1.4:1Fail

3.1:1AA18

5.5:1AA

9.4:1AAA

Similar palettes

More like Lunar Shadow Garden

View all Dark

Abyssal Bioluminescence

Cyber City Echoes

Deep Space Nebula

Gothic Nightshade Bloom

Haunted Hallway Gloom

Midnight Bloom Velvet