Palette

Forest Floor Ephemera

Delicate greens and muted earth tones capture the quiet, decaying beauty of a rich forest floor.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Forest Floor Ephemera 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 Forest Floor Ephemera.

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

Data visualization

#364B36#5B7A5B#8EA18E#B4C6B4#2A3D2A

Palette guide

How to use Forest Floor Ephemera

Overview

The Forest Floor Ephemera palette captures the delicate and quiet beauty of a shaded woodland, featuring muted greens and subtle earth tones. With deep, grounding shades like #2A3D2A and the slightly lighter #364B36, it sets a contemplative mood. Mid-tones such as #5B7A5B and #8EA18E bridge the gap to the soft, airy #B4C6B4, which reflects the gentle decay and renewal found on a forest floor. This palette is perfect for designers and developers seeking to create serene, thoughtful, and understated digital experiences, branding, or art that emphasizes natural elegance and a sense of tranquility. It avoids harsh contrasts for a harmonious feel.

Best used for

Art and photography portfolios
Sustainable lifestyle brand identities
Botanical illustration and design
Mindfulness or meditation app interfaces
Documentary film graphics
Serene home decor product lines

Suggested color roles

primary

Use #2A3D2A as the foundational color for strong headings, navigation, or deep background elements.

secondary

Apply #364B36 for supporting text, subheadings, or larger UI components that need a rich, yet subdued presence.

accent

Introduce #8EA18E for subtle highlights, decorative patterns, or gentle interactive states without overpowering the design.

background

Utilize #B4C6B4 for light, breathable backgrounds, providing a soft canvas that enhances readability.

text

Opt for #2A3D2A or a dark charcoal for primary text, ensuring clarity and contrast against lighter palette shades.

Accessibility notes

Ensure #2A3D2A provides high contrast when used for text on #B4C6B4 to meet readability standards.
Use #5B7A5B for secondary text only if it has sufficient contrast against its background.
Avoid using #8EA18E for small text sizes, as its muted nature can reduce legibility.
Check all text and background color pairings against WCAG AA guidelines for optimal accessibility.

Recommended combinations

Deep Tranquility

Ideal for primary branding, clear text on light backgrounds, and balanced content blocks.

#2A3D2A · #B4C6B4 · #5B7A5B

Muted Layers

Excellent for creating depth in illustrations, subtle UI elements, or layered graphic design.

#364B36 · #8EA18E · #5B7A5B

Soft Accents

Use for callouts, decorative borders, or gentle highlights that complement the overall serene mood.

#2A3D2A · #8EA18E · #B4C6B4

CSS variables

:root {
  --forest-floor-ephemera-1: #364B36;
  --forest-floor-ephemera-2: #5B7A5B;
  --forest-floor-ephemera-3: #8EA18E;
  --forest-floor-ephemera-4: #B4C6B4;
  --forest-floor-ephemera-5: #2A3D2A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-floor-ephemera": {
        1: "#364B36",
        2: "#5B7A5B",
        3: "#8EA18E",
        4: "#B4C6B4",
        5: "#2A3D2A",
      }
    }
  }
}

Hex values

Color 1#364B36

Color 2#5B7A5B

Color 3#8EA18E

Color 4#B4C6B4

Color 5#2A3D2A

Accessibility

Contrast checker

2:1Fail

3.4:1AA18

5.3:1AA

1.2:1Fail

2:1Fail

1.7:1Fail

2.7:1Fail

2.4:1Fail

3.4:1AA18

1.7:1Fail

1.5:1Fail

4.2:1AA18

5.3:1AA

2.7:1Fail

1.5:1Fail

6.5:1AA

1.2:1Fail

2.4:1Fail

4.2:1AA18

6.5:1AA

Similar palettes

More like Forest Floor Ephemera

Enchanted Forest Floor

Forest Floor Echoes

Forest Fungi