Palette

Cozy Spiced Hearth

A comforting palette of warm browns and oranges, like a cozy autumn hearth.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#CD853F#D2B48C#F5DEB3#FFF8DC

Palette guide

How to use Cozy Spiced Hearth

Overview

The Cozy Spiced Hearth palette is a comforting collection of warm browns and oranges, perfectly reminiscent of a cozy autumn hearth. It ranges from the rich #8B4513 to the soft, creamy #FFF8DC, offering a versatile spectrum for designers and developers. #CD853F provides a vibrant, yet earthy mid-tone, while #D2B48C introduces a sophisticated beige. The delicate #F5DEB3 is ideal for gentle highlights. This palette excels in creating inviting, natural, and harmonious designs, making it perfect for autumnal themes, home and lifestyle branding, or digital interfaces that aim to evoke a sense of warmth, comfort, and traditional charm.

Best used for

Autumn and Thanksgiving holiday marketing
Branding for artisanal bread, coffee, or baked goods
Cozy interior design for living areas or kitchens
Food photography backdrops and styling
Lifestyle blogs focusing on home and comfort
E-commerce sites for natural or handmade products

Suggested color roles

primary

Use #8B4513 as a strong primary for headlines or main content blocks, establishing a grounded, warm presence.

secondary

Employ #CD853F for calls to action, important details, or visual emphasis, bringing in a vibrant, spiced energy.

accent

Utilize #F5DEB3 or #FFF8DC as soft, creamy accents for highlights, subtle backgrounds, or interactive elements.

background

The lightest shade, #FFF8DC, provides a warm, inviting background. For a mid-tone background, #D2B48C works well.

text

On light backgrounds, #8B4513 or a dark charcoal ensures excellent readability. For dark backgrounds, white or #FFF8DC is ideal.

Accessibility notes

Ensure adequate contrast when using #F5DEB3 with #FFF8DC for text or critical UI elements.
Text on #8B4513 will require a very light color (e.g., white or #FFF8DC) for legibility.
Avoid low-contrast pairings like #D2B48C text on #F5DEB3 backgrounds for small fonts.
Always test contrast ratios with accessibility tools to meet WCAG 2.1 AA standards for readability.

Recommended combinations

Hearthside Blend

Creates a grounded, warm, and inviting base for natural and comforting designs.

#8B4513 · #D2B48C · #FFF8DC

Spiced Glow

For vibrant accents and soft highlights, anchored by a rich, earthy brown.

#CD853F · #F5DEB3 · #8B4513

Creamy Comfort

Ideal for soft, subtle backgrounds and elegant layering in a warm, minimalist design.

#D2B48C · #F5DEB3 · #FFF8DC

CSS variables

:root {
  --cozy-spiced-hearth-1: #8B4513;
  --cozy-spiced-hearth-2: #CD853F;
  --cozy-spiced-hearth-3: #D2B48C;
  --cozy-spiced-hearth-4: #F5DEB3;
  --cozy-spiced-hearth-5: #FFF8DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cozy-spiced-hearth": {
        1: "#8B4513",
        2: "#CD853F",
        3: "#D2B48C",
        4: "#F5DEB3",
        5: "#FFF8DC",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#CD853F

Color 3#D2B48C

Color 4#F5DEB3

Color 5#FFF8DC

Accessibility

Contrast checker

2.4:1Fail

3.6:1AA18

5.4:1AA

6.7:1AA

2.4:1Fail

1.5:1Fail

2.3:1Fail

2.8:1Fail

3.6:1AA18

1.5:1Fail

1.9:1Fail

5.4:1AA

2.3:1Fail

1.5:1Fail

1.2:1Fail

6.7:1AA

2.8:1Fail

1.9:1Fail

1.2:1Fail

Similar palettes

More like Cozy Spiced Hearth

Cozy Spiced Hearth

See it in context.

Ready when you are.

Built with Cozy Spiced Hearth.

How to use Cozy Spiced Hearth

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Hearthside Blend

Spiced Glow

Creamy Comfort

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cozy Spiced Hearth