Palette

Crisp Autumn Foliage

A rich, warm collection mirroring the vibrant and changing colors of autumn leaves.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B0000#FF4500#FF8C00#D2691E#A0522D

Palette guide

How to use Crisp Autumn Foliage

Overview

The Crisp Autumn Foliage palette (ID: crisp-autumn-foliage) is a vibrant and energetic collection mirroring the dramatic color shift of fall leaves. It features intense hues from deep Dark Red (#8B0000) and vivid Orange Red (#FF4500) to a bright Dark Orange (#FF8C00). Complementing these are the earthy tones of Chocolate (#D2691E) and Sienna (#A0522D), providing a grounding contrast. This palette is ideal for designers and developers seeking to infuse projects with warmth, vitality, and a touch of natural grandeur. It works exceptionally well for seasonal marketing, robust branding, or digital experiences that aim to evoke coziness and a strong connection to nature's autumnal spectacle.

Best used for

Fall marketing campaigns
Outdoor adventure brands
Rustic restaurant menus
Educational content about nature
Seasonal event promotions
Cozy lifestyle blogs

Suggested color roles

primary

A bold, energetic main color (#FF4500) for hero sections or prominent calls to action, demanding attention.

secondary

Use Dark Orange (#FF8C00) for supporting visual elements, subheadings, or secondary interactive components, maintaining warmth.

accent

A deep, powerful accent (#8B0000) for critical alerts, important links, or sophisticated graphical details, adding gravitas.

background

A rich, warm brown (#D2691E) that can serve as a grounding background, offering depth and an organic feel.

text

Use Dark Red (#8B0000) or Sienna (#A0522D) for dark text on lighter backgrounds, or white text (#FFFFFF) on darker primary/secondary colors.

Accessibility notes

#FF4500 and #FF8C00 are vibrant; ensure sufficient contrast with text, especially if using light text.
#D2691E and #A0522D are good for dark text on light backgrounds or white text on themselves.
Avoid using #FF4500 or #FF8C00 for large blocks of body text due to their intensity.
Always test color pairings for WCAG compliance, particularly for interactive elements.

Recommended combinations

Fiery Sunset

Excellent for eye-catching banners, vibrant calls to action, or energetic brand assets.

#FF4500 · #FF8C00 · #8B0000

Earthy Grove

Suitable for natural product packaging, rustic website themes, or editorial layouts.

#A0522D · #D2691E · #FF8C00

Autumn Blaze

Perfect for bold promotional materials, seasonal app interfaces, or dramatic art pieces.

#8B0000 · #FF4500 · #D2691E

CSS variables

:root {
  --crisp-autumn-foliage-1: #8B0000;
  --crisp-autumn-foliage-2: #FF4500;
  --crisp-autumn-foliage-3: #FF8C00;
  --crisp-autumn-foliage-4: #D2691E;
  --crisp-autumn-foliage-5: #A0522D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "crisp-autumn-foliage": {
        1: "#8B0000",
        2: "#FF4500",
        3: "#FF8C00",
        4: "#D2691E",
        5: "#A0522D",
      }
    }
  }
}

Hex values

Color 1#8B0000

Color 2#FF4500

Color 3#FF8C00

Color 4#D2691E

Color 5#A0522D

Accessibility

Contrast checker

2.9:1Fail

4.3:1AA18

2.8:1Fail

1.8:1Fail

2.9:1Fail

1.5:1Fail

1.1:1Fail

1.6:1Fail

4.3:1AA18

1.5:1Fail

1.6:1Fail

2.4:1Fail

2.8:1Fail

1.1:1Fail

1.6:1Fail

1.5:1Fail

1.8:1Fail

1.6:1Fail

2.4:1Fail

1.5:1Fail

Similar palettes

More like Crisp Autumn Foliage

Crisp Autumn Foliage

See it in context.

Ready when you are.

Built with Crisp Autumn Foliage.

How to use Crisp Autumn Foliage

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Fiery Sunset

Earthy Grove

Autumn Blaze

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Crisp Autumn Foliage