Back to palettes

Palette

Dusky Woodland Trail

Subdued greens and earthy browns evoke a tranquil walk through an ancient, mist-shrouded woodland path.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dusky Woodland Trail 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 Dusky Woodland Trail.

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

Data visualization

#4F5A4D#7F7F67#A0A08D#C4B99D#DCD2BB

Palette guide

How to use Dusky Woodland Trail

Overview

The Dusky Woodland Trail palette features subdued greens and earthy browns, evoking a tranquil walk through an ancient, mist-shrouded woodland path. With hues like #4F5A4D, #7F7F67, and the light #DCD2BB, this collection is perfect for designs that require a natural, calm, and rustic feel. Designers and developers can leverage these harmonious tones to create nature-inspired branding, eco-friendly product packaging, or serene digital interfaces. The palette's gentle progression of colors creates a grounded and inviting visual experience.

Best used for

  • Nature-inspired branding
  • Eco-friendly product packaging
  • Outdoor adventure websites
  • Rustic interior design
  • Serene digital art
  • Autumnal themes and decor

Suggested color roles

primary

#7F7F67 serves as a muted olive, an earthy core ideal for main content areas or headers.

secondary

#4F5A4D is the deepest green-gray, providing grounding for strong anchors or shadows.

accent

#A0A08D offers a lighter, subtle highlight, perfect for delicate accents or secondary information.

background

#DCD2BB is the lightest shade, creating a natural and airy base for content.

text

For readability on lighter backgrounds, use #4F5A4D or a dark charcoal. For critical text, a dark brown is recommended.

Accessibility notes

  • For text on #DCD2BB, use #4F5A4D to ensure sufficient contrast for optimal readability.
  • The contrast between #C4B99D and #DCD2BB is low; avoid using these for small or critical text elements.
  • Ensure interactive elements are clearly distinguishable from their backgrounds with clear focus states.
  • Consider using a dark brown or black for body text on the lightest shades for optimal legibility, especially for users with visual impairments.

Recommended combinations

Forest Mist

Creates light, airy tones for gentle gradients or subtle background textures, evoking mist.

#DCD2BB · #C4B99D · #A0A08D

Deep Roots

Combines grounding dark green with a soft, natural highlight for depth and contrast.

#4F5A4D · #7F7F67 · #DCD2BB

Trail Hues

Offers balanced mid-tones reflecting natural elements for harmonious content blocks.

#A0A08D · #7F7F67 · #C4B99D

CSS variables

:root {
  --dusky-woodland-trail-1: #4F5A4D;
  --dusky-woodland-trail-2: #7F7F67;
  --dusky-woodland-trail-3: #A0A08D;
  --dusky-woodland-trail-4: #C4B99D;
  --dusky-woodland-trail-5: #DCD2BB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dusky-woodland-trail": {
        1: "#4F5A4D",
        2: "#7F7F67",
        3: "#A0A08D",
        4: "#C4B99D",
        5: "#DCD2BB",
      }
    }
  }
}

Related searches

earthy green palettemuted woodland colorsnatural serene schemerustic forest designtranquil nature tones

Palette colors

Hex values

Color 1#4F5A4D
·
Color 2#7F7F67
·
Color 3#A0A08D
·
Color 4#C4B99D
·
Color 5#DCD2BB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
2.7:1Fail
3.7:1AA18
4.8:1AA
2
1.8:1Fail
1.5:1Fail
2.1:1Fail
2.7:1Fail
3
2.7:1Fail
1.5:1Fail
1.4:1Fail
1.8:1Fail
4
3.7:1AA18
2.1:1Fail
1.4:1Fail
1.3:1Fail
5
4.8:1AA
2.7:1Fail
1.8:1Fail
1.3:1Fail

Similar palettes

More like Dusky Woodland Trail

View all earth