Palette

Autumn Hearth Glow

Warm and inviting, like the comforting glow 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 Autumn 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 Autumn Hearth Glow.

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

Data visualization

#5D3F37#8D6E63#BCAAA4#D7CCC8#EFEBE9

Palette guide

How to use Autumn Hearth Glow

Overview

The Autumn Hearth Glow palette is warm and inviting, like the comforting glow of a crackling fire on a crisp autumn evening. This natural collection offers designers and developers a serene range of sophisticated browns and beiges, perfect for creating cozy and elegant experiences. Featuring deep #5D3F37, rich #8D6E63, soft #BCAAA4, light #D7CCC8, and near-white #EFEBE9, this palette provides versatility. Its subtle progression from dark to light creates a soothing visual flow, ideal for projects that aim to convey refined comfort, minimalist warmth, or a quiet, autumnal elegance, perfect for luxury or tranquil themes.

Best used for

luxury home goods branding
minimalist interior design concepts
high-end fashion websites
spa and wellness marketing
elegant product packaging
autumn wedding stationery

Suggested color roles

primary

#5D3F37 - A deep, sophisticated brown, excellent for foundational elements, large headers, or backgrounds that establish richness and depth.

secondary

#8D6E63 - A warm, inviting mid-brown, perfect for supporting content blocks, navigation, or as a strong, earthy base for lighter text.

accent

#BCAAA4 - A soft, muted beige-brown, ideal for subtle highlights, delicate typography, or as a gentle separating element.

background

#EFEBE9 - A very light, warm off-white, provides a clean and airy backdrop, ensuring excellent readability for darker text and a sense of spaciousness.

text

#5D3F37 - For primary body text on light backgrounds like #EFEBE9 or #D7CCC8, offering superb readability and a refined, coherent tone.

Accessibility notes

Ensure #5D3F37 or #8D6E63 text on #EFEBE9 or #D7CCC8 backgrounds meets WCAG AAA contrast standards.
Avoid using #BCAAA4 or #D7CCC8 for small text directly on #EFEBE9 due to very low contrast.
For critical information, stick to the darkest colors (#5D3F37, #8D6E63) for text against the lightest backgrounds.
White text on #5D3F37 or #8D6E63 provides excellent contrast for headlines and prominent elements.

Recommended combinations

Refined Comfort

Creates a sophisticated, minimalist look, perfect for elegant branding or clean website layouts.

#5D3F37 · #8D6E63 · #EFEBE9

Soft Transition

Ideal for subtle gradients, layered UI elements, or backgrounds that require a gentle, harmonious flow.

#8D6E63 · #BCAAA4 · #D7CCC8

Warm Elegance

Offers a light, airy feel with a grounding dark element, excellent for highlighting content against a soft backdrop.

#BCAAA4 · #EFEBE9 · #5D3F37

CSS variables

:root {
  --autumn-hearth-glow-2-1: #5D3F37;
  --autumn-hearth-glow-2-2: #8D6E63;
  --autumn-hearth-glow-2-3: #BCAAA4;
  --autumn-hearth-glow-2-4: #D7CCC8;
  --autumn-hearth-glow-2-5: #EFEBE9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "autumn-hearth-glow-2": {
        1: "#5D3F37",
        2: "#8D6E63",
        3: "#BCAAA4",
        4: "#D7CCC8",
        5: "#EFEBE9",
      }
    }
  }
}

Hex values

Color 1#5D3F37

Color 2#8D6E63

Color 3#BCAAA4

Color 4#D7CCC8

Color 5#EFEBE9

Accessibility

Contrast checker

2:1Fail

4.2:1AA18

6:1AA

7.9:1AAA

2:1Fail

2.1:1Fail

2.9:1Fail

3.9:1AA18

4.2:1AA18

2.1:1Fail

1.4:1Fail

1.9:1Fail

6:1AA

2.9:1Fail

1.4:1Fail

1.3:1Fail

7.9:1AAA

3.9:1AA18

1.9:1Fail

1.3:1Fail

Similar palettes

More like Autumn Hearth Glow

View all Warm

Cozy Cabin Lumber

Rustic Bakery Warmth

Spiced Bakery Comfort

Autumn Amber Cascade

Autumn Leaf Cascade

Autumn Leaf Fall