Palette

Elderwood Depths

A tranquil journey into the heart of an ancient forest, where shadows play amongst verdant leaves.

darknatural5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Elderwood Depths 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 Elderwood Depths.

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

Data visualization

#2A362D#4E6056#8B9A8F#A5B8A9#3F5146

Palette guide

How to use Elderwood Depths

Overview

The "Elderwood Depths" palette offers a tranquil journey into an ancient forest, characterized by deep, muted greens and earthy grays. Anchored by the profound dark green of #2A362D and a slightly lighter #3F5146, it ascends through the serene mid-tones of #4E6056 and #8B9A8F. The lightest shade, #A5B8A9, brings a touch of misty daylight. This palette is ideal for designers aiming to evoke nature, serenity, and a grounded, sophisticated atmosphere. Developers can leverage these harmonious colors to create calm, organic, and visually comforting user interfaces for eco-friendly or wellness-focused applications.

Best used for

Eco-friendly product branding or websites
Nature photography portfolios
Wellness, meditation, or mindfulness apps
Sustainable living blogs or educational platforms
Outdoor adventure or conservation organizations
Minimalist interior design concepts

Suggested color roles

primary

#2A362D (Deep Forest Green) - Excellent for main headings, navigation, or large background areas to establish a grounded, natural feel.

secondary

#3F5146 (Dark Olive) - Use for subheadings, secondary buttons, or content blocks, offering a slightly softer depth.

accent

#8B9A8F (Misty Green) - A subtle accent for icons, dividers, or highlight states, providing a gentle contrast.

background

#A5B8A9 (Pale Sage) - Provides a light, airy base, perfect for main content areas, allowing darker elements to breathe.

text

#2A362D (Deep Forest Green) - Offers superb readability on lighter backgrounds like #A5B8A9, maintaining the natural aesthetic. Pure white text can be used on darker backgrounds.

Accessibility notes

Ensure #2A362D text on #A5B8A9 background meets WCAG contrast standards.
Avoid using #8B9A8F text on #A5B8A9 background due to insufficient contrast.
For interactive elements, use the darker greens like #2A362D or #3F5146 to ensure clear visibility.
When using darker backgrounds, ensure text is light enough, e.g., #A5B8A9 or pure white, for optimal readability.

Recommended combinations

Forest Path

A light base with deep green text and a mid-tone for secondary elements, creating depth.

#A5B8A9 · #2A362D · #4E6056

Misty Layers

Ideal for subtle gradients, layered UI components, or depicting natural textures.

#8B9A8F · #4E6056 · #3F5146

Deep Roots

A strong, dark foundation with a lighter accent, suitable for footers or sophisticated branding.

#2A362D · #3F5146 · #A5B8A9

CSS variables

:root {
  --elderwood-depths-1: #2A362D;
  --elderwood-depths-2: #4E6056;
  --elderwood-depths-3: #8B9A8F;
  --elderwood-depths-4: #A5B8A9;
  --elderwood-depths-5: #3F5146;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "elderwood-depths": {
        1: "#2A362D",
        2: "#4E6056",
        3: "#8B9A8F",
        4: "#A5B8A9",
        5: "#3F5146",
      }
    }
  }
}

Hex values

Color 1#2A362D

Color 2#4E6056

Color 3#8B9A8F

Color 4#A5B8A9

Color 5#3F5146

Accessibility

Contrast checker

1.9:1Fail

4.3:1AA18

6:1AA

1.5:1Fail

1.9:1Fail

2.3:1Fail

3.2:1AA18

1.3:1Fail

4.3:1AA18

2.3:1Fail

1.4:1Fail

2.9:1Fail

6:1AA

3.2:1AA18

1.4:1Fail

4:1AA18

1.5:1Fail

1.3:1Fail

2.9:1Fail

4:1AA18

Similar palettes

More like Elderwood Depths

View all dark

Deep Forest Seclusion

Enchanted Woodland Glade

Ancient Canopy Soul

Deep Wood Ferns

Emerald Canopy Floor

Enchanted Deep Forest