Palette

Spiced Harvest Hearth

A comforting array of colors that embodies the warmth and richness of an autumn gathering.

WarmNatural5 colors

More Warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF8C00#DC143C#8B4513#FFD700#A0522D

Palette guide

How to use Spiced Harvest Hearth

Overview

The Spiced Harvest Hearth palette embodies the warmth and richness of an autumn gathering, offering a comforting array of hues. With the vibrant #FF8C00, bold #DC143C, grounding #8B4513, sunny #FFD700, and earthy #A0522D, this scheme perfectly balances energy with coziness. Designers and developers can utilize these colors to create inviting and memorable experiences, from rustic branding to seasonal digital content. Its blend of fiery oranges, deep reds, and warm browns ensures a visual narrative that is both lively and deeply comforting, ideal for projects focused on home and harvest.

Best used for

Cozy cafe and restaurant branding
Rustic home decor and interior design
Autumn wedding themes and invitations
Seasonal product lines and packaging
Blog headers and social media graphics for fall
Event signage for harvest festivals

Suggested color roles

primary

Use #FF8C00 as a vibrant and inviting primary color for calls to action, main headlines, or prominent design elements.

secondary

Employ #A0522D as a rich, grounding brown for supporting content, navigation, or as a stable background accent.

accent

Introduce #FFD700 as a bright, warm accent, perfect for highlights, interactive elements, or to add a touch of luminosity.

background

Utilize #8B4513 for deep, stable backgrounds or sections that require a strong, earthy foundation.

text

For dark backgrounds, #FFD700 or a crisp white provides excellent readability. On lighter backgrounds, #DC143C offers bold and legible text.

Accessibility notes

Ensure text on #FFD700 is sufficiently dark, using colors like #8B4513 or #A0522D for optimal contrast.
Avoid using #FF8C00 or #DC143C for small text on backgrounds with similar lightness values.
Verify that all interactive elements maintain adequate contrast against their backgrounds for usability.
Consider the visual impact of red (#DC143C) and orange (#FF8C00) together for users with color vision deficiencies.

Recommended combinations

Hearth Glow

Creates a warm, luminous effect, ideal for highlights, glowing elements, or subtle gradients.

#FF8C00 · #FFD700 · #DC143C

Rustic Depth

Provides a strong, earthy foundation, perfect for backgrounds, footers, or grounding visual elements.

#8B4513 · #A0522D · #DC143C

Spicy Warmth

Excellent for dynamic banners or layered designs that convey a vibrant yet comforting essence.

#DC143C · #FF8C00 · #A0522D

CSS variables

:root {
  --spiced-harvest-hearth-1: #FF8C00;
  --spiced-harvest-hearth-2: #DC143C;
  --spiced-harvest-hearth-3: #8B4513;
  --spiced-harvest-hearth-4: #FFD700;
  --spiced-harvest-hearth-5: #A0522D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-harvest-hearth": {
        1: "#FF8C00",
        2: "#DC143C",
        3: "#8B4513",
        4: "#FFD700",
        5: "#A0522D",
      }
    }
  }
}

Hex values

Color 1#FF8C00

Color 2#DC143C

Color 3#8B4513

Color 4#FFD700

Color 5#A0522D

Accessibility

Contrast checker

2.1:1Fail

3:1AA18

1.7:1Fail

2.4:1Fail

2.1:1Fail

1.4:1Fail

3.6:1AA18

1.1:1Fail

3:1AA18

1.4:1Fail

5.1:1AA

1.3:1Fail

1.7:1Fail

3.6:1AA18

5.1:1AA

4:1AA18

2.4:1Fail

1.1:1Fail

1.3:1Fail

4:1AA18

Similar palettes

More like Spiced Harvest Hearth

Harvest Sundown Hearth

Pumpkin Patch Glow

Warm Spice Harvest