Palette

Spiced Autumn Hearth

A cozy blend of deep reds and rich oranges, reminiscent of warm spices and a crackling autumn fire.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B0000#B22222#CD5C5C#FFBF00#8B4513

Palette guide

How to use Spiced Autumn Hearth

Overview

The "Spiced Autumn Hearth" palette ignites designs with its intense and cozy blend of deep reds, fiery oranges, and warm browns. Featuring a powerful dark red #8B0000, a vibrant brick red #B22222, and a softer Indian red #CD5C5C, this collection evokes the comforting glow of a crackling fire. It's perfectly complemented by a bright, optimistic golden yellow #FFBF00 and a rich saddle brown #8B4513. Designers can leverage this palette to create branding that feels robust and inviting, or interfaces that exude warmth and energy. Developers will find these hex codes highly effective for themes requiring a strong, passionate, yet comforting autumnal presence, ideal for engaging user experiences.

Best used for

Bold autumnal branding and marketing
Cozy cafe or restaurant interior design themes
Seasonal product packaging, especially for drinks or foods
Event promotions for fall festivals or holidays
Digital interfaces needing a warm and energetic feel
Editorial content focused on comfort, home, or tradition

Suggested color roles

primary

#8B0000 - A deep, dramatic dark red, excellent for strong brand statements, main headers, or impactful call-to-action elements.

secondary

#B22222 - A rich, vibrant brick red, perfect for subheadings, important links, or graphical elements that need to draw attention.

accent

#FFBF00 - A bright, sunny golden yellow, providing a lively contrast and ideal for highlights, interactive elements, or small decorative flourishes.

background

#CD5C5C - A softer, muted red, suitable for backgrounds where a warm, subtle tint is desired, or for softer UI panels.

text

#8B0000 (or a very dark charcoal like #222222) - For primary text against lighter elements, this deep red offers strong character and readability. A dark charcoal can also provide classic contrast.

Accessibility notes

Ensure #8B0000 text on #CD5C5C or #FFBF00 backgrounds provides adequate contrast for readability.
#CD5C5C used as text on light backgrounds will likely fail WCAG contrast ratios; use for backgrounds or large decorative elements.
Reserve #FFBF00 for accent text or large titles where its vibrancy can shine without readability issues.
Provide strong visual focus indicators for interactive elements using #B22222 or #8B0000.

Recommended combinations

Fiery Core

Ideal for high-impact headers, vibrant call-to-actions, or striking visual branding elements.

#8B0000 · #B22222 · #FFBF00

Warm Embrace

Excellent for backgrounds, secondary information blocks, or designs requiring a softer, yet still warm, touch.

#CD5C5C · #8B4513 · #B22222

Golden Glow

Best for highlighting key features, adding celebratory accents, or creating warm, inviting visual metaphors.

#FFBF00 · #8B4513 · #8B0000

CSS variables

:root {
  --spiced-autumn-hearth-1: #8B0000;
  --spiced-autumn-hearth-2: #B22222;
  --spiced-autumn-hearth-3: #CD5C5C;
  --spiced-autumn-hearth-4: #FFBF00;
  --spiced-autumn-hearth-5: #8B4513;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-autumn-hearth": {
        1: "#8B0000",
        2: "#B22222",
        3: "#CD5C5C",
        4: "#FFBF00",
        5: "#8B4513",
      }
    }
  }
}

Hex values

Color 1#8B0000

Color 2#B22222

Color 3#CD5C5C

Color 4#FFBF00

Color 5#8B4513

Accessibility

Contrast checker

1.5:1Fail

2.5:1Fail

6.1:1AA

1.4:1Fail

1.5:1Fail

1.7:1Fail

4:1AA18

1.1:1Fail

2.5:1Fail

1.7:1Fail

2.4:1Fail

1.8:1Fail

6.1:1AA

4:1AA18

2.4:1Fail

4.3:1AA18

1.4:1Fail

1.1:1Fail

1.8:1Fail

4.3:1AA18

Similar palettes

More like Spiced Autumn Hearth