Palette

Crisp Autumn Foliage

The vivid and transient beauty of autumn leaves, capturing reds, oranges, and golds against a rich earthy backdrop.

warmnatural5 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

#A8333E#BF5B3D#E57D2C#F2AE3B#8B4513

Palette guide

How to use Crisp Autumn Foliage

Overview

The Crisp Autumn Foliage palette (ID: crisp-autumn-foliage-2) captures the vibrant and transient beauty of fall, echoing the rich hues of changing leaves. This collection features a dynamic range from deep Cranberry Red (#A8333E) and fiery Burnt Orange (#BF5B3D) to a bright Pumpkin Orange (#E57D2C) and a warm Goldenrod (#F2AE3B). Grounded by a solid Saddle Brown (#8B4513), it offers designers and developers a robust set for creating warm, inviting, and natural-feeling interfaces. These colors are excellent for evoking coziness, harvest themes, or any project that benefits from an organic, rich, and energetic visual presence, ensuring depth and visual interest.

Best used for

Autumn seasonal campaigns
Food and beverage branding (e.g., coffee, baked goods)
Outdoor and nature-themed websites
Rustic home decor styling
Event invitations for fall weddings
Packaging for natural products

Suggested color roles

primary

A warm, inviting base (#BF5B3D) for hero sections, main navigation, or dominant graphical elements, radiating energy.

secondary

Use Pumpkin Orange (#E57D2C) for subheadings, secondary calls to action, or interactive elements, providing a brighter, more playful warmth.

accent

A deep, rich accent (#A8333E) for important buttons, highlight text, or decorative flourishes, adding intensity and contrast.

background

A lighter, warm gold (#F2AE3B) that can serve as a soft backdrop, providing an inviting glow without overpowering content.

text

Use Saddle Brown (#8B4513) for body text on lighter backgrounds, or a dark charcoal like #333333 for general readability.

Accessibility notes

#F2AE3B may have insufficient contrast with #E57D2C or #BF5B3D for text.
Ensure sufficient contrast when pairing #BF5B3D or #E57D2C with background colors.
#A8333E or #8B4513 are good choices for text on lighter hues like #F2AE3B.
Avoid using light text on #BF5B3D or #E57D2C without careful contrast checking.

Recommended combinations

Harvest Glow

Great for festive autumn event promotions, warm blog layouts, or cozy e-commerce designs.

#F2AE3B · #E57D2C · #8B4513

Forest Floor

Suitable for earthy brand identities, nature photography displays, or robust editorial content.

#8B4513 · #A8333E · #BF5B3D

Fireside Warmth

Perfect for creating inviting landing pages, culinary websites, or engaging social media graphics.

#BF5B3D · #E57D2C · #A8333E

CSS variables

:root {
  --crisp-autumn-foliage-2-1: #A8333E;
  --crisp-autumn-foliage-2-2: #BF5B3D;
  --crisp-autumn-foliage-2-3: #E57D2C;
  --crisp-autumn-foliage-2-4: #F2AE3B;
  --crisp-autumn-foliage-2-5: #8B4513;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "crisp-autumn-foliage-2": {
        1: "#A8333E",
        2: "#BF5B3D",
        3: "#E57D2C",
        4: "#F2AE3B",
        5: "#8B4513",
      }
    }
  }
}

Hex values

Color 1#A8333E

Color 2#BF5B3D

Color 3#E57D2C

Color 4#F2AE3B

Color 5#8B4513

Accessibility

Contrast checker

1.5:1Fail

2.3:1Fail

3.4:1AA18

1.1:1Fail

1.5:1Fail

2.3:1Fail

1.6:1Fail

2.3:1Fail

1.5:1Fail

2.5:1Fail

3.4:1AA18

2.3:1Fail

1.5:1Fail

3.7:1AA18

1.1:1Fail

1.6:1Fail

2.5:1Fail

3.7:1AA18

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

Harvest Glow

Forest Floor

Fireside Warmth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Crisp Autumn Foliage