Back to palettes

Palette

Tranquil Moss Path

A soothing collection of greens and greys found along a quiet, moss-covered woodland path.

earthcalm5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tranquil Moss 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 Tranquil Moss Path.

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

Data visualization

#DAE8DC#B3CBA8#8AA683#61805D#3B5C3A

Palette guide

How to use Tranquil Moss Path

Overview

The Tranquil Moss Path palette offers a soothing and earthy collection of greens, ranging from the deep #3B5C3A to the very light #DAE8DC, including #61805D, #8AA683, and #B3CBA8. This palette perfectly embodies the calm and natural beauty of a moss-covered woodland, making it ideal for designs that seek to convey organic elegance, sustainability, and peaceful harmony. Designers and developers can leverage these versatile greens to create interfaces and branding that feel grounded, refreshing, and genuinely connected to nature, ensuring a cohesive and tranquil visual experience across various applications.

Best used for

  • Eco-friendly and sustainable product branding
  • Gardening, landscaping, and outdoor living websites
  • Natural food and organic product packaging
  • Environmental conservation organization materials
  • Wellness and mindfulness apps with a nature theme
  • Rustic or botanical-themed interior design

Suggested color roles

primary

Utilize #3B5C3A as the dominant color for strong headers, navigation, or foundational brand elements. Its deep green provides a stable, earthy presence.

secondary

Employ #61805D for supportive content, subheadings, or larger blocks of color. It offers a softer depth, maintaining the natural feel.

accent

Apply #8AA683 or #B3CBA8 for subtle accents, interactive elements, or graphic details. These lighter greens add freshness without being overly bright.

background

Designate #DAE8DC as the main background color. Its very light, almost off-white quality provides an excellent canvas for darker text.

text

For optimal readability on light backgrounds like #DAE8DC, use #3B5C3A or #61805D. For light text on darker backgrounds, #DAE8DC or a crisp white provides clear contrast.

Accessibility notes

  • Ensure sufficient contrast between #3B5C3A or #61805D text and lighter backgrounds like #B3CBA8 or #DAE8DC.
  • Avoid pairing #DAE8DC text directly with #B3CBA8 background without checking WCAG AA contrast ratios.
  • When using #DAE8DC for critical information text, ensure it is placed on sufficiently dark backgrounds like #3B5C3A.
  • For body text, prioritize the darkest colors on the lightest backgrounds to maximize legibility.

Recommended combinations

Deep Forest Floor

Classic contrast for branding: deep green text on a light background, with a natural mid-tone accent.

#3B5C3A · #DAE8DC · #8AA683

Mossy Gradient

Ideal for soft background gradients, overlays, or natural illustrations, creating a serene, organic flow.

#61805D · #B3CBA8 · #DAE8DC

Path Highlights

Use the lighter greens for UI elements or cards, grounded by the darkest green for clear headings or icons.

#8AA683 · #B3CBA8 · #3B5C3A

CSS variables

:root {
  --tranquil-moss-path-1: #DAE8DC;
  --tranquil-moss-path-2: #B3CBA8;
  --tranquil-moss-path-3: #8AA683;
  --tranquil-moss-path-4: #61805D;
  --tranquil-moss-path-5: #3B5C3A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tranquil-moss-path": {
        1: "#DAE8DC",
        2: "#B3CBA8",
        3: "#8AA683",
        4: "#61805D",
        5: "#3B5C3A",
      }
    }
  }
}

Related searches

calm green color paletteearthy web design colorsnatural brand identity greensmossy ui themeforest inspired color scheme

Palette colors

Hex values

Color 1#DAE8DC
·
Color 2#B3CBA8
·
Color 3#8AA683
·
Color 4#61805D
·
Color 5#3B5C3A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
3.5:1AA18
6:1AA
2
1.4:1Fail
1.5:1Fail
2.5:1Fail
4.3:1AA18
3
2.1:1Fail
1.5:1Fail
1.7:1Fail
2.8:1Fail
4
3.5:1AA18
2.5:1Fail
1.7:1Fail
1.7:1Fail
5
6:1AA
4.3:1AA18
2.8:1Fail
1.7:1Fail

Similar palettes

More like Tranquil Moss Path

View all earth
Ancient Moss Whisper
Emerald Moss Glade
Forest Floor Moss
Forest Moss Carpet
Rainy Forest Path
Ancient Forest Hearth