Palette

Autumn Hearth Fire

Inviting yellows and oranges that embody the comforting, spicy aroma of gingerbread and ginger tea.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#BF6E2B#E09C5A#F7D18C#8C4A1A#D4BB80

Palette guide

How to use Autumn Hearth Fire

Overview

The Autumn Hearth Fire palette features inviting yellows and oranges that embody the comforting, spicy aroma of gingerbread and ginger tea. This natural and warm collection offers designers and developers a luminous range of hues, perfect for creating cozy and appetizing experiences. With warm #BF6E2B, vibrant #E09C5A, bright #F7D18C, deep #8C4A1A, and soft #D4BB80, this palette is versatile. Its gentle progression from deep spice to glowing amber creates a soothing visual flow, ideal for projects that aim to convey warmth, comfort, and the delightful essence of autumnal flavors, perfect for food-related or cozy themes.

Best used for

bakery and cafe branding
seasonal food blogs
cozy home goods websites
fall recipe cards
packaging for spiced products
warm event invitations

Suggested color roles

primary

#8C4A1A - A deep, grounding spice brown, excellent for foundational elements, large text, or backgrounds that provide stability and warmth.

secondary

#BF6E2B - A rich, inviting orange-brown, perfect for supporting content blocks, navigation, or as a strong, earthy base for lighter accents.

accent

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

background

#F7D18C - A soft, luminous golden yellow, provides a gentle and welcoming backdrop, ensuring good readability for darker text.

text

#8C4A1A - For primary body text on light backgrounds like #F7D18C or #D4BB80, offering excellent readability and maintaining the palette's warm, earthy tone.

Accessibility notes

Ensure #8C4A1A or #BF6E2B text on #F7D18C or #D4BB80 backgrounds meets WCAG AA contrast standards.
Avoid using #E09C5A for small text directly on #F7D18C due to potential low contrast.
For critical information, use the darkest color (#8C4A1A) for text against the lightest background (#F7D18C).
Consider a dark charcoal or black for text on #F7D18C if maximum contrast is required, especially for small font sizes.

Recommended combinations

Gingerbread Glow

Creates an inviting, appetizing look, perfect for food-related content or cozy branding.

#8C4A1A · #BF6E2B · #F7D18C

Spiced Amber

Ideal for a warm, layered effect, suitable for gradients or elements that require a smooth transition of light.

#BF6E2B · #E09C5A · #D4BB80

Hearthside Depth

Offers a grounded feel with a luminous pop, excellent for showcasing products or key features against a soft base.

#8C4A1A · #D4BB80 · #E09C5A

CSS variables

:root {
  --autumn-hearth-fire-1: #BF6E2B;
  --autumn-hearth-fire-2: #E09C5A;
  --autumn-hearth-fire-3: #F7D18C;
  --autumn-hearth-fire-4: #8C4A1A;
  --autumn-hearth-fire-5: #D4BB80;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "autumn-hearth-fire": {
        1: "#BF6E2B",
        2: "#E09C5A",
        3: "#F7D18C",
        4: "#8C4A1A",
        5: "#D4BB80",
      }
    }
  }
}

Hex values

Color 1#BF6E2B

Color 2#E09C5A

Color 3#F7D18C

Color 4#8C4A1A

Color 5#D4BB80

Accessibility

Contrast checker

1.7:1Fail

2.6:1Fail

1.8:1Fail

2:1Fail

1.7:1Fail

1.6:1Fail

2.9:1Fail

1.2:1Fail

2.6:1Fail

1.6:1Fail

4.6:1AA

1.3:1Fail

1.8:1Fail

2.9:1Fail

4.6:1AA

3.6:1AA18

2:1Fail

1.2:1Fail

1.3:1Fail

3.6:1AA18

Similar palettes

More like Autumn Hearth Fire