Palette

Autumn Leaf Canopy

Rich, earthy tones mirroring the vibrant array of leaves in a forest during the peak of autumn.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Autumn Leaf 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 Autumn Leaf Canopy.

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

Data visualization

#7B3F00#A52A2A#D2691E#FF8C00#FFD700

Palette guide

How to use Autumn Leaf Canopy

Overview

The Autumn Leaf Canopy palette features rich, earthy tones mirroring the vibrant array of leaves in a forest during the peak of autumn. This natural and warm collection offers designers and developers a dynamic spectrum of browns, reds, oranges, and golds, perfect for creating lively and grounded experiences. With deep #7B3F00, bold #A52A2A, vibrant #D2691E, luminous #FF8C00, and bright #FFD700, this palette provides versatility. Its energetic progression from deep earth to brilliant gold creates a captivating visual flow, ideal for projects that aim to convey seasonal vibrancy, natural beauty, or the rich abundance of fall, perfect for outdoor or festive themes.

Best used for

fall festival branding
nature-themed websites
seasonal product packaging
outdoor event promotions
autumn photography showcases
educational materials on nature

Suggested color roles

primary

#7B3F00 - A deep, robust brown, excellent for foundational elements, large headers, or backgrounds that provide strong stability and earthiness.

secondary

#A52A2A - A bold, rich red-brown, perfect for supporting content blocks, navigation, or as a powerful contrasting element.

accent

#FF8C00 - A vibrant, luminous dark orange, ideal for calls to action, important highlights, or decorative elements that demand attention.

background

#FFD700 - A bright, radiant gold, provides an energetic and warm backdrop, allowing darker colors to pop and conveying cheerfulness.

text

#7B3F00 - For primary body text on light backgrounds like #FFD700, offering excellent readability and maintaining the palette's deep, natural tone.

Accessibility notes

Ensure #7B3F00 or #A52A2A text on #FFD700 backgrounds meets WCAG AA contrast standards.
Avoid using #D2691E or #FF8C00 for small text directly on #FFD700 due to potential low contrast.
For critical information, use the darkest colors (#7B3F00, #A52A2A) for text against the lightest background (#FFD700).
White or a very light cream provides excellent contrast for text on #7B3F00, #A52A2A, and #D2691E.

Recommended combinations

Vibrant Forest

Creates a striking, lively contrast, perfect for bold branding or prominent calls to action.

#7B3F00 · #A52A2A · #FFD700

Leaf Glow

Ideal for a vibrant, energetic gradient, suitable for hero sections or dynamic visual elements.

#D2691E · #FF8C00 · #FFD700

Earthy Pop

Provides a clean, readable layout with a strong dark text option and a bright, warm accent.

#FFD700 · #7B3F00 · #D2691E

CSS variables

:root {
  --autumn-leaf-canopy-1: #7B3F00;
  --autumn-leaf-canopy-2: #A52A2A;
  --autumn-leaf-canopy-3: #D2691E;
  --autumn-leaf-canopy-4: #FF8C00;
  --autumn-leaf-canopy-5: #FFD700;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "autumn-leaf-canopy": {
        1: "#7B3F00",
        2: "#A52A2A",
        3: "#D2691E",
        4: "#FF8C00",
        5: "#FFD700",
      }
    }
  }
}

Hex values

Color 1#7B3F00

Color 2#A52A2A

Color 3#D2691E

Color 4#FF8C00

Color 5#FFD700

Accessibility

Contrast checker

1.2:1Fail

2.3:1Fail

3.5:1AA18

5.9:1AA

1.2:1Fail

1.9:1Fail

3:1AA18

5.1:1AA

2.3:1Fail

1.9:1Fail

1.6:1Fail

2.6:1Fail

3.5:1AA18

3:1AA18

1.6:1Fail

1.7:1Fail

5.9:1AA

5.1:1AA

2.6:1Fail

1.7:1Fail

Similar palettes

More like Autumn Leaf Canopy