Palette

Enchanted Moss Garden

A serene palette echoing a secluded, ancient garden covered in soft, verdant moss and dappled sunlight.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A4739#646E56#88826D#BDAA77#DFDCD2

Palette guide

How to use Enchanted Moss Garden

Overview

The Enchanted Moss Garden palette is a serene collection echoing a secluded, ancient garden covered in soft, verdant moss and dappled sunlight. Featuring deep, earthy greens like #3A4739 and warm, sun-kissed neutrals such as #BDAA77 and #DFDCD2, this palette is perfect for designers seeking a natural, organic, and subtle aesthetic. Developers will find these hex codes ideal for creating calming interfaces, sophisticated eco-friendly branding, and inviting digital spaces. The harmonious blend of mossy greens and soft, warm greys ensures visual tranquility and a touch of understated elegance.

Best used for

Organic food and lifestyle brand identities
Gardening and botanical website designs
Wellness and mindfulness app interfaces
Natural skincare product packaging
Interior design for rustic or bohemian spaces
Photography portfolios with an earthy theme

Suggested color roles

primary

#3A4739 - A deep, rich moss green, excellent for dominant sections, headers, or grounding graphical elements, establishing a strong, natural foundation.

secondary

#646E56 - A softer, muted olive green. Ideal for sub-headings, secondary buttons, or data visualizations, adding gentle depth and organic texture.

accent

#BDAA77 - A warm, inviting golden-tan, reminiscent of dappled sunlight. Perfect for calls-to-action, important highlights, or decorative elements that need a subtle, natural pop.

background

#DFDCD2 - A very light, warm off-white, providing a clean, open, and serene canvas that feels natural and inviting.

text

#3A4739 - This deep moss green offers excellent readability against lighter backgrounds, seamlessly integrating with the palette's natural aesthetic.

Accessibility notes

Ensure #3A4739 text on #DFDCD2 background meets WCAG AAA contrast standards for optimal readability.
Avoid using lighter shades like #88826D or #BDAA77 for small text on #DFDCD2 as the contrast will be insufficient.
For interactive elements, always verify the contrast of the accent color against its background.
Consider using a pure black or dark charcoal for critical text if the palette's darkest green doesn't meet the highest accessibility requirements for very small font sizes.

Recommended combinations

Mossy Undergrowth

Deep #3A4739 for a strong footer, #646E56 for section headers, and #DFDCD2 for main content background, balancing depth and light.

#3A4739 · #646E56 · #DFDCD2

Sun-Dappled Path

Layered elements with #646E56 as base, #88826D for cards, and #BDAA77 for warm highlights or decorative patterns.

#646E56 · #88826D · #BDAA77

Earthy Serenity

A light background with #DFDCD2, dark text with #3A4739, and a warm, inviting accent with #BDAA77 for calls to action.

#DFDCD2 · #3A4739 · #BDAA77

CSS variables

:root {
  --enchanted-moss-garden-1: #3A4739;
  --enchanted-moss-garden-2: #646E56;
  --enchanted-moss-garden-3: #88826D;
  --enchanted-moss-garden-4: #BDAA77;
  --enchanted-moss-garden-5: #DFDCD2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "enchanted-moss-garden": {
        1: "#3A4739",
        2: "#646E56",
        3: "#88826D",
        4: "#BDAA77",
        5: "#DFDCD2",
      }
    }
  }
}

Hex values

Color 1#3A4739

Color 2#646E56

Color 3#88826D

Color 4#BDAA77

Color 5#DFDCD2

Accessibility

Contrast checker

1.8:1Fail

2.6:1Fail

4.3:1AA18

7.2:1AAA

1.8:1Fail

1.4:1Fail

2.3:1Fail

3.9:1AA18

2.6:1Fail

1.4:1Fail

1.7:1Fail

2.8:1Fail

4.3:1AA18

2.3:1Fail

1.7:1Fail

7.2:1AAA

3.9:1AA18

2.8:1Fail

1.7:1Fail

Similar palettes

More like Enchanted Moss Garden

Enchanted Moss Garden

See it in context.

Ready when you are.

Built with Enchanted Moss Garden.

How to use Enchanted Moss Garden

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Mossy Undergrowth

Sun-Dappled Path

Earthy Serenity

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Enchanted Moss Garden