Back to palettes

Palette

Moonlight Garden Serene

Quiet hues of silver and muted blues, capturing the tranquil essence of a moonlit garden.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Moonlight Garden Serene 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 Moonlight Garden Serene.

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

Data visualization

#52677C#7A9B9F#AFB9C1#3D4E61#69838A

Palette guide

How to use Moonlight Garden Serene

Overview

The Moonlight Garden Serene palette captures the tranquil essence of a moonlit garden, featuring quiet hues of silver and muted blues. Dominant shades include the deep #3D4E61 (Dark Slate Blue) and #52677C (Steel Blue), complemented by the more subdued #69838A (Cadet Gray) and #7A9B9F (Sage Green-Blue). The lightest touch comes from #AFB9C1 (Light Grayish Blue). This palette is perfect for designers and developers aiming to create environments that are calm, sophisticated, and subtly inviting. Its cool, understated tones lend themselves well to elegant branding, contemplative digital spaces, or applications where a serene user experience is paramount. The natural harmony of these colors ensures a cohesive and visually pleasing aesthetic.

Best used for

  • Elegant lifestyle branding
  • Serene wellness applications
  • Minimalist interior design concepts
  • Sophisticated web portfolios
  • Nature-inspired digital art
  • Calm corporate presentations

Suggested color roles

primary

Use #3D4E61 as the foundational dark blue-gray for main sections, headers, or backgrounds, grounding the design.

secondary

Apply #52677C for sub-sections, navigation, or significant visual blocks, adding depth without harshness.

accent

Employ #7A9B9F or #AFB9C1 for subtle interactive elements, highlights, or icons, providing a gentle contrast.

background

The lighter #AFB9C1 or #69838A can serve as a soft, airy background, promoting a sense of calm and spaciousness.

text

For primary body text, a dark color like #3D4E61 or a charcoal gray provides good readability. Use #AFB9C1 for text on darker backgrounds.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using mid-tones like #7A9B9F.
  • Pair the lightest shade #AFB9C1 with the darkest #3D4E61 for essential text and interactive elements.
  • Avoid placing #69838A text on #7A9B9F backgrounds for small font sizes due to low contrast.
  • Interactive elements should have clear focus states that stand out, potentially using #AFB9C1 against darker blues.

Recommended combinations

Quiet Depth

Creates a sophisticated, layered look with a clear light accent, suitable for headers and content blocks.

#3D4E61 · #52677C · #AFB9C1

Garden Mist

Offers a softer, ethereal blend, perfect for background textures or subtle informational panels.

#7A9B9F · #69838A · #AFB9C1

Serene Harmony

A balanced dark and muted combination for a professional yet calm aesthetic in UI elements.

#52677C · #3D4E61 · #7A9B9F

CSS variables

:root {
  --moonlight-garden-serene-1: #52677C;
  --moonlight-garden-serene-2: #7A9B9F;
  --moonlight-garden-serene-3: #AFB9C1;
  --moonlight-garden-serene-4: #3D4E61;
  --moonlight-garden-serene-5: #69838A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlight-garden-serene": {
        1: "#52677C",
        2: "#7A9B9F",
        3: "#AFB9C1",
        4: "#3D4E61",
        5: "#69838A",
      }
    }
  }
}

Related searches

muted blue grey palettecalm serene color schememoonlit garden colorssubtle cool tones designelegant neutral blue palette

Palette colors

Hex values

Color 1#52677C
·
Color 2#7A9B9F
·
Color 3#AFB9C1
·
Color 4#3D4E61
·
Color 5#69838A
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
2.9:1Fail
1.5:1Fail
1.5:1Fail
2
2:1Fail
1.5:1Fail
2.9:1Fail
1.3:1Fail
3
2.9:1Fail
1.5:1Fail
4.3:1AA18
2:1Fail
4
1.5:1Fail
2.9:1Fail
4.3:1AA18
2.1:1Fail
5
1.5:1Fail
1.3:1Fail
2:1Fail
2.1:1Fail

Similar palettes

More like Moonlight Garden Serene

View all cool
Cool Mist Dawn
Moonlit Alpine Meadow
Aegean Sea Serene
Alpine Morning Mist
Aqua Dream Glow
Aqua Stillness Mood