Palette

Moonlit Garden Path

A soft, tranquil palette capturing the subtle beauty of a garden bathed in moonbeams.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Moonlit Garden Path 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 Path.

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

Data visualization

#8C9799#AEB8BC#D8DFE0#4B5556#6E7A7B

Palette guide

How to use Moonlit Garden Path

Overview

The Moonlit Garden Path palette (ID: moonlit-garden-path-3) offers a soft, tranquil range of subtle grays, perfectly capturing the serene beauty of a garden bathed in moonbeams. This monochrome-leaning collection, featuring shades like the grounding #4B5556, the balanced #8C9799, and the delicate #D8DFE0, is ideal for designs that require a sophisticated, minimalist, and calming aesthetic. Designers and developers can leverage its understated elegance to create clean interfaces, refined branding, or artistic compositions where subtlety and texture are paramount. The palette promotes a sense of quiet sophistication, allowing content and form to speak volumes without overt color distractions.

Best used for

Minimalist website designs and portfolios
Sophisticated architectural presentations
Tranquil meditation and wellness apps
Elegant photography and art galleries
High-end fashion or luxury brand packaging
Monochrome-focused user interfaces

Suggested color roles

primary

Use #4B5556 as a deep, anchoring gray for backgrounds, major headings, or strong content blocks.

secondary

Apply #6E7A7B for supporting elements, subheadings, or to add gentle contrast against the primary dark.

accent

Employ #D8DFE0 as a subtle highlight for delicate details, interactive states, or clean backgrounds.

background

The lightest shade, #D8DFE0, provides a clean, tranquil canvas, while #4B5556 can create a moody, sophisticated base.

text

For optimal readability on light backgrounds like #D8DFE0, use #4B5556 or #6E7A7B. On dark backgrounds, #D8DFE0 offers clear contrast.

Accessibility notes

Ensure sufficient contrast when using #6E7A7B on #8C9799 for text, as they are close in value.
Text in #4B5556 on #D8DFE0 provides excellent readability.
Avoid placing light text (#D8DFE0) on mid-tones like #AEB8BC without careful contrast checks.
Always test all color pairings for WCAG compliance, especially for critical information.

Recommended combinations

Quiet Contrast

Creates a clear hierarchy: light background, mid-tone for elements, and dark for primary text or accents.

#D8DFE0 · #8C9799 · #4B5556

Subtle Depth

Ideal for layered components or gradients, offering a smooth transition from deep to lighter grays.

#4B5556 · #6E7A7B · #AEB8BC

Ethereal Wash

Perfect for backgrounds and subtle graphical elements where a gentle, almost monochromatic blend is desired.

#8C9799 · #AEB8BC · #D8DFE0

CSS variables

:root {
  --moonlit-garden-path-3-1: #8C9799;
  --moonlit-garden-path-3-2: #AEB8BC;
  --moonlit-garden-path-3-3: #D8DFE0;
  --moonlit-garden-path-3-4: #4B5556;
  --moonlit-garden-path-3-5: #6E7A7B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-garden-path-3": {
        1: "#8C9799",
        2: "#AEB8BC",
        3: "#D8DFE0",
        4: "#4B5556",
        5: "#6E7A7B",
      }
    }
  }
}

Hex values

Color 1#8C9799

Color 2#AEB8BC

Color 3#D8DFE0

Color 4#4B5556

Color 5#6E7A7B

Accessibility

Contrast checker

1.5:1Fail

2.2:1Fail

2.6:1Fail

1.5:1Fail

3.8:1AA18

2.2:1Fail

1.5:1Fail

5.7:1AA

3.3:1AA18

2.6:1Fail

3.8:1AA18

5.7:1AA

1.7:1Fail

1.5:1Fail

2.2:1Fail

3.3:1AA18

1.7:1Fail

Similar palettes

More like Moonlit Garden Path

Moonlit Garden Path

See it in context.

Ready when you are.

Built with Moonlit Garden Path.

How to use Moonlit Garden Path

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Quiet Contrast

Subtle Depth

Ethereal Wash

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Moonlit Garden Path