Back to palettes

Palette

Moonlit Garden Path

Soft blues and muted grays, tracing a quiet garden path under the gentle glow of the moon.

coolcalm5 colors
More cool 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

#F0F8FF#B0C4DE#778899#4682B4#2F4F4F

Palette guide

How to use Moonlit Garden Path

Overview

The Moonlit Garden Path palette (ID: moonlit-garden-path) offers a calming fusion of soft blues and muted grays, designed to trace a quiet garden path under the gentle glow of the moon. This collection is perfect for creating serene, contemplative, and understated designs. With colors ranging from the airy #F0F8FF, through the balanced #778899, to the deep, grounding #2F4F4F, it provides a versatile foundation for various visual projects. Designers and developers can utilize this palette to craft user interfaces, branding, or digital art that evoke a sense of peace, natural beauty, and quiet elegance, ensuring a cohesive and tranquil aesthetic.

Best used for

  • Calm and relaxing user interfaces
  • Nature-inspired branding and marketing
  • Educational content platforms
  • Travel blogs with serene imagery
  • Home decor and interior design websites
  • Digital art depicting tranquil landscapes

Suggested color roles

primary

Use #2F4F4F as a strong, deep blue-gray base for main headings, footers, or dark text on light backgrounds.

secondary

Employ #4682B4 for supporting content, interactive elements, or as a muted blue accent.

accent

Apply #F0F8FF for bright highlights, delicate details, or as a clean, airy background.

background

The lightest shade, #F0F8FF, makes an excellent clean and airy background, while #778899 can offer a muted, calm canvas.

text

For optimal readability on light backgrounds like #F0F8FF, use #2F4F4F or #4682B4. For dark backgrounds, #F0F8FF provides clear contrast.

Accessibility notes

  • Ensure sufficient contrast when using #778899 on #B0C4DE for text due to their similar values.
  • Text in #2F4F4F on #F0F8FF offers excellent readability for body copy.
  • Avoid using #B0C4DE or #F0F8FF for critical text on very light backgrounds.
  • Always check contrast ratios for interactive elements to meet WCAG standards.

Recommended combinations

Light & Grounded

Creates a light, open feeling with a clear mid-tone for elements and a strong dark for text or focal points.

#F0F8FF · #B0C4DE · #2F4F4F

Muted Harmony

Ideal for a tonal, sophisticated section, moving from a mid-gray to deep blue-gray for depth.

#778899 · #4682B4 · #2F4F4F

Soft Accents

Excellent for layering and subtle contrasts, with #F0F8FF acting as a delicate highlight on muted blues and grays.

#B0C4DE · #778899 · #F0F8FF

CSS variables

:root {
  --moonlit-garden-path-1: #F0F8FF;
  --moonlit-garden-path-2: #B0C4DE;
  --moonlit-garden-path-3: #778899;
  --moonlit-garden-path-4: #4682B4;
  --moonlit-garden-path-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-garden-path": {
        1: "#F0F8FF",
        2: "#B0C4DE",
        3: "#778899",
        4: "#4682B4",
        5: "#2F4F4F",
      }
    }
  }
}

Related searches

calm blue gray palettemoonlit nature colorsserene UI designsoft garden aestheticmuted cool tones palette

Palette colors

Hex values

Color 1#F0F8FF
·
Color 2#B0C4DE
·
Color 3#778899
·
Color 4#4682B4
·
Color 5#2F4F4F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.4:1AA18
3.8:1AA18
8.3:1AAA
2
1.7:1Fail
2:1Fail
2.3:1Fail
5:1AA
3
3.4:1AA18
2:1Fail
1.1:1Fail
2.5:1Fail
4
3.8:1AA18
2.3:1Fail
1.1:1Fail
2.2:1Fail
5
8.3:1AAA
5:1AA
2.5:1Fail
2.2:1Fail

Similar palettes

More like Moonlit Garden Path

View all cool
Cobalt Night Sky
Desert Night Sky
Moonlight Lake Glow
Moonlit Alpine Meadow
Moonlit Garden Path
Moonlit Meadow Charm