Palette

Autumn Maple Flame

Fiery reds, oranges, and golden yellows capture the brilliant, burning hues of maple leaves at the peak of autumn.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B1C0B#BF3604#ED6C00#FF9100#FFCC00

Palette guide

How to use Autumn Maple Flame

Overview

The Autumn Maple Flame palette ignites with the brilliant, burning hues of maple leaves at their peak. It's a dynamic collection, starting with a deep, rich red-brown (#8B1C0B) and intensifying through a bold burnt orange (#BF3604) to a vibrant pure orange (#ED6C00). The palette culminates in a bright, sunny orange (#FF9100) and a cheerful golden yellow (#FFCC00), offering a truly energetic spectrum. This palette is perfect for designers and developers aiming to infuse their projects with warmth, vitality, and a striking natural aesthetic. From high-impact seasonal campaigns and engaging digital interfaces to lively branding and expressive illustrations, these hex codes provide an unforgettable visual experience.

Best used for

High-impact seasonal marketing
Energetic event promotions
Vibrant e-commerce visuals
Brand identity for active lifestyles
Digital art and landscape rendering
Festive holiday decor mockups

Suggested color roles

primary

Utilize #8B1C0B as a strong primary color for a solid, warm foundation in headers or key graphic elements.

secondary

Employ #BF3604 for secondary content blocks or subheadings, adding a powerful, fiery touch.

accent

Highlight interactive elements or critical information with #ED6C00 or #FF9100 to ensure maximum visibility and energy.

background

A light, creamy off-white background allows the intensity of these colors to truly shine without overpowering.

text

For optimal readability, use #8B1C0B for body text on lighter backgrounds, or a crisp black for general content.

Accessibility notes

Ensure sufficient contrast when using #8B1C0B text on #FFCC00 or #FF9100 backgrounds for WCAG AA compliance.
Avoid placing #ED6C00 or #FF9100 text on similarly bright backgrounds due to potential low contrast.
Test color combinations for users with color vision deficiencies, especially within the red-orange-yellow range.
Provide clear visual cues beyond color for interactive states, particularly between #ED6C00 and #FF9100.

Recommended combinations

Deep Ember

Creates a strong, warm base with a bright, contrasting highlight, excellent for headers or bold sections.

#8B1C0B · #BF3604 · #FFCC00

Fiery Burst

Ideal for energetic calls-to-action, vibrant banners, or graphic elements that demand immediate attention.

#ED6C00 · #FF9100 · #BF3604

Golden Warmth

Use for a bright, inviting background with deep text and a vibrant supporting color, suitable for content cards or alerts.

#FFCC00 · #8B1C0B · #ED6C00

CSS variables

:root {
  --autumn-maple-flame-1: #8B1C0B;
  --autumn-maple-flame-2: #BF3604;
  --autumn-maple-flame-3: #ED6C00;
  --autumn-maple-flame-4: #FF9100;
  --autumn-maple-flame-5: #FFCC00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "autumn-maple-flame": {
        1: "#8B1C0B",
        2: "#BF3604",
        3: "#ED6C00",
        4: "#FF9100",
        5: "#FFCC00",
      }
    }
  }
}

Hex values

Color 1#8B1C0B

Color 2#BF3604

Color 3#ED6C00

Color 4#FF9100

Color 5#FFCC00

Accessibility

Contrast checker

1.7:1Fail

3:1Fail

4.1:1AA18

6.1:1AA

1.7:1Fail

1.8:1Fail

2.5:1Fail

3.7:1AA18

3:1Fail

1.8:1Fail

1.4:1Fail

2.1:1Fail

4.1:1AA18

2.5:1Fail

1.4:1Fail

1.5:1Fail

6.1:1AA

3.7:1AA18

2.1:1Fail

1.5:1Fail

Similar palettes

More like Autumn Maple Flame