Palette

Autumn Foliage Ember

Rich reds, oranges, and yellows mimic the burning glow of fall leaves as they drift and turn.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B3A2C#C45B2B#E88A3B#FABD4C#FFE6A5

Palette guide

How to use Autumn Foliage Ember

Overview

The "Autumn Foliage Ember" palette mimics the burning glow of fall leaves as they drift and turn, featuring rich reds, oranges, and yellows. It progresses from the deep, earthy red-brown of #8B3A2C to the vibrant orange-red of #C45B2B, then brightens through the warm oranges of #E88A3B and #FABD4C, culminating in the luminous, soft cream of #FFE6A5. This collection is perfect for designs aiming to evoke natural warmth, cozy charm, and the gentle energy of autumn. Designers and developers can leverage these harmonious hues for creating inviting web interfaces, rustic branding, or evocative seasonal content.

Best used for

Cozy lifestyle blogs and websites
Autumnal event invitations and branding
Home decor or artisanal product e-commerce
Seasonal marketing campaigns and social media
User interfaces with a warm, natural aesthetic
Digital art depicting autumn landscapes

Suggested color roles

primary

#E88A3B - A vibrant, warm orange that makes an excellent focal point for branding, call-to-action buttons, or main headings.

secondary

#C45B2B - A rich, deep orange-red that provides strong support for subheadings, navigation elements, or content dividers, adding depth.

accent

#FABD4C - A soft, golden orange that adds a luminous touch, perfect for interactive elements, highlights, or subtle decorative details.

background

#FFE6A5 - A very light, warm cream that offers a clean, inviting base, ensuring content clarity and a soft, natural feel.

text

#8B3A2C - A deep, earthy red-brown that provides excellent contrast against lighter shades like #FFE6A5, ensuring high readability for body text.

Accessibility notes

Ensure sufficient contrast for text, especially when using #FABD4C on #FFE6A5, which may require larger text sizes or bolding.
Use #8B3A2C or a deep charcoal/black for body text on #FFE6A5 to meet WCAG AA standards.
Avoid using #E88A3B or #C45B2B 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

Ember Glow

Creates a soft to vibrant warm gradient, ideal for backgrounds, headers, or atmospheric sections.

#FFE6A5 · #FABD4C · #E88A3B

Grounded Fire

Combines the deepest red-brown with a vibrant orange-red and a light cream for striking contrast and an earthy, energetic feel.

#8B3A2C · #C45B2B · #FFE6A5

Warm Progression

A harmonious blend of oranges and red-orange, great for dynamic visual elements or highlighting key information.

#E88A3B · #FABD4C · #C45B2B

CSS variables

:root {
  --autumn-foliage-ember-1: #8B3A2C;
  --autumn-foliage-ember-2: #C45B2B;
  --autumn-foliage-ember-3: #E88A3B;
  --autumn-foliage-ember-4: #FABD4C;
  --autumn-foliage-ember-5: #FFE6A5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "autumn-foliage-ember": {
        1: "#8B3A2C",
        2: "#C45B2B",
        3: "#E88A3B",
        4: "#FABD4C",
        5: "#FFE6A5",
      }
    }
  }
}

Hex values

Color 1#8B3A2C

Color 2#C45B2B

Color 3#E88A3B

Color 4#FABD4C

Color 5#FFE6A5

Accessibility

Contrast checker

1.8:1Fail

3:1Fail

4.5:1AA

6.2:1AA

1.8:1Fail

1.7:1Fail

2.6:1Fail

3.5:1AA18

3:1Fail

1.7:1Fail

1.5:1Fail

2.1:1Fail

4.5:1AA

2.6:1Fail

1.5:1Fail

1.4:1Fail

6.2:1AA

3.5:1AA18

2.1:1Fail

1.4:1Fail

Similar palettes

More like Autumn Foliage Ember

View all warm

Cozy Autumn Fireside

Autumn Cider Festival