Back to palettes

Palette

Moonlit Grove

Evokes the quiet, magical beauty of a moonlit grove with rich, natural greens and shadows.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#228B22#32CD32#6B8E23#8FBC8F#2E8B57

Palette guide

How to use Moonlit Grove

Overview

The Moonlit Grove palette evokes the quiet, magical beauty of a forest at night, illuminated by a gentle moon. This collection of rich, natural greens and earthy tones is perfect for designs that aim to convey organic warmth, enchantment, and a connection to nature. Featuring shades like the classic forest green #228B22, the vibrant #32CD32, and the muted #8FBC8F, it offers a versatile range for creating inviting visual experiences. Designers and developers can utilize this palette to craft user interfaces, branding, or digital art that feel grounded, fresh, and subtly magical, ensuring a cohesive and natural aesthetic across various applications.

Best used for

  • Nature-themed branding and packaging
  • Eco-friendly product websites
  • Outdoor recreation and adventure apps
  • Children's book illustrations
  • Fantasy game interfaces and environments
  • Sustainable living content platforms

Suggested color roles

primary

Use #228B22 as a strong, grounding forest green for main headings, large text blocks, or immersive backgrounds.

secondary

Apply #2E8B57 for supporting elements, subheadings, or to add a slightly different shade of green depth.

accent

Employ #32CD32 for vibrant highlights, interactive elements, or to draw attention to key features. #8FBC8F can offer a soft accent.

background

The muted #8FBC8F provides a light, natural background, while #228B22 can create a deep, immersive forest canvas.

text

For optimal readability on light backgrounds like #8FBC8F, use #228B22 or a near-black. On dark backgrounds, a crisp white works well.

Accessibility notes

  • Ensure sufficient contrast for text when using #6B8E23 on #8FBC8F, as they might be too close in value.
  • Text in #228B22 on #8FBC8F offers good readability.
  • Avoid using #32CD32 for small text on light backgrounds due to its vibrancy potentially causing eye strain.
  • Always test color combinations with accessibility checkers for WCAG compliance, especially for interactive elements.

Recommended combinations

Forest Depths

Ideal for a deep, natural theme with #228B22 as base, #6B8E23 for elements, and #8FBC8F for subtle highlights.

#228B22 · #6B8E23 · #8FBC8F

Vibrant Grove

Perfect for adding a lively touch, with #2E8B57 as base, #32CD32 for a pop of color, and #8FBC8F for balance.

#2E8B57 · #32CD32 · #8FBC8F

Earthy Blend

Excellent for gradients or layered elements, showcasing the rich, diverse shades of green in the palette.

#228B22 · #2E8B57 · #6B8E23

CSS variables

:root {
  --moonlit-grove-1: #228B22;
  --moonlit-grove-2: #32CD32;
  --moonlit-grove-3: #6B8E23;
  --moonlit-grove-4: #8FBC8F;
  --moonlit-grove-5: #2E8B57;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-grove": {
        1: "#228B22",
        2: "#32CD32",
        3: "#6B8E23",
        4: "#8FBC8F",
        5: "#2E8B57",
      }
    }
  }
}

Related searches

natural green color palettemoonlit forest colorsearthy tones designmagical grove themeoutdoor branding palette

Palette colors

Hex values

Color 1#228B22
·
Color 2#32CD32
·
Color 3#6B8E23
·
Color 4#8FBC8F
·
Color 5#2E8B57
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
1.2:1Fail
2:1Fail
1:1Fail
2
2.1:1Fail
1.8:1Fail
1:1Fail
2:1Fail
3
1.2:1Fail
1.8:1Fail
1.8:1Fail
1.1:1Fail
4
2:1Fail
1:1Fail
1.8:1Fail
2:1Fail
5
1:1Fail
2:1Fail
1.1:1Fail
2:1Fail

Similar palettes

More like Moonlit Grove

View all earth
Deep Forest Undergrowth
Enchanted Forest Canopy
Enchanted Forest Glow
Enchanted Forest Ring
Enchanted Glade Dew
Ancient Forest Hush