Palette

Autumn Harvest Hearth

Evokes the comforting warmth of a harvest celebration by a crackling fireplace.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6A3A00#9B5D1A#C7823F#E6AF6F#FAD79A

Palette guide

How to use Autumn Harvest Hearth

Overview

The Autumn Harvest Hearth palette evokes the comforting warmth of a harvest celebration by a crackling fireplace. This inviting collection of warm browns and golden ambers offers designers and developers a rich, rustic foundation for their projects. Featuring deep brown #6A3A00, a cozier #9B5D1A, a welcoming #C7823F, and softer tones like #E6AF6F and #FAD79A, this palette is ideal for creating a sense of coziness and natural elegance. Its harmonious blend ensures a gentle visual flow, perfect for designs that aim to feel grounded, traditional, and welcoming. Use these hues to infuse warmth into digital and physical spaces.

Best used for

rustic branding
cozy interior design concepts
fall marketing campaigns
traditional website themes
seasonal event invitations
packaging for artisanal goods

Suggested color roles

primary

#6A3A00 - A deep, grounding brown, excellent for main structural elements, headers, or large background areas to establish a rich, stable foundation.

secondary

#9B5D1A - A warm, inviting mid-brown, perfect for supporting content blocks, navigation elements, or as a contrasting base for lighter text.

accent

#C7823F - A vibrant, earthy orange-brown, ideal for calls to action, important highlights, or decorative flourishes that draw the eye.

background

#FAD79A - A soft, creamy golden hue, provides a gentle, warm backdrop for content, ensuring readability and a light, airy feel.

text

#6A3A00 - For primary body text on light backgrounds like #FAD79A, or a dark charcoal/black for maximum readability on lighter palette colors.

Accessibility notes

Ensure sufficient contrast when pairing #6A3A00 or #9B5D1A with #FAD79A for text, meeting WCAG AA standards.
Lighter hues like #E6AF6F may require darker text (e.g., #6A3A00) to maintain readability, especially for smaller fonts.
Avoid placing #C7823F text directly on #E6AF6F backgrounds for critical information due to potentially low contrast.
Use #FAD79A as a background with #6A3A00 or #9B5D1A for optimal text contrast and visual comfort.

Recommended combinations

Earthy Depth

Ideal for creating a grounded and sophisticated look, with deep browns providing structure and a light golden hue for contrast.

#6A3A00 · #9B5D1A · #FAD79A

Cozy Accent

Perfect for highlighting key information or adding warmth to user interfaces without overwhelming the design.

#9B5D1A · #C7823F · #E6AF6F

Soft Glow

Excellent for subtle gradients, background textures, or elements requiring a gentle, inviting presence.

#C7823F · #E6AF6F · #FAD79A

CSS variables

:root {
  --autumn-harvest-hearth-1: #6A3A00;
  --autumn-harvest-hearth-2: #9B5D1A;
  --autumn-harvest-hearth-3: #C7823F;
  --autumn-harvest-hearth-4: #E6AF6F;
  --autumn-harvest-hearth-5: #FAD79A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "autumn-harvest-hearth": {
        1: "#6A3A00",
        2: "#9B5D1A",
        3: "#C7823F",
        4: "#E6AF6F",
        5: "#FAD79A",
      }
    }
  }
}

Hex values

Color 1#6A3A00

Color 2#9B5D1A

Color 3#C7823F

Color 4#E6AF6F

Color 5#FAD79A

Accessibility

Contrast checker

1.8:1Fail

3:1AA18

4.8:1AA

6.9:1AA

1.8:1Fail

1.7:1Fail

2.7:1Fail

3.8:1AA18

3:1AA18

1.7:1Fail

1.6:1Fail

2.3:1Fail

4.8:1AA

2.7:1Fail

1.6:1Fail

1.4:1Fail

6.9:1AA

3.8:1AA18

2.3:1Fail

1.4:1Fail

Similar palettes

More like Autumn Harvest Hearth