Palette

Autumn Leaves Carpet

Rich, warm hues of a forest floor covered in fallen autumn leaves, a tapestry of nature's beauty.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B2D0E#CC4400#FF7700#FFB000#5A1E08

Palette guide

How to use Autumn Leaves Carpet

Overview

The Autumn Leaves Carpet palette offers a rich and deeply warm collection, perfectly mirroring the vibrant tapestry of a forest floor covered in fall foliage. Featuring a robust dark brown-orange (#8B2D0E) and a bold orange-red (#CC4400), it transitions into a bright orange (#FF7700) and a golden yellow-orange (#FFB000), all grounded by a very dark brown (#5A1E08). This palette is exceptionally useful for designers and developers aiming to evoke natural beauty, warmth, and abundance. From rustic website designs and inviting e-commerce platforms to seasonal illustrations and impactful branding, these hex codes provide a versatile range for creating visually rich and engaging experiences that celebrate the cozy spirit of autumn.

Best used for

Rustic website and blog design
Seasonal marketing materials
Nature-themed product packaging
Harvest festival promotions
Digital art and illustration
Cozy brand identity

Suggested color roles

primary

Utilize #8B2D0E as a deep, earthy primary color for foundational elements like navigation or background sections.

secondary

Employ #CC4400 for secondary headings or important content blocks, adding a strong, vibrant warmth.

accent

Highlight calls-to-action or key interactive elements with #FF7700 to ensure they pop with energetic appeal.

background

A subtle application of #FFB000 as a soft background can create an inviting glow, allowing darker elements to stand out.

text

For maximum readability, use #5A1E08 for body text on lighter backgrounds, or a crisp white on darker tones.

Accessibility notes

Ensure sufficient contrast between #5A1E08 text and #FFB000 background for WCAG AA compliance.
Avoid using #FF7700 or #FFB000 for small text on similarly light backgrounds due to potential readability issues.
Test color combinations for users with color vision deficiencies, especially with the orange-yellow spectrum.
When layering, ensure #CC4400 and #FF7700 have enough differentiation for critical interactive elements.

Recommended combinations

Forest Floor

Creates a deep, grounded base with a contrasting, bright accent, perfect for footers or strong headers.

#5A1E08 · #8B2D0E · #FFB000

Vibrant Glow

Ideal for energetic calls-to-action, festive banners, or graphic elements that need to stand out boldly.

#CC4400 · #FF7700 · #8B2D0E

Warm Highlight

Use for a warm, inviting background with very dark text and a vibrant supporting color, suitable for content cards.

#FFB000 · #5A1E08 · #CC4400

CSS variables

:root {
  --autumn-leaves-carpet-1: #8B2D0E;
  --autumn-leaves-carpet-2: #CC4400;
  --autumn-leaves-carpet-3: #FF7700;
  --autumn-leaves-carpet-4: #FFB000;
  --autumn-leaves-carpet-5: #5A1E08;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "autumn-leaves-carpet": {
        1: "#8B2D0E",
        2: "#CC4400",
        3: "#FF7700",
        4: "#FFB000",
        5: "#5A1E08",
      }
    }
  }
}

Hex values

Color 1#8B2D0E

Color 2#CC4400

Color 3#FF7700

Color 4#FFB000

Color 5#5A1E08

Accessibility

Contrast checker

1.8:1Fail

3.2:1AA18

4.6:1AA

1.5:1Fail

1.8:1Fail

2.6:1Fail

2.7:1Fail

3.2:1AA18

1.8:1Fail

1.5:1Fail

4.9:1AA

4.6:1AA

2.6:1Fail

1.5:1Fail

7.1:1AAA

1.5:1Fail

2.7:1Fail

4.9:1AA

7.1:1AAA

Similar palettes

More like Autumn Leaves Carpet

Autumn Leaves Carpet

See it in context.

Ready when you are.

Built with Autumn Leaves Carpet.

How to use Autumn Leaves Carpet

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Forest Floor

Vibrant Glow

Warm Highlight

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Autumn Leaves Carpet