Back to palettes

Palette

Autumn Foliage

Rich reds, oranges, and golden yellows capture the stunning, dramatic transformation of autumn leaves.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B0000#CD5C5C#D2691E#B8860B#DAA520

Palette guide

How to use Autumn Foliage

Overview

The "Autumn Foliage" palette captures the stunning, dramatic transformation of autumn leaves with rich reds, oranges, and golden yellows. It features the intense, deep red of #8B0000 and the softer coral-red of #CD5C5C. These are complemented by the vibrant burnt orange of #D2691E and the radiant golden hues of #B8860B and #DAA520. This collection is perfect for designs aiming to evoke natural beauty, dramatic warmth, and the vibrant energy of fall. Designers and developers can utilize these striking hues for engaging web interfaces, robust branding, or evocative seasonal content.

Best used for

  • Nature and outdoor adventure themed designs
  • Autumnal event promotions and flyers
  • Branding for rustic or artisanal products
  • Seasonal marketing campaigns and social media
  • User interfaces needing a vibrant, earthy feel
  • Digital art and illustrations of fall landscapes

Suggested color roles

primary

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

secondary

#8B0000 - An intense, deep red that provides strong support for subheadings, navigation elements, or content dividers, adding gravitas.

accent

#DAA520 - A rich, golden yellow that adds a luminous pop, perfect for interactive elements, highlights, or small, impactful details.

background

#CD5C5C - A soft, warm coral-red that offers a comforting base, allowing darker reds and brighter golds to stand out.

text

Black or deep charcoal for optimal readability against lighter shades like #DAA520. For text on #CD5C5C, use a dark brown.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using #CD5C5C for text on lighter backgrounds or vice-versa.
  • For body text on #DAA520 or #B8860B, use black or a deep charcoal to meet WCAG AA standards.
  • Avoid using #D2691E or #CD5C5C 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

Golden Red

Creates a warm, radiant gradient from gold to burnt orange, ideal for headers or prominent visuals.

#DAA520 · #B8860B · #D2691E

Deep Contrast

Combines deep red with a soft coral and bright gold for striking contrast and visual interest.

#8B0000 · #CD5C5C · #DAA520

Earthy Vibrance

A strong blend of orange, gold, and deep red, excellent for creating high-impact sections or visual accents.

#D2691E · #B8860B · #8B0000

CSS variables

:root {
  --autumn-foliage-1: #8B0000;
  --autumn-foliage-2: #CD5C5C;
  --autumn-foliage-3: #D2691E;
  --autumn-foliage-4: #B8860B;
  --autumn-foliage-5: #DAA520;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "autumn-foliage": {
        1: "#8B0000",
        2: "#CD5C5C",
        3: "#D2691E",
        4: "#B8860B",
        5: "#DAA520",
      }
    }
  }
}

Related searches

autumn leaves color palettevibrant fall red golddramatic seasonal colorsnatural foliage web designrich autumn ui scheme

Palette colors

Hex values

Color 1#8B0000
·
Color 2#CD5C5C
·
Color 3#D2691E
·
Color 4#B8860B
·
Color 5#DAA520
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.5:1Fail
2.8:1Fail
3.1:1AA18
4.5:1AA18
2
2.5:1Fail
1.1:1Fail
1.2:1Fail
1.8:1Fail
3
2.8:1Fail
1.1:1Fail
1.1:1Fail
1.6:1Fail
4
3.1:1AA18
1.2:1Fail
1.1:1Fail
1.5:1Fail
5
4.5:1AA18
1.8:1Fail
1.6:1Fail
1.5:1Fail

Similar palettes

More like Autumn Foliage

View all warm
Autumn Cider Spill
Autumn Dusk Glow
Autumn Ember Glow
Autumn Foliage Ember
Autumn Forest Canopy
Autumn Harvest Wreath