Palette

Autumnal Hearth Glow

A comforting palette evoking the warmth of a crackling fire on a crisp autumn evening.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Autumnal Hearth Glow 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 Autumnal Hearth Glow.

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

Data visualization

#8B4513#CD853F#D2691E#FFDEAD#A0522D

Palette guide

How to use Autumnal Hearth Glow

Overview

The Autumnal Hearth Glow palette offers a comforting collection, evoking the warmth of a crackling fire on a crisp autumn evening. It features a deep saddle brown (#8B4513) and a warm peru (#CD853F), providing rich depth. A vibrant chocolate orange (#D2691E) adds energetic warmth, while a light antique white (#FFDEAD) offers a delicate, creamy highlight. A deep russet (#A0522D) provides essential grounding. 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

Cozy brand identity and packaging
Rustic website and blog design
Autumnal event invitations
Interior design concepts for homes
Digital illustrations of fireplaces
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 #D2691E to ensure they pop with energetic appeal.

background

A light, expansive background of #FFDEAD 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 #FFDEAD background for WCAG AA compliance.
Avoid using #CD853F or #D2691E for small text on #FFDEAD backgrounds due to potential readability issues.
Test color combinations for users with color vision deficiencies, especially with the brown-orange spectrum.
Provide clear visual cues beyond color for interactive states, particularly between #CD853F and #D2691E.

Recommended combinations

Hearth Ground

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

#A0522D · #8B4513 · #FFDEAD

Warm Glow

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

#CD853F · #D2691E · #8B4513

Earthy Cream

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

#FFDEAD · #A0522D · #CD853F

CSS variables

:root {
  --autumnal-hearth-glow-1: #8B4513;
  --autumnal-hearth-glow-2: #CD853F;
  --autumnal-hearth-glow-3: #D2691E;
  --autumnal-hearth-glow-4: #FFDEAD;
  --autumnal-hearth-glow-5: #A0522D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "autumnal-hearth-glow": {
        1: "#8B4513",
        2: "#CD853F",
        3: "#D2691E",
        4: "#FFDEAD",
        5: "#A0522D",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#CD853F

Color 3#D2691E

Color 4#FFDEAD

Color 5#A0522D

Accessibility

Contrast checker

2.4:1Fail

2:1Fail

5.5:1AA

1.3:1Fail

2.4:1Fail

1.2:1Fail

2.3:1Fail

1.9:1Fail

2:1Fail

1.2:1Fail

2.8:1Fail

1.5:1Fail

5.5:1AA

2.3:1Fail

2.8:1Fail

4.4:1AA18

1.3:1Fail

1.9:1Fail

1.5:1Fail

4.4:1AA18

Similar palettes

More like Autumnal Hearth Glow

View all warm

Cinnamon Spiced

Spice Merchant's Harvest