Palette

Spiced Autumn Air

Vibrant, inviting oranges and warm accents that embody the crisp, spiced air of an autumn afternoon.

WarmEnergetic5 colors

More Warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Spiced Autumn Air 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 Spiced Autumn Air.

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

Data visualization

#8B2C0F#C15523#E87A46#FBB27C#FFD8A3

Palette guide

How to use Spiced Autumn Air

Overview

The Spiced Autumn Air palette (version 2) is a vibrant and energetic collection of warm oranges and earthy browns, perfectly capturing the crisp, inviting essence of fall. This palette includes a deep reddish-brown (#8B2C0F), a rich burnt orange (#C15523), a lively pumpkin orange (#E87A46), a soft peach (#FBB27C), and a delicate cream (#FFD8A3). Designers can leverage this palette to create dynamic and welcoming designs. The range from deep to light offers excellent versatility for layering and achieving depth, while the overall warmth provides a comforting and approachable feel. It's an excellent choice for seasonal promotions or brands seeking an energetic yet cozy aesthetic.

Best used for

Autumn seasonal marketing campaigns
Outdoor adventure and lifestyle brands
Food and beverage packaging (especially coffee/tea)
Cozy blog themes and social media graphics
Event branding for fall festivals
Children's book illustrations with warm tones

Suggested color roles

primary

The rich burnt orange (#C15523) makes a strong primary color for calls to action or key brand elements, conveying energy and warmth.

secondary

The lively pumpkin orange (#E87A46) is excellent for secondary headings, interactive elements, or to add a vibrant pop to designs.

accent

The deep reddish-brown (#8B2C0F) can be used for sophisticated accents, borders, or to ground lighter elements.

background

The delicate cream (#FFD8A3) provides a warm, clean, and highly readable background that allows the vibrant oranges to shine.

text

The deep reddish-brown (#8B2C0F) offers excellent contrast against #FFD8A3, making it ideal for body text and headings. A dark charcoal or black could also be used for maximum readability.

Accessibility notes

Ensure #8B2C0F text on #FFD8A3 background meets WCAG AA or AAA contrast standards.
Avoid using #E87A46 or #FBB27C for small text on light backgrounds as contrast may be insufficient.
Verify contrast for all interactive elements, especially when using the lighter orange tones.
Use the lighter colors, #FBB27C and #FFD8A3, primarily for backgrounds or large graphical elements rather than small text.

Recommended combinations

Crisp Air

Perfect for main content areas, ensuring readability with a warm, energetic brand presence.

#FFD8A3 · #8B2C0F · #C15523

Spiced Glow

Great for highlighting key information, interactive buttons, or creating vibrant graphic elements.

#E87A46 · #FBB27C · #C15523

Earthy Comfort

Ideal for footers, sub-sections, or backgrounds where a grounded yet inviting feel is desired.

#8B2C0F · #FFD8A3 · #E87A46

CSS variables

:root {
  --spiced-autumn-air-2-1: #8B2C0F;
  --spiced-autumn-air-2-2: #C15523;
  --spiced-autumn-air-2-3: #E87A46;
  --spiced-autumn-air-2-4: #FBB27C;
  --spiced-autumn-air-2-5: #FFD8A3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-autumn-air-2": {
        1: "#8B2C0F",
        2: "#C15523",
        3: "#E87A46",
        4: "#FBB27C",
        5: "#FFD8A3",
      }
    }
  }
}

Hex values

Color 1#8B2C0F

Color 2#C15523

Color 3#E87A46

Color 4#FBB27C

Color 5#FFD8A3

Accessibility

Contrast checker

1.9:1Fail

3:1Fail

4.8:1AA

6.3:1AA

1.9:1Fail

1.6:1Fail

2.6:1Fail

3.4:1AA18

3:1Fail

1.6:1Fail

2.1:1Fail

4.8:1AA

2.6:1Fail

1.6:1Fail

1.3:1Fail

6.3:1AA

3.4:1AA18

2.1:1Fail

1.3:1Fail

Similar palettes

More like Spiced Autumn Air

Spiced Autumn Air

See it in context.

Ready when you are.

Built with Spiced Autumn Air.

How to use Spiced Autumn Air

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Crisp Air

Spiced Glow

Earthy Comfort

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Spiced Autumn Air