Back to palettes

Palette

Mossy Hollow Path

Invoking a tranquil walk through a damp, mossy forest hollow with deep, earthy greens.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mossy Hollow 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 Mossy Hollow Path.

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

Data visualization

#A2BEA2#6D8D6B#4A6E4B#2D4E2F#1F3B25

Palette guide

How to use Mossy Hollow Path

Overview

The "Mossy Hollow Path" palette offers a serene journey through deep, earthy greens, perfect for evoking nature's tranquility. Designers can leverage this gradient of lush tones, from the softest #A2BEA2 to the profound #1F3B25, to create calming and organic digital or physical spaces. Developers will find these hex codes, including the versatile #6D8D6B and grounding #2D4E2F, ideal for building interfaces that require a natural, muted aesthetic. This palette provides a cohesive visual narrative, lending itself to designs that prioritize comfort, authenticity, and a connection to the environment.

Best used for

  • Nature-themed websites and apps
  • Eco-friendly brand identities
  • Wellness and meditation platforms
  • Interior design mood boards
  • Packaging for organic products
  • Botanical illustration backgrounds

Suggested color roles

primary

Use #4A6E4B as a foundational color for large sections or main elements, offering a stable and natural presence.

secondary

#6D8D6B provides a slightly lighter, complementary tone, suitable for subheadings or secondary navigation.

accent

#A2BEA2 can be used sparingly for subtle highlights or interactive states, adding a gentle touch of brightness.

background

#1F3B25 offers a deep, rich backdrop that grounds the design, allowing lighter elements to stand out.

text

For dark backgrounds, use #A2BEA2 or a near-white. For lighter backgrounds, #2D4E2F or #1F3B25 provides excellent readability.

Accessibility notes

  • Ensure sufficient contrast between #1F3B25 text and #A2BEA2 background elements.
  • Avoid using #6D8D6B text on #4A6E4B backgrounds for critical information due to low contrast.
  • Test text readability of #A2BEA2 on any dark green background like #2D4E2F.
  • Use a tool to verify WCAG AA or AAA compliance for all text and interactive elements.

Recommended combinations

Forest Canopy

Ideal for a sophisticated, deep nature theme, using the lightest shade for highlights.

#1F3B25 · #4A6E4B · #A2BEA2

Verdant Path

Creates a balanced, earthy feel, suitable for content blocks with clear hierarchy.

#6D8D6B · #2D4E2F · #A2BEA2

Mossy Undergrowth

A darker, more contemplative combination for elegant headers or strong visual sections.

#4A6E4B · #1F3B25 · #6D8D6B

CSS variables

:root {
  --mossy-hollow-path-1: #A2BEA2;
  --mossy-hollow-path-2: #6D8D6B;
  --mossy-hollow-path-3: #4A6E4B;
  --mossy-hollow-path-4: #2D4E2F;
  --mossy-hollow-path-5: #1F3B25;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mossy-hollow-path": {
        1: "#A2BEA2",
        2: "#6D8D6B",
        3: "#4A6E4B",
        4: "#2D4E2F",
        5: "#1F3B25",
      }
    }
  }
}

Related searches

forest green color schemesearthy nature palettenatural green hex codestranquil moss colorsorganic design palette

Palette colors

Hex values

Color 1#A2BEA2
·
Color 2#6D8D6B
·
Color 3#4A6E4B
·
Color 4#2D4E2F
·
Color 5#1F3B25
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
2.9:1Fail
4.6:1AA
6.1:1AA
2
1.8:1Fail
1.6:1Fail
2.5:1Fail
3.3:1AA18
3
2.9:1Fail
1.6:1Fail
1.6:1Fail
2.1:1Fail
4
4.6:1AA
2.5:1Fail
1.6:1Fail
1.3:1Fail
5
6.1:1AA
3.3:1AA18
2.1:1Fail
1.3:1Fail

Similar palettes

More like Mossy Hollow Path

View all earth
Emerald Canopy Hush
Emerald Enclave Moss
Emerald Moss Canopy
Enchanted Forest Lumina
Forest Canopy Shade
Forest Fern Pathway