Palette

Crisp Autumn Leaves

A vivid blend of fiery reds, deep oranges, and rich browns, reflecting the dramatic colors of fall foliage.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Crisp Autumn Leaves 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 Crisp Autumn Leaves.

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

Data visualization

#B22222#D2691E#FF8C00#CD5C5C#8B4513

Palette guide

How to use Crisp Autumn Leaves

Overview

The Crisp Autumn Leaves palette vividly captures the dramatic transformation of fall foliage, offering a rich blend of fiery reds, deep oranges, and grounding browns. Featuring the intensity of Firebrick (#B22222), the warmth of Chocolate (#D2691E), and the brightness of Dark Orange (#FF8C00), this palette is both energetic and inviting. Softened by Indian Red (#CD5C5C) and anchored by Saddle Brown (#8B4513), it provides a versatile foundation for design. Developers and designers will find these hues excellent for creating warm, natural, and appealing user experiences, perfect for seasonal campaigns, cozy branding, or any project aiming for an authentic autumnal feel with depth and visual comfort.

Best used for

Seasonal e-commerce promotions
Nature and wildlife photography sites
Cozy cafe or bakery branding
Fall festival marketing
Editorial content on rustic themes
Home decor product lines

Suggested color roles

primary

A rich, inviting red (#B22222) for primary branding, hero sections, or significant calls to action, conveying passion and warmth.

secondary

A rich, earthy brown (#D2691E) for supporting panels, sub-sections, or secondary navigation, providing balance.

accent

A bright, energetic accent (#FF8C00) for calls to action, interactive elements, or key highlights, drawing the eye.

background

A softer, muted red (#CD5C5C) that can serve as a warm, inviting background, allowing other colors to pop.

text

Use Saddle Brown (#8B4513) for body text on lighter backgrounds, or white text (#FFFFFF) for optimal contrast on #B22222 or #D2691E.

Accessibility notes

#FF8C00 is bright and needs careful contrast pairing for text; dark brown/reds are best.
#CD5C5C can be a background, but ensure text (e.g., #B22222 or #8B4513) has enough contrast.
Avoid placing light text on #D2691E without checking contrast ratios.
Strong reds like #B22222 and #8B4513 are good for high-contrast text on white or very light backgrounds.

Recommended combinations

Autumn Hearth

Ideal for warm, inviting website sections, rustic product displays, or engaging blog headers.

#CD5C5C · #D2691E · #B22222

Maple Leaf

Excellent for vibrant seasonal promotions, eye-catching social media posts, or dynamic calls to action.

#FF8C00 · #B22222 · #8B4513

Forest Trail

Suitable for nature-themed interfaces, outdoor apparel branding, or serene editorial layouts.

#8B4513 · #D2691E · #CD5C5C

CSS variables

:root {
  --crisp-autumn-leaves-1: #B22222;
  --crisp-autumn-leaves-2: #D2691E;
  --crisp-autumn-leaves-3: #FF8C00;
  --crisp-autumn-leaves-4: #CD5C5C;
  --crisp-autumn-leaves-5: #8B4513;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "crisp-autumn-leaves": {
        1: "#B22222",
        2: "#D2691E",
        3: "#FF8C00",
        4: "#CD5C5C",
        5: "#8B4513",
      }
    }
  }
}

Hex values

Color 1#B22222

Color 2#D2691E

Color 3#FF8C00

Color 4#CD5C5C

Color 5#8B4513

Accessibility

Contrast checker

1.8:1Fail

2.9:1Fail

1.7:1Fail

1.1:1Fail

1.8:1Fail

1.6:1Fail

1.1:1Fail

2:1Fail

2.9:1Fail

1.6:1Fail

1.7:1Fail

3:1AA18

1.7:1Fail

1.1:1Fail

1.7:1Fail

1.8:1Fail

1.1:1Fail

2:1Fail

3:1AA18

1.8:1Fail

Similar palettes

More like Crisp Autumn Leaves

Crisp Autumn Leaves

See it in context.

Ready when you are.

Built with Crisp Autumn Leaves.

How to use Crisp Autumn Leaves

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Autumn Hearth

Maple Leaf

Forest Trail

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Crisp Autumn Leaves