Palette

Cozy Spice Hearth

Warm and inviting, like the aromatic spices of autumn baking and crackling fires.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#CD5C08#FFDAB9#D2B48C#654321

Palette guide

How to use Cozy Spice Hearth

Overview

The Cozy Spice Hearth palette is a warm and inviting collection, perfectly capturing the aromatic spices of autumn baking and the comforting glow of crackling fires. Anchored by the deep, earthy #654321, it transitions to the vibrant #CD5C08 and the soft #FFDAB9. Designers and developers can leverage #8B4513 for rich, natural elements and #D2B48C for a sophisticated, neutral balance. This palette is excellent for creating designs that evoke a sense of homeliness, warmth, and natural elegance, making it ideal for food-related branding, autumnal themes, or cozy digital interfaces that aim to feel comforting and familiar.

Best used for

Autumnal marketing campaigns and seasonal promotions
Branding for coffee shops, bakeries, or spice companies
Rustic or farmhouse-style interior design
Food blog or recipe website aesthetics
Packaging for organic or handmade products
User interfaces for cooking or home management apps

Suggested color roles

primary

Use #8B4513 as a robust primary for large sections or headers, establishing warmth and a natural feel.

secondary

Employ #CD5C08 for calls to action or key information, adding a vibrant, energetic spice.

accent

Introduce #FFDAB9 as a soft, creamy accent for highlights, background textures, or subtle UI elements.

background

The light #FFDAB9 provides a warm, inviting background. For a deeper, grounding background, use #654321.

text

On light backgrounds, #654321 or a very dark charcoal ensures excellent readability. For dark backgrounds, white or a near-white shade is best.

Accessibility notes

Ensure sufficient contrast when using #FFDAB9 with other light colors for text or interactive elements.
Text on #654321 will require a very light color (e.g., white or #FFDAB9) for legibility.
Avoid placing #D2B48C text on #FFDAB9 without checking WCAG AA compliance for contrast.
Test all text and interactive element color pairings to meet accessibility standards for readability.

Recommended combinations

Spiced Comfort

Creates a grounded, warm, and sophisticated base for natural branding.

#654321 · #8B4513 · #D2B48C

Hearth Glow

For a vibrant accent against a creamy background, grounded by a deep brown.

#CD5C08 · #FFDAB9 · #654321

Autumn Bake

Ideal for a soft, inviting aesthetic, reminiscent of baked goods and warm beverages.

#8B4513 · #D2B48C · #FFDAB9

CSS variables

:root {
  --cozy-spice-hearth-1: #8B4513;
  --cozy-spice-hearth-2: #CD5C08;
  --cozy-spice-hearth-3: #FFDAB9;
  --cozy-spice-hearth-4: #D2B48C;
  --cozy-spice-hearth-5: #654321;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cozy-spice-hearth": {
        1: "#8B4513",
        2: "#CD5C08",
        3: "#FFDAB9",
        4: "#D2B48C",
        5: "#654321",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#CD5C08

Color 3#FFDAB9

Color 4#D2B48C

Color 5#654321

Accessibility

Contrast checker

1.7:1Fail

5.4:1AA

3.6:1AA18

1.2:1Fail

1.7:1Fail

3.1:1AA18

2.1:1Fail

2.2:1Fail

5.4:1AA

3.1:1AA18

1.5:1Fail

6.7:1AA

3.6:1AA18

2.1:1Fail

1.5:1Fail

4.5:1AA18

1.2:1Fail

2.2:1Fail

6.7:1AA

4.5:1AA18

Similar palettes

More like Cozy Spice Hearth

View all warm

Autumn Hearth Spice

Pumpkin Spice Harvest