Palette

Autumn Foliage Crunch

The rich, deep hues of autumn leaves scattering across a forest floor, full of warmth and natural beauty.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Autumn Foliage Crunch 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 Foliage Crunch.

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

Data visualization

#5A1A02#8E2B2A#D35F3C#FF9F1C#FBEED2

Palette guide

How to use Autumn Foliage Crunch

Overview

The "Autumn Foliage Crunch" palette captures the rich, deep hues of autumn leaves scattering across a forest floor, full of warmth and natural beauty. It transitions from the intense, almost black-brown of #5A1A02 and the deep red of #8E2B2A, through the vibrant burnt orange of #D35F3C, to the bright, cheerful orange of #FF9F1C. The palette culminates in the soft, creamy yellow of #FBEED2. This collection is perfect for designs aiming to evoke natural warmth, rustic charm, and the crisp feeling of autumn. Designers and developers can utilize these harmonious hues for creating inviting interfaces, robust branding, or evocative seasonal content.

Best used for

Outdoor and nature-themed websites
Rustic wedding or event branding
Seasonal marketing and social media campaigns
Cozy blog designs and lifestyle content
Packaging for natural or artisanal goods
Mobile app interfaces with an earthy, warm feel

Suggested color roles

primary

#D35F3C - A vibrant, warm burnt orange that serves as an excellent focal point for branding, call-to-action buttons, or main headings.

secondary

#8E2B2A - A deep, rich red that provides strong support for subheadings, navigation elements, or content dividers, adding depth.

accent

#FF9F1C - A bright, cheerful orange that adds a luminous pop, perfect for interactive elements, highlights, or small, impactful details.

background

#FBEED2 - A very light, warm cream that offers a clean, inviting base, ensuring content clarity and a soft, natural feel.

text

#5A1A02 - A very deep, dark brown that provides excellent contrast against lighter shades like #FBEED2, ensuring high readability for body text.

Accessibility notes

Ensure sufficient contrast for text, especially when using #FF9F1C on #FBEED2, which may require larger text sizes or bolding.
Use #5A1A02 or a deep charcoal/black for body text on #FBEED2 to meet WCAG AA standards.
Avoid using #D35F3C or #8E2B2A for small text on backgrounds of similar warmth without careful contrast checking.
Test interactive elements for clear visual feedback and sufficient contrast in all states.

Recommended combinations

Forest Floor

Creates a soft to vibrant warm gradient, ideal for backgrounds, headers, or atmospheric sections.

#FBEED2 · #FF9F1C · #D35F3C

Deep Autumn

Combines the deepest brown and red with a light cream for striking contrast and a robust, earthy feel.

#5A1A02 · #8E2B2A · #FBEED2

Vibrant Crunch

A lively blend of oranges and deep red, great for dynamic visual elements or highlighting key information.

#D35F3C · #FF9F1C · #8E2B2A

CSS variables

:root {
  --autumn-foliage-crunch-1: #5A1A02;
  --autumn-foliage-crunch-2: #8E2B2A;
  --autumn-foliage-crunch-3: #D35F3C;
  --autumn-foliage-crunch-4: #FF9F1C;
  --autumn-foliage-crunch-5: #FBEED2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "autumn-foliage-crunch": {
        1: "#5A1A02",
        2: "#8E2B2A",
        3: "#D35F3C",
        4: "#FF9F1C",
        5: "#FBEED2",
      }
    }
  }
}

Hex values

Color 1#5A1A02

Color 2#8E2B2A

Color 3#D35F3C

Color 4#FF9F1C

Color 5#FBEED2

Accessibility

Contrast checker

1.6:1Fail

3.5:1AA18

6.5:1AA

11.5:1AAA

1.6:1Fail

2.2:1Fail

4:1AA18

7.2:1AAA

3.5:1AA18

2.2:1Fail

1.9:1Fail

3.3:1AA18

6.5:1AA

4:1AA18

1.9:1Fail

1.8:1Fail

11.5:1AAA

7.2:1AAA

3.3:1AA18

1.8:1Fail

Similar palettes

More like Autumn Foliage Crunch