Back to palettes

Palette

Moonlit Garden

Deep blues and greens illuminated by faint silver hints, like a mystical garden under the glow of the moon.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F2F3B#2B5B6E#4E879B#7BAFB9#A8DDE7

Palette guide

How to use Moonlit Garden

Overview

The Moonlit Garden palette presents a captivating blend of deep blues and greens, reminiscent of a mystical garden under a faint, silver moon. This elegant collection is perfect for designs that aim to evoke mystery, sophistication, and an ethereal quality. Featuring shades from the profound #0F2F3B to the vibrant #4E879B and the airy #A8DDE7, it offers a rich spectrum for visual storytelling. Designers and developers can leverage this palette to craft immersive digital experiences, luxurious branding, or artistic compositions that resonate with depth and natural elegance. It's particularly effective for projects requiring a sophisticated, cool-toned aesthetic with a touch of magic.

Best used for

  • Elegant and mysterious branding
  • Environmental and conservation websites
  • Luxury spa and wellness applications
  • Art galleries and creative portfolios
  • Sophisticated web themes and UI designs
  • Digital art with a magical, nocturnal theme

Suggested color roles

primary

Use #0F2F3B as a deep, anchoring teal for backgrounds, main headings, or immersive sections.

secondary

Apply #2B5B6E for supporting content blocks, secondary navigation, or to add a rich blue-green layer.

accent

Employ #A8DDE7 for bright, ethereal highlights, interactive elements, or delicate graphical accents.

background

The deepest hue, #0F2F3B, creates an elegant, dark background, while #7BAFB9 can serve as a lighter, calm canvas.

text

For optimal readability on dark backgrounds like #0F2F3B, use #A8DDE7 or #7BAFB9. Consider a near-white for starker contrast.

Accessibility notes

  • Ensure sufficient contrast when pairing #4E879B with darker shades like #2B5B6E for text.
  • Text in #A8DDE7 on #0F2F3B provides excellent readability for body copy.
  • Avoid using #7BAFB9 or #A8DDE7 for critical text elements on very light backgrounds.
  • Always test color combinations with accessibility checkers for WCAG compliance, especially for interactive elements.

Recommended combinations

Mystic Depths

Ideal for a dark, immersive theme where #0F2F3B is the background, #4E879B for elements, and #A8DDE7 for highlights.

#0F2F3B · #4E879B · #A8DDE7

Ethereal Layers

Perfect for creating depth in UI, with #2B5B6E as a base, #7BAFB9 for content, and #A8DDE7 for delicate accents.

#2B5B6E · #7BAFB9 · #A8DDE7

Deep Harmony

Excellent for gradients or large graphic elements, showcasing a smooth transition through the palette's darker tones.

#0F2F3B · #2B5B6E · #4E879B

CSS variables

:root {
  --moonlit-garden-1: #0F2F3B;
  --moonlit-garden-2: #2B5B6E;
  --moonlit-garden-3: #4E879B;
  --moonlit-garden-4: #7BAFB9;
  --moonlit-garden-5: #A8DDE7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-garden": {
        1: "#0F2F3B",
        2: "#2B5B6E",
        3: "#4E879B",
        4: "#7BAFB9",
        5: "#A8DDE7",
      }
    }
  }
}

Related searches

mystical garden colorsdeep blue green paletteethereal branding designelegant cool tones websophisticated teal aesthetic

Palette colors

Hex values

Color 1#0F2F3B
·
Color 2#2B5B6E
·
Color 3#4E879B
·
Color 4#7BAFB9
·
Color 5#A8DDE7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.5:1AA18
5.8:1AA
9.5:1AAA
2
1.9:1Fail
1.9:1Fail
3.1:1AA18
5:1AA
3
3.5:1AA18
1.9:1Fail
1.6:1Fail
2.7:1Fail
4
5.8:1AA
3.1:1AA18
1.6:1Fail
1.6:1Fail
5
9.5:1AAA
5:1AA
2.7:1Fail
1.6:1Fail

Similar palettes

More like Moonlit Garden

View all dark
Celestial Night Garden
Cobblestone Alley Night
Galactic Starlight Veil
Midnight Celestial Bloom
Midnight Cherry Blossom
Midnight Horizon Gleam