Palette

Spiced Cinnamon Hearth

Rich browns and inviting oranges, reminiscent of warm autumn spices by a glowing fireplace.

warmcalm5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5A2E2E#8E3200#D05200#F8B036#FFEECF

Palette guide

How to use Spiced Cinnamon Hearth

Overview

The Spiced Cinnamon Hearth palette evokes the comforting glow of a fireplace with its rich, deep reds and vibrant oranges. Anchored by profound hues like #5A2E2E and #8E3200, it transitions to the fiery #D05200 and bright #F8B036, culminating in the soft, creamy #FFEECF. This collection is perfect for designs aiming for a sense of warmth, tradition, and robust energy. It's particularly effective for seasonal themes, branding that seeks to convey coziness and quality, or any project requiring a palette that feels both grounded and spirited, offering a strong visual impact with its inviting tones.

Best used for

Holiday and autumn seasonal marketing campaigns
Restaurant and culinary branding, especially for comfort food
Rustic lodge or cabin interior design themes
E-commerce sites for artisanal goods or handcrafted products
Branding for distilleries or craft breweries
Event design for cozy, intimate gatherings

Suggested color roles

primary

Utilize #5A2E2E as a strong, sophisticated anchor for main navigation, large text blocks, or primary branding elements.

secondary

Apply #8E3200 for subheadings, important links, or background sections that need a deep, warm presence.

accent

Leverage #D05200 to highlight calls-to-action, key features, or to add a dynamic burst of warmth and energy.

background

Use #FFEECF for main content areas to provide a light, inviting canvas that ensures readability for darker text.

text

For body text on light backgrounds, #5A2E2E provides excellent contrast and maintains the palette's rich feel.

Accessibility notes

Ensure sufficient contrast between dark colors like #5A2E2E and light text like #FFEECF.
Avoid placing #F8B036 text directly on #D05200 backgrounds due to potential low contrast.
Pair #FFEECF with #8E3200 for headings or important information to guarantee readability.
For smaller text, favor high contrast combinations such as black text on #FFEECF or #FFEECF text on #5A2E2E.

Recommended combinations

Fireside Glow

Creates a dramatic yet cozy atmosphere, ideal for festive or luxury branding.

#5A2E2E · #D05200 · #FFEECF

Spiced Amber

Perfect for a warm, inviting digital interface or product packaging.

#8E3200 · #F8B036 · #FFEECF

Deep Hearth

Offers a sophisticated, grounded combination suitable for corporate or high-end designs.

#5A2E2E · #8E3200 · #FFEECF

CSS variables

:root {
  --spiced-cinnamon-hearth-1: #5A2E2E;
  --spiced-cinnamon-hearth-2: #8E3200;
  --spiced-cinnamon-hearth-3: #D05200;
  --spiced-cinnamon-hearth-4: #F8B036;
  --spiced-cinnamon-hearth-5: #FFEECF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-cinnamon-hearth": {
        1: "#5A2E2E",
        2: "#8E3200",
        3: "#D05200",
        4: "#F8B036",
        5: "#FFEECF",
      }
    }
  }
}

Hex values

Color 1#5A2E2E

Color 2#8E3200

Color 3#D05200

Color 4#F8B036

Color 5#FFEECF

Accessibility

Contrast checker

1.4:1Fail

2.6:1Fail

6:1AA

9.9:1AAA

1.4:1Fail

1.9:1Fail

4.3:1AA18

7.1:1AAA

2.6:1Fail

1.9:1Fail

2.3:1Fail

3.8:1AA18

6:1AA

4.3:1AA18

2.3:1Fail

1.6:1Fail

9.9:1AAA

7.1:1AAA

3.8:1AA18

1.6:1Fail

Similar palettes

More like Spiced Cinnamon Hearth

View all warm

Autumn Hearth Comfort