Palette

Autumn Spice Hearth

A comforting and rich palette inspired by the warm aromas and earthy tones of an autumn spice blend.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Autumn Spice Hearth 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 Spice Hearth.

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

Data visualization

#8B4513#A0522D#CD853F#D2B48C#F5DEB3

Palette guide

How to use Autumn Spice Hearth

Overview

The Autumn Spice Hearth palette is a comforting and rich collection, inspired by the warm aromas and earthy tones of an autumn spice blend. It features a deep saddle brown (#8B4513) and a rich russet (#A0522D), providing robust depth. A warm peru (#CD853F) adds a comforting glow, while a light tan (#D2B48C) and a soft wheat (#F5DEB3) offer delicate, creamy highlights. This palette is exceptionally useful for designers and developers aiming to create projects with natural warmth, rustic charm, and an inviting, cozy aesthetic. From seasonal marketing and nature-inspired branding to engaging digital interfaces and charming print materials, these hex codes provide a versatile range for visually appealing experiences.

Best used for

Gourmet food and beverage branding
Autumnal event invitations
Rustic chic e-commerce websites
Cozy cafe or restaurant branding
Digital illustrations with earthy tones
Seasonal home decor mockups

Suggested color roles

primary

Utilize #8B4513 as a grounding primary color for strong foundational elements or significant content sections, conveying rustic stability.

secondary

Employ #A0522D for secondary headings or important content blocks, adding a warm and inviting russet hue.

accent

Highlight interactive elements or key information with #CD853F to ensure they pop with energetic, golden appeal.

background

A light, expansive background of #F5DEB3 creates a clean, warm canvas, allowing darker elements to stand out beautifully.

text

For optimal readability, use #8B4513 or a dark charcoal for body text on lighter backgrounds, or a crisp white on deeper hues.

Accessibility notes

Ensure sufficient contrast between #8B4513 text and #F5DEB3 background for WCAG AA compliance.
Avoid using #D2B48C or #CD853F for small text on #F5DEB3 backgrounds due to potential readability issues.
Test color combinations for users with color vision deficiencies, especially with the brown-orange-beige spectrum.
Provide clear visual cues beyond color for interactive states, particularly between #A0522D and #CD853F.

Recommended combinations

Hearth Ground

Creates a deep, grounded base with a rustic accent and soft highlight, excellent for footers or natural headers.

#A0522D · #8B4513 · #F5DEB3

Spice Warmth

Ideal for inviting content blocks, subtle gradients, or graphic elements that evoke warm spices.

#CD853F · #D2B48C · #A0522D

Earthy Cream

Use for a light, inviting background with deep text and a warm supporting color, suitable for content cards or alerts.

#F5DEB3 · #8B4513 · #CD853F

CSS variables

:root {
  --autumn-spice-hearth-1: #8B4513;
  --autumn-spice-hearth-2: #A0522D;
  --autumn-spice-hearth-3: #CD853F;
  --autumn-spice-hearth-4: #D2B48C;
  --autumn-spice-hearth-5: #F5DEB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "autumn-spice-hearth": {
        1: "#8B4513",
        2: "#A0522D",
        3: "#CD853F",
        4: "#D2B48C",
        5: "#F5DEB3",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#A0522D

Color 3#CD853F

Color 4#D2B48C

Color 5#F5DEB3

Accessibility

Contrast checker

1.3:1Fail

2.4:1Fail

3.6:1AA18

5.4:1AA

1.3:1Fail

1.9:1Fail

2.8:1Fail

4.3:1AA18

2.4:1Fail

1.9:1Fail

1.5:1Fail

2.3:1Fail

3.6:1AA18

2.8:1Fail

1.5:1Fail

5.4:1AA

4.3:1AA18

2.3:1Fail

1.5:1Fail

Similar palettes

More like Autumn Spice Hearth

Autumn Spice Hearth

See it in context.

Ready when you are.

Built with Autumn Spice Hearth.

How to use Autumn Spice Hearth

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Hearth Ground

Spice Warmth

Earthy Cream

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Autumn Spice Hearth