Back to palettes

Palette

Fairy Ring Moss

Deep, lush greens capture the enchanting allure of a hidden forest floor, where ancient moss creates a mystical carpet.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Fairy Ring Moss 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 Fairy Ring Moss.

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

Data visualization

#AAD49E#7BBA82#5A9E66#3D7B49#2B5E3C

Palette guide

How to use Fairy Ring Moss

Overview

The "Fairy Ring Moss" palette evokes the serene and lush depths of an ancient forest, offering a range of harmonious green tones perfect for natural and organic designs. From the softest light green, #AAD49E, to the rich, deep forest green of #2B5E3C, this collection provides excellent versatility for creating calming and refreshing user experiences. Designers can leverage these shades to build environments that feel grounded and authentic, while developers will appreciate the cohesive feel for interfaces requiring a touch of nature. The mid-tones like #7BBA82 and #5A9E66 provide excellent flexibility for primary elements, ensuring a balanced visual hierarchy. This palette is ideal for projects aiming for an eco-friendly, tranquil, or revitalizing aesthetic.

Best used for

  • Eco-friendly brand identity and packaging
  • Nature-themed websites and mobile applications
  • Wellness, spa, or mindfulness product designs
  • Outdoor recreation and adventure marketing materials
  • Sustainable living blogs and educational content
  • Botanical illustrations and garden design resources

Suggested color roles

primary

#5A9E66 - A balanced, versatile forest green, perfect for main headings, call-to-action buttons, or significant UI elements. It provides a stable and natural feel.

secondary

#3D7B49 - A deeper, more grounding green, suitable for subheadings, active states, or supporting graphic elements. It adds depth without overpowering.

accent

#AAD49E - The lightest green, ideal for subtle highlights, interactive elements when hovered, or to bring a touch of freshness. Use sparingly to maintain impact.

background

#AAD49E - A very light, airy green that provides a gentle, natural backdrop for content. It's soft on the eyes and allows darker text to stand out.

text

#2B5E3C - This deep, dark green offers excellent readability against lighter backgrounds like #AAD49E, providing a sophisticated alternative to pure black for body text and important labels.

Accessibility notes

  • Ensure sufficient contrast between text and background colors; for example, #2B5E3C text on #AAD49E background meets WCAG AA standards.
  • Avoid using #AAD49E for small text on very light backgrounds as contrast may be insufficient for readability for some users.
  • When using #7BBA82 or #5A9E66 as a background, pair with #2B5E3C or a near-black for optimal text contrast.
  • Differentiate interactive elements (buttons, links) using distinct shades or states rather than relying solely on subtle green variations.

Recommended combinations

Fresh Growth

Ideal for light, airy designs, wellness apps, or content focused on spring, new beginnings, and gentle nature themes.

#AAD49E · #7BBA82 · #5A9E66

Forest Depths

Excellent for conveying stability, luxury, or a rich, earthy feel in branding, packaging, or sophisticated websites with a natural bent.

#5A9E66 · #3D7B49 · #2B5E3C

Lush Canopy

Creates a dynamic yet harmonious look, suitable for eco-conscious campaigns or robust digital interfaces needing clear hierarchy and natural depth.

#AAD49E · #3D7B49 · #2B5E3C

CSS variables

:root {
  --fairy-ring-moss-1: #AAD49E;
  --fairy-ring-moss-2: #7BBA82;
  --fairy-ring-moss-3: #5A9E66;
  --fairy-ring-moss-4: #3D7B49;
  --fairy-ring-moss-5: #2B5E3C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fairy-ring-moss": {
        1: "#AAD49E",
        2: "#7BBA82",
        3: "#5A9E66",
        4: "#3D7B49",
        5: "#2B5E3C",
      }
    }
  }
}

Related searches

green color palettemoss green schemenatural color designforest inspired colorsearthy green hex codes

Palette colors

Hex values

Color 1#AAD49E
·
Color 2#7BBA82
·
Color 3#5A9E66
·
Color 4#3D7B49
·
Color 5#2B5E3C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.9:1Fail
3.1:1AA18
4.6:1AA
2
1.4:1Fail
1.4:1Fail
2.2:1Fail
3.3:1AA18
3
1.9:1Fail
1.4:1Fail
1.6:1Fail
2.4:1Fail
4
3.1:1AA18
2.2:1Fail
1.6:1Fail
1.5:1Fail
5
4.6:1AA
3.3:1AA18
2.4:1Fail
1.5:1Fail

Similar palettes

More like Fairy Ring Moss

View all earth
Emerald Forest Canopy
Enchanted Forest Canopy
Enchanted Forest Canopy
Enchanted Forest Ring
Forest Fern Canopy
Forest Fern Canopy