Back to palettes

Palette

Autumn Spice Hearth

Comforting and rich, these hues evoke the warmth and aroma of spices by an autumn hearth.

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

#F5E5D5#D2A679#A97D5B#7C5C42#533B2B

Palette guide

How to use Autumn Spice Hearth

Overview

The Autumn Spice Hearth palette offers comforting and rich hues, evoking the warmth and aroma of spices by an autumn hearth. It begins with a very light cream (#F5E5D5) for an airy base, transitioning through a warm medium brown (#D2A679) to a rich caramel brown (#A97D5B). Deeper tones like a robust dark brown (#7C5C42) and a profound reddish-brown (#533B2B) provide essential grounding and depth. This palette is exceptionally useful for designers and developers aiming to create projects that exude warmth, natural comfort, and rustic charm. From cozy website themes and comforting brand identities to elegant packaging and inviting digital illustrations, these hex codes offer a versatile range for creating visually appealing and emotionally resonant experiences.

Best used for

  • Cozy brand identity and packaging
  • Rustic website and blog design
  • Food and beverage marketing
  • Autumn-themed event invitations
  • Interior design concepts for cafes
  • Digital illustrations with natural warmth

Suggested color roles

primary

Utilize #7C5C42 as a primary color for strong foundational elements or significant content sections, conveying warmth and stability.

secondary

Employ #A97D5B for secondary headings or important content blocks, adding a rich, inviting caramel tone.

accent

Highlight interactive elements or key information with #D2A679 to provide a soft, yet noticeable accent.

background

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

text

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

Accessibility notes

  • Ensure sufficient contrast between #533B2B text and #F5E5D5 or #D2A679 backgrounds for WCAG AA compliance.
  • Avoid using #D2A679 text on #F5E5D5 backgrounds without careful contrast checking due to similar luminosity.
  • Test color combinations for users with color vision deficiencies, especially within the brown-beige spectrum.
  • Provide clear visual cues beyond color for interactive states, particularly between #A97D5B and #D2A679.

Recommended combinations

Hearth Ground

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

#533B2B · #7C5C42 · #F5E5D5

Spice Warmth

Ideal for inviting content blocks, subtle gradients, or graphic elements that exude comfort.

#A97D5B · #D2A679 · #7C5C42

Light & Rich

Perfect for a light, airy background with deep text and a rich supporting color, suitable for blog posts or product descriptions.

#F5E5D5 · #533B2B · #A97D5B

CSS variables

:root {
  --autumn-spice-hearth-2-1: #F5E5D5;
  --autumn-spice-hearth-2-2: #D2A679;
  --autumn-spice-hearth-2-3: #A97D5B;
  --autumn-spice-hearth-2-4: #7C5C42;
  --autumn-spice-hearth-2-5: #533B2B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "autumn-spice-hearth-2": {
        1: "#F5E5D5",
        2: "#D2A679",
        3: "#A97D5B",
        4: "#7C5C42",
        5: "#533B2B",
      }
    }
  }
}

Related searches

autumn spice color palettecozy hearth schemewarm brown beige hexseasonal comfort designnatural harvest colors

Palette colors

Hex values

Color 1#F5E5D5
·
Color 2#D2A679
·
Color 3#A97D5B
·
Color 4#7C5C42
·
Color 5#533B2B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3:1Fail
4.9:1AA
8.4:1AAA
2
1.8:1Fail
1.6:1Fail
2.7:1Fail
4.7:1AA
3
3:1Fail
1.6:1Fail
1.7:1Fail
2.8:1Fail
4
4.9:1AA
2.7:1Fail
1.7:1Fail
1.7:1Fail
5
8.4:1AAA
4.7:1AA
2.8:1Fail
1.7:1Fail

Similar palettes

More like Autumn Spice Hearth

View all warm
Autumn Chai Warmth
Autumn Hearth Spice
Autumn Spice Blend
Autumn Spice Hearth
Autumn Spiced Brew
Autumn Spiced Pumpkin