Palette

Maple Leaf Canopy

A rich tapestry of warm reds, oranges, and golds, celebrating the glorious hues of autumn foliage.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B0000#BF360C#FFA000#6D4C41#4E342E

Palette guide

How to use Maple Leaf Canopy

Overview

The Maple Leaf Canopy palette is a rich tapestry of warm reds, oranges, and golds, celebrating the glorious hues of autumn foliage. This collection offers a deep, sophisticated feel, featuring a strong red (#8B0000) and a vibrant red-orange (#BF360C) that capture the essence of peak fall. A bright, inviting orange (#FFA000) adds a lively accent, while grounded browns (#6D4C41 and #4E342E) provide an earthy, comforting balance. Designers and developers will find this palette excellent for creating designs that evoke coziness, natural beauty, and timeless warmth, from rustic branding to elegant seasonal web themes.

Best used for

Autumn-themed interior design and home decor concepts
Cozy cafe or restaurant branding and menu design
Nature-focused photography portfolios or blogs
Seasonal fashion collections or textile patterns
Website designs for lodges, cabins, or outdoor retreats
Packaging for artisanal food products or craft beverages

Suggested color roles

primary

Designate #BF360C (Rust) as the primary color for impactful headlines, key navigational elements, or brand identity to convey warmth and vibrancy.

secondary

Use #FFA000 (Amber) for supporting graphics, secondary calls-to-action, or highlighted content, providing a cheerful and inviting contrast.

accent

Apply #8B0000 (Dark Red) for strong accents, interactive states, or subtle borders to add depth and a touch of dramatic elegance.

background

Employ #6D4C41 (Dark Brown) for backgrounds or larger UI sections, creating a warm, earthy foundation that enhances the other colors.

text

Select #4E342E (Dark Mocha) for body text and crucial information, ensuring excellent readability and a sophisticated, natural feel against lighter elements.

Accessibility notes

Ensure #4E342E text on #FFA000 or #6D4C41 backgrounds meets WCAG contrast requirements.
Avoid using #FFA000 for small text on #BF360C due to potential contrast issues; reserve it for larger elements.
The dark browns provide excellent contrast; leverage #4E342E or #6D4C41 for all essential text.
For headings using #8B0000 or #BF360C, ensure sufficient background luminance for optimal legibility.

Recommended combinations

Forest Floor

Excellent for earthy backgrounds, footer designs, or sections requiring a grounded, natural feel with a pop of color.

#6D4C41 · #4E342E · #BF360C

Autumn Glow

Vibrant and warm, suitable for hero images, product highlights, or energetic call-to-action buttons.

#FFA000 · #BF360C · #8B0000

Deep Woods

Sophisticated and rich, ideal for luxury branding, elegant typography, or creating a sense of depth.

#4E342E · #8B0000 · #6D4C41

CSS variables

:root {
  --maple-leaf-canopy-1: #8B0000;
  --maple-leaf-canopy-2: #BF360C;
  --maple-leaf-canopy-3: #FFA000;
  --maple-leaf-canopy-4: #6D4C41;
  --maple-leaf-canopy-5: #4E342E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "maple-leaf-canopy": {
        1: "#8B0000",
        2: "#BF360C",
        3: "#FFA000",
        4: "#6D4C41",
        5: "#4E342E",
      }
    }
  }
}

Hex values

Color 1#8B0000

Color 2#BF360C

Color 3#FFA000

Color 4#6D4C41

Color 5#4E342E

Accessibility

Contrast checker

1.8:1Fail

4.9:1AA

1.3:1Fail

1.1:1Fail

1.8:1Fail

2.7:1Fail

1.4:1Fail

2:1Fail

4.9:1AA

2.7:1Fail

3.7:1AA18

5.5:1AA

1.3:1Fail

1.4:1Fail

3.7:1AA18

1.5:1Fail

1.1:1Fail

2:1Fail

5.5:1AA

1.5:1Fail

Similar palettes

More like Maple Leaf Canopy