Palette

Autumn Leaf Ember

A fiery blend of reds, oranges, and browns, capturing the vibrant 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 Leaf Ember 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 Leaf Ember.

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

Data visualization

#B22222#FF8C00#FFD700#8B4513#A0522D

Palette guide

How to use Autumn Leaf Ember

Overview

The Autumn Leaf Ember palette is a fiery blend of reds, oranges, and browns, capturing the vibrant transformation of autumn leaves. This natural and warm collection offers designers and developers a dynamic spectrum of earthy and energetic hues, perfect for creating lively and grounded experiences. Featuring bold #B22222, luminous #FF8C00, bright #FFD700, robust #8B4513, and deep #A0522D, this palette provides versatility. Its energetic progression from deep earth to brilliant gold creates a captivating visual flow, ideal for projects that aim to convey seasonal vibrancy, natural beauty, or the rich abundance of fall, perfect for outdoor or festive themes.

Best used for

fall festival branding
nature photography websites
seasonal product launches
outdoor event promotions
autumn-themed digital art
rustic branding for lifestyle goods

Suggested color roles

primary

#B22222 - A strong, deep brick red, excellent for foundational elements, large headers, or backgrounds that establish richness and natural stability.

secondary

#8B4513 - A robust saddle brown, perfect for supporting content blocks, navigation, or as a strong, earthy base for lighter accents.

accent

#FF8C00 - A vibrant, luminous dark orange, ideal for calls to action, important highlights, or decorative elements that demand attention.

background

#FFD700 - A bright, radiant gold, provides an energetic and warm backdrop, allowing darker colors to pop and conveying cheerfulness.

text

#A0522D - For primary body text on light backgrounds like #FFD700, offering excellent readability and maintaining the palette's natural, earthy tone.

Accessibility notes

Ensure #B22222 or #A0522D text on #FFD700 backgrounds meets WCAG AA contrast standards.
Avoid using #FF8C00 for small text directly on #FFD700 due to potential low contrast.
For critical information, use the darkest colors (#B22222, #A0522D) for text against the lightest background (#FFD700).
White or a very light cream provides excellent contrast for text on #B22222, #8B4513, and #A0522D.

Recommended combinations

Fiery Fall

Creates a dynamic, high-energy contrast, perfect for prominent calls to action or seasonal promotions.

#B22222 · #FF8C00 · #FFD700

Ember Glow

Ideal for a warm, earthy gradient with a luminous pop, suitable for backgrounds or layered content.

#8B4513 · #A0522D · #FF8C00

Golden Ground

Provides a clean, readable layout with strong dark text and a fiery accent, excellent for content blocks.

#FFD700 · #B22222 · #A0522D

CSS variables

:root {
  --autumn-leaf-ember-1: #B22222;
  --autumn-leaf-ember-2: #FF8C00;
  --autumn-leaf-ember-3: #FFD700;
  --autumn-leaf-ember-4: #8B4513;
  --autumn-leaf-ember-5: #A0522D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "autumn-leaf-ember": {
        1: "#B22222",
        2: "#FF8C00",
        3: "#FFD700",
        4: "#8B4513",
        5: "#A0522D",
      }
    }
  }
}

Hex values

Color 1#B22222

Color 2#FF8C00

Color 3#FFD700

Color 4#8B4513

Color 5#A0522D

Accessibility

Contrast checker

2.9:1Fail

4.8:1AA

1.1:1Fail

1.2:1Fail

2.9:1Fail

1.7:1Fail

3:1AA18

2.4:1Fail

4.8:1AA

1.7:1Fail

5.1:1AA

4:1AA18

1.1:1Fail

3:1AA18

5.1:1AA

1.3:1Fail

1.2:1Fail

2.4:1Fail

4:1AA18

1.3:1Fail

Similar palettes

More like Autumn Leaf Ember

Autumn Foliage Crunch