Palette

Autumn Amber Cascade

The fiery cascade of autumn leaves, ranging from deep russet to bright amber and warm brown.

WarmNatural5 colors

More Warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#C24D2C#E3743C#F4A340#6D2D1C#AF7E4E

Palette guide

How to use Autumn Amber Cascade

Overview

The "Autumn Amber Cascade" palette captures the fiery cascade of autumn leaves, ranging from deep russet to bright amber and warm brown, creating a natural and warm feel. It features a vibrant burnt orange #C24D2C, a luminous amber #E3743C, a rich golden orange #F4A340, a deep russet #6D2D1C, and a warm medium brown #AF7E4E. This warm palette is ideal for designers looking to infuse coziness, nature, and a strong connection to the autumn season into their projects. The harmonious blend of oranges and browns, progressing from deep to light, creates a refreshing and modern aesthetic, perfect for web interfaces, branding, or digital art that aims to be both captivating and serene. It offers a truly elegant and ethereal aesthetic.

Best used for

Seasonal product marketing (fall collection)
Food and beverage branding (spices, coffee)
Home decor or interior design websites
Nature photography portfolios
Crafts and artisanal goods e-commerce
Autumnal event invitations

Suggested color roles

primary

#E3743C - A luminous amber, ideal for main interactive elements, key calls-to-action, or prominent sections that convey warmth and energy.

secondary

#C24D2C - A vibrant burnt orange, excellent for supporting content, navigation backgrounds, or subheadings, adding depth and sophistication.

accent

#F4A340 - A rich golden orange, perfect for highlights, hover states, or small decorative elements that need to pop with a brilliant glow.

background

#AF7E4E - A warm medium brown, providing a sophisticated and grounding foundation against which the vibrant oranges truly shine.

text

#6D2D1C - A deep russet that offers excellent readability on #F4A340 or #E3743C, or use a crisp white for general body text on darkest backgrounds.

Accessibility notes

Ensure #6D2D1C has sufficient contrast when used for text on #F4A340 or #E3743C backgrounds.
#C24D2C can be used for headings on #AF7E4E, but always verify contrast for smaller text.
Avoid using #E3743C text directly on #F4A340, as the contrast might be insufficient.
For optimal readability, use a dark charcoal or black text on the lightest shades for general body copy.

Recommended combinations

Deep Woods

Robust website footers, elegant dashboards, or professional presentations.

#6D2D1C · #AF7E4E · #C24D2C

Amber Glow

Vibrant hero sections, engaging infographics, or serene app interfaces.

#C24D2C · #E3743C · #F4A340

Autumn Blaze

Dynamic gradient backgrounds, celestial-themed graphics, or impactful presentations.

#6D2D1C · #E3743C · #F4A340

CSS variables

:root {
  --autumn-amber-cascade-1: #C24D2C;
  --autumn-amber-cascade-2: #E3743C;
  --autumn-amber-cascade-3: #F4A340;
  --autumn-amber-cascade-4: #6D2D1C;
  --autumn-amber-cascade-5: #AF7E4E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "autumn-amber-cascade": {
        1: "#C24D2C",
        2: "#E3743C",
        3: "#F4A340",
        4: "#6D2D1C",
        5: "#AF7E4E",
      }
    }
  }
}

Hex values

Color 1#C24D2C

Color 2#E3743C

Color 3#F4A340

Color 4#6D2D1C

Color 5#AF7E4E

Accessibility

Contrast checker

1.6:1Fail

2.3:1Fail

2.2:1Fail

1.3:1Fail

1.6:1Fail

1.5:1Fail

3.3:1AA18

1.2:1Fail

2.3:1Fail

1.5:1Fail

5:1AA

1.7:1Fail

2.2:1Fail

3.3:1AA18

5:1AA

2.9:1Fail

1.3:1Fail

1.2:1Fail

1.7:1Fail

2.9:1Fail

Similar palettes

More like Autumn Amber Cascade

View all Warm

Autumn Leaf Cascade

Spiced Harvest Hearth