Palette

Sylvan Path Wander

A tranquil journey through ancient woods, capturing the subtle greens and browns of a sun-dappled path.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sylvan Path Wander 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 Sylvan Path Wander.

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

Data visualization

#5F7363#A5B495#D2D4BD#8E7A6B#4C3F35

Palette guide

How to use Sylvan Path Wander

Overview

The Sylvan Path Wander palette invites a tranquil journey through ancient woods, capturing the subtle greens and browns of a sun-dappled path. Featuring a muted green #5F7363, a softer sage #A5B495, a delicate beige #D2D4BD, an earthy brown #8E7A6B, and a deep, grounding #4C3F35, this collection is genuinely useful for designers and developers seeking a natural, serene, and understated aesthetic. These colors are excellent for creating environments that feel peaceful, organic, and timeless. It's a versatile palette perfect for branding natural skincare, designing cozy digital interfaces, or illustrating rustic scenes, providing a sense of quiet contemplation and authentic connection to the earth.

Best used for

Heritage and artisanal brand identities
Natural skincare and wellness product packaging
Cozy and minimalist interior design concepts
Landscape design and outdoor living websites
Organic food and farm-to-table branding
Nature photography portfolios

Suggested color roles

primary

Utilize #5F7363 as a muted, sophisticated primary color for headers, main content blocks, or brand logos, conveying natural elegance.

secondary

Employ #8E7A6B for secondary elements, navigation, or as a warm, grounding complementary hue, adding depth and authenticity.

accent

Introduce #4C3F35 as a deep, rich accent for calls to action, important details, or to add strong contrast and a sense of gravitas.

background

The delicate #D2D4BD makes an excellent soft, neutral background, allowing other organic hues to breathe and ensuring clear readability.

text

A dark charcoal or the deep #4C3F35 offers optimal readability against lighter backgrounds, maintaining the palette's earthy, refined mood.

Accessibility notes

Carefully check contrast ratios for text on mid-tone colors like #A5B495 and #8E7A6B, especially with lighter text.
Prioritize using darker shades such as #4C3F35 for critical text elements to ensure WCAG AA or AAA compliance.
Avoid light text on #5F7363 without sufficient contrast; a darker text color is generally recommended for readability.
Ensure interactive elements are clearly distinguishable, perhaps using #4C3F35 for outlines or hover states.

Recommended combinations

Grounded Earth

Excellent for establishing a strong, natural foundation, ideal for footers, robust branding, or earthy content blocks.

#4C3F35 · #8E7A6B · #D2D4BD

Muted Canopy

Perfect for creating layered, subtle designs, such as illustrations of natural textures, light content cards, or serene backgrounds.

#5F7363 · #A5B495 · #D2D4BD

Path & Shadow

Use for clear visual hierarchy, combining depth with lightness and a muted green accent for navigation or key informational sections.

#4C3F35 · #D2D4BD · #5F7363

CSS variables

:root {
  --sylvan-path-wander-1: #5F7363;
  --sylvan-path-wander-2: #A5B495;
  --sylvan-path-wander-3: #D2D4BD;
  --sylvan-path-wander-4: #8E7A6B;
  --sylvan-path-wander-5: #4C3F35;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sylvan-path-wander": {
        1: "#5F7363",
        2: "#A5B495",
        3: "#D2D4BD",
        4: "#8E7A6B",
        5: "#4C3F35",
      }
    }
  }
}

Hex values

Color 1#5F7363

Color 2#A5B495

Color 3#D2D4BD

Color 4#8E7A6B

Color 5#4C3F35

Accessibility

Contrast checker

2.3:1Fail

3.4:1AA18

1.2:1Fail

2:1Fail

2.3:1Fail

1.5:1Fail

1.9:1Fail

4.6:1AA

3.4:1AA18

1.5:1Fail

2.7:1Fail

6.7:1AA

1.2:1Fail

1.9:1Fail

2.7:1Fail

2.5:1Fail

2:1Fail

4.6:1AA

6.7:1AA

2.5:1Fail

Similar palettes

More like Sylvan Path Wander

View all earth

Dusky Woodland Trail

Enchanted Forest Lumina

Forest Bark Comfort

Forest Canopy

Forest Canopy Echoes

Forest Canopy Whispers