Palette

Autumn Leaf

Vibrant reds and rich oranges capture the crisp beauty and changing colors 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 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.

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

Data visualization

#8B0000#A52A2A#B22222#D2691E#F4A460

Palette guide

How to use Autumn Leaf

Overview

The Autumn Leaf palette is a vibrant and warm collection, perfectly encapsulating the dramatic beauty of changing fall foliage. With a deep dark red (#8B0000) providing a strong anchor, it transitions through a rich brown-red (#A52A2A) and a fiery red (#B22222), before moving into a warm chocolate orange (#D2691E) and a soft peach-orange (#F4A460). This palette is ideal for designers and developers looking to inject energy and natural warmth into their projects. From seasonal marketing campaigns and rustic website themes to engaging digital illustrations, these hex codes offer a versatile range to create inviting and visually striking designs that resonate with the crisp, colorful spirit of autumn.

Best used for

Seasonal marketing and advertising
Fall festival event branding
Nature-themed website headers
Rustic e-commerce product displays
Digital illustrations of landscapes
Cozy blog themes and content

Suggested color roles

primary

Utilize #8B0000 as a commanding primary color for brand logos or key calls-to-action, signifying passion and depth.

secondary

Employ #A52A2A for secondary headings or important sub-sections, offering a rich, supportive tone.

accent

Highlight interactive elements or critical information with #D2691E to draw immediate attention with a warm glow.

background

A light, near-white background allows the richness of #8B0000 and #A52A2A to stand out prominently.

text

For optimal readability, use #8B0000 or a dark charcoal for body text on lighter backgrounds like #F4A460.

Accessibility notes

Ensure sufficient contrast between text in #8B0000 or #A52A2A and lighter backgrounds like #F4A460 for WCAG AA compliance.
Avoid using #D2691E text on #F4A460 backgrounds without careful contrast checking due to similar luminosity.
Test button and link states for clear visual distinction, especially within the red-orange spectrum.
Consider alternative indicators for critical information if relying solely on color contrast between #A52A2A and #B22222.

Recommended combinations

Deep Earth

Creates a strong, grounded foundation with a soft highlight, excellent for headers or footers.

#8B0000 · #A52A2A · #F4A460

Fiery Contrast

Ideal for impactful calls-to-action or vibrant graphic elements that need to stand out.

#B22222 · #D2691E · #8B0000

Warm Gradient

Perfect for subtle background gradients or decorative elements that require a smooth, warm transition.

#F4A460 · #D2691E · #A52A2A

CSS variables

:root {
  --autumn-leaf-1: #8B0000;
  --autumn-leaf-2: #A52A2A;
  --autumn-leaf-3: #B22222;
  --autumn-leaf-4: #D2691E;
  --autumn-leaf-5: #F4A460;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "autumn-leaf": {
        1: "#8B0000",
        2: "#A52A2A",
        3: "#B22222",
        4: "#D2691E",
        5: "#F4A460",
      }
    }
  }
}

Hex values

Color 1#8B0000

Color 2#A52A2A

Color 3#B22222

Color 4#D2691E

Color 5#F4A460

Accessibility

Contrast checker

1.4:1Fail

1.5:1Fail

2.8:1Fail

4.9:1AA

1.4:1Fail

1.1:1Fail

1.9:1Fail

3.5:1AA18

1.5:1Fail

1.1:1Fail

1.8:1Fail

3.3:1AA18

2.8:1Fail

1.9:1Fail

1.8:1Fail

4.9:1AA

3.5:1AA18

3.3:1AA18

1.8:1Fail

Similar palettes

More like Autumn Leaf

Autumn Leaf

See it in context.

Ready when you are.

Built with Autumn Leaf.

How to use Autumn Leaf

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Earth

Fiery Contrast

Warm Gradient

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Autumn Leaf