Back to palettes

Palette

Deep Wood Ferns

Explores the rich, shadowed depths of a mature forest, filled with lush ferns and ancient trees.

darknatural5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Wood Ferns 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 Deep Wood Ferns.

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

Data visualization

#228B22#3CB371#6B8E23#556B2F#006400

Palette guide

How to use Deep Wood Ferns

Overview

The Deep Wood Ferns palette explores the rich, shadowed depths of a mature forest, brimming with lush ferns and ancient trees. It features a vibrant array of greens, from the classic forest green #228B22 and the refreshing #3CB371 to the earthy olive #6B8E23 and the deep, muted #556B2F, grounded by the profound #006400. This natural and tranquil collection is perfect for designers seeking to evoke organic beauty, growth, and a sense of peaceful immersion. Developers can utilize these hues for eco-friendly branding, nature-themed applications, or any project that benefits from a grounded, harmonious, and deeply natural aesthetic, bringing the forest indoors.

Best used for

  • Eco-friendly product packaging
  • Nature conservation websites
  • Gardening or botanical apps
  • Outdoor adventure branding
  • Sustainable living blogs
  • Relaxation and meditation app interfaces

Suggested color roles

primary

#006400 - The deepest, most grounding green, ideal for foundational backgrounds or dominant brand elements, conveying stability.

secondary

#228B22 - A classic forest green, perfect for content sections, headers, or secondary navigational components.

accent

#3CB371 - A vibrant, refreshing green, excellent for interactive elements, calls to action, or fresh graphical accents.

background

#556B2F - A deep, muted olive green that can serve as a sophisticated background for specific content blocks or textural elements.

text

#3CB371 - Recommended for primary text against the darkest shades like #006400 or #556B2F to ensure good readability. Alternatively, a light cream or white for higher contrast.

Accessibility notes

  • Text in #3CB371 against #006400 or #556B2F will provide good contrast, generally meeting WCAG AA standards.
  • Avoid using #6B8E23 for text on #556B2F, as contrast may be insufficient for smaller font sizes.
  • For critical information, especially on mid-tones like #228B22, consider using pure white or a very light cream for maximum legibility.
  • Ensure interactive elements, particularly those using #3CB371, are clearly distinguishable from adjacent greens.

Recommended combinations

Forest Layers

To create deep, natural background gradients or for subtle sectioning in nature-themed designs.

#006400 · #556B2F · #228B22

Fern Highlight

Highlighting key information or interactive components, with #3CB371 providing a fresh focal point.

#228B22 · #3CB371 · #6B8E23

Woodland Earth

Effective for organic branding or data visualization, using the green progression for hierarchy or distinction.

#006400 · #6B8E23 · #556B2F

CSS variables

:root {
  --deep-wood-ferns-1: #228B22;
  --deep-wood-ferns-2: #3CB371;
  --deep-wood-ferns-3: #6B8E23;
  --deep-wood-ferns-4: #556B2F;
  --deep-wood-ferns-5: #006400;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-wood-ferns": {
        1: "#228B22",
        2: "#3CB371",
        3: "#6B8E23",
        4: "#556B2F",
        5: "#006400",
      }
    }
  }
}

Related searches

deep forest green palettewoodland fern colorsnatural green brandingtranquil forest aestheticearthy green UI

Palette colors

Hex values

Color 1#228B22
·
Color 2#3CB371
·
Color 3#6B8E23
·
Color 4#556B2F
·
Color 5#006400
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
1.2:1Fail
1.4:1Fail
1.7:1Fail
2
1.6:1Fail
1.4:1Fail
2.2:1Fail
2.8:1Fail
3
1.2:1Fail
1.4:1Fail
1.6:1Fail
2:1Fail
4
1.4:1Fail
2.2:1Fail
1.6:1Fail
1.3:1Fail
5
1.7:1Fail
2.8:1Fail
2:1Fail
1.3:1Fail

Similar palettes

More like Deep Wood Ferns

View all dark