Palette

Forest Floor Canopy

Captures the rich, earthy tones of fallen autumn leaves rustling on the 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 Canopy 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 Canopy.

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

Data visualization

#A84E1A#D17F40#E0A068#4D250D#7F3C16

Palette guide

How to use Forest Floor Canopy

Overview

The Forest Floor Canopy palette beautifully captures the rich, earthy tones of fallen autumn leaves, evoking the warmth and depth of a seasonal woodland. Dominated by hues like the vibrant #A84E1A and the softer #D17F40, it creates a welcoming and natural feel. The very dark brown #4D250D provides a strong, grounding contrast, while #7F3C16 adds a subtle reddish-brown richness. The lightest shade, #E0A068, offers a gentle highlight. Designers and developers can utilize this palette to craft projects that exude coziness, rustic charm, and natural warmth, perfect for seasonal campaigns or brands with an earthy, authentic appeal.

Best used for

Autumn seasonal campaigns
Rustic home decor branding
Craft brewery or coffee shop websites
Thanksgiving event invitations
Outdoor apparel and gear
Historical or heritage-themed projects

Suggested color roles

primary

#A84E1A - A warm, inviting burnt orange, ideal for main calls to action, prominent headers, or primary brand elements.

secondary

#7F3C16 - A deep, reddish-brown, excellent for complementary sections, footers, or strong visual anchors.

accent

#D17F40 - Use this medium orange for highlights, interactive elements, or to draw attention to key information with warmth.

background

#E0A068 - A soft, light orange-peach, providing a warm and inviting canvas for darker text or imagery.

text

#4D250D - Ensures strong readability on lighter backgrounds like #E0A068, suitable for body copy and prominent headings.

Accessibility notes

Ensure #4D250D text on #E0A068 background meets WCAG AA contrast for readability.
Avoid using #D17F40 for small text on #A84E1A as contrast may be insufficient.
For text on dark backgrounds like #4D250D, a very light cream or white will provide necessary contrast.
Consider providing a dark mode option for users who prefer less bright interfaces.

Recommended combinations

Autumn Depth

Creates a rich, deep autumnal feel, excellent for hero sections or sophisticated branding.

#4D250D · #7F3C16 · #A84E1A

Warm Path

A balanced and inviting combination for main content areas, offering warmth and readability.

#E0A068 · #D17F40 · #7F3C16

Leafy Highlight

Use for a vibrant, layered effect, perfect for calls to action or seasonal promotions.

#A84E1A · #D17F40 · #E0A068

CSS variables

:root {
  --forest-floor-canopy-1: #A84E1A;
  --forest-floor-canopy-2: #D17F40;
  --forest-floor-canopy-3: #E0A068;
  --forest-floor-canopy-4: #4D250D;
  --forest-floor-canopy-5: #7F3C16;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-floor-canopy": {
        1: "#A84E1A",
        2: "#D17F40",
        3: "#E0A068",
        4: "#4D250D",
        5: "#7F3C16",
      }
    }
  }
}

Hex values

Color 1#A84E1A

Color 2#D17F40

Color 3#E0A068

Color 4#4D250D

Color 5#7F3C16

Accessibility

Contrast checker

1.8:1Fail

2.5:1Fail

2.4:1Fail

1.5:1Fail

1.8:1Fail

1.4:1Fail

4.3:1AA18

2.7:1Fail

2.5:1Fail

1.4:1Fail

5.9:1AA

3.7:1AA18

2.4:1Fail

4.3:1AA18

5.9:1AA

1.6:1Fail

1.5:1Fail

2.7:1Fail

3.7:1AA18

1.6:1Fail

Similar palettes

More like Forest Floor Canopy