Palette

Autumn Hearthside Glow

The comforting embrace of an autumn evening, warmed by the amber light and rustic comfort of a hearth.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Autumn Hearthside 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 Hearthside Glow.

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

Data visualization

#8B3A0D#D95E0D#F7931E#A4B49C#4F4B42

Palette guide

How to use Autumn Hearthside Glow

Overview

The Autumn Hearthside Glow palette captures the comforting embrace of an autumn evening, warmed by the amber light and rustic comfort of a hearth. This natural collection offers designers and developers a unique blend of deep oranges, a soft green, and an earthy brown, perfect for creating inviting and grounded experiences. Featuring robust #8B3A0D, vibrant #D95E0D, luminous #F7931E, calming #A4B49C, and deep #4F4B42, this palette provides versatility. Its combination of warm and cool tones creates a sophisticated balance, ideal for projects that aim to convey rustic elegance, natural tranquility, or autumnal warmth with a touch of modern earthiness.

Best used for

rustic home decor websites
boutique hotel branding
eco-friendly product packaging
fall event promotions with a twist
nature-inspired apparel marketing
sophisticated seasonal stationery

Suggested color roles

primary

#8B3A0D - A deep, robust burnt orange, excellent for foundational elements, large headers, or backgrounds that provide warmth and stability.

secondary

#4F4B42 - A deep, earthy charcoal-brown, perfect for supporting content blocks, navigation, or as a strong, grounding base.

accent

#F7931E - A vibrant, luminous amber, ideal for calls to action, important highlights, or decorative elements that add a cheerful glow.

background

#A4B49C - A soft, muted sage green, provides a calming and unique backdrop, allowing the warm oranges to truly pop.

text

#4F4B42 - For primary body text on light backgrounds like #A4B49C, offering excellent readability and a sophisticated, grounded tone.

Accessibility notes

Ensure #4F4B42 or #8B3A0D text on #A4B49C backgrounds meets WCAG AA contrast standards.
Avoid using #D95E0D or #F7931E for small text directly on #A4B49C due to potential low contrast.
For critical information, use the darkest color (#4F4B42) for text against the lightest background (#A4B49C).
White or a very light cream provides excellent contrast for text on #8B3A0D, #D95E0D, and #4F4B42.

Recommended combinations

Earthy Glow

Creates a striking, sophisticated contrast, perfect for branding that needs both warmth and a natural touch.

#4F4B42 · #F7931E · #A4B49C

Autumn Ember

Ideal for a vibrant, energetic gradient, suitable for hero sections or dynamic visual elements.

#8B3A0D · #D95E0D · #F7931E

Rustic Balance

Provides a unique blend of cool and warm, excellent for content blocks that require distinct separation and readability.

#A4B49C · #8B3A0D · #4F4B42

CSS variables

:root {
  --autumn-hearthside-glow-1: #8B3A0D;
  --autumn-hearthside-glow-2: #D95E0D;
  --autumn-hearthside-glow-3: #F7931E;
  --autumn-hearthside-glow-4: #A4B49C;
  --autumn-hearthside-glow-5: #4F4B42;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "autumn-hearthside-glow": {
        1: "#8B3A0D",
        2: "#D95E0D",
        3: "#F7931E",
        4: "#A4B49C",
        5: "#4F4B42",
      }
    }
  }
}

Hex values

Color 1#8B3A0D

Color 2#D95E0D

Color 3#F7931E

Color 4#A4B49C

Color 5#4F4B42

Accessibility

Contrast checker

2.1:1Fail

3.4:1AA18

3.5:1AA18

1.1:1Fail

2.1:1Fail

1.6:1Fail

1.7:1Fail

2.3:1Fail

3.4:1AA18

1.6:1Fail

1:1Fail

3.8:1AA18

3.5:1AA18

1.7:1Fail

1:1Fail

4:1AA18

1.1:1Fail

2.3:1Fail

3.8:1AA18

4:1AA18

Similar palettes

More like Autumn Hearthside Glow

Mellow Autumn Sunlight