Palette

Rustic Bread Hearth

Warm, inviting browns and creams reminiscent of freshly baked artisanal bread emerging from a rustic hearth.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rustic Bread 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 Rustic Bread Hearth.

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

Data visualization

#D2B48C#BC8F8F#A0522D#8B4513#704214

Palette guide

How to use Rustic Bread Hearth

Overview

The Rustic Bread Hearth palette captures the warm, inviting essence of freshly baked artisanal bread emerging from a cozy, rustic hearth. Featuring the light, inviting #D2B48C, a unique rosy-brown #BC8F8F, and deep, grounding tones like #A0522D and #704214, this collection is perfect for designers aiming to evoke comfort, craftsmanship, and culinary warmth. Its rich, earthy character makes it ideal for food-related branding, cozy digital experiences, or interior designs that seek a homely, authentic atmosphere. The versatile browns and creams allow for strong visual hierarchies and appealing, natural presentations.

Best used for

Artisan bakery branding and packaging
Cozy cafe or coffee shop aesthetics
Rustic home decor and kitchenware
Food photography backdrops
Country living and homesteading blogs
Warm, inviting web design for culinary businesses

Suggested color roles

primary

Use #A0522D as a rich, warm brown for dominant elements, conveying comfort and authenticity.

secondary

Employ #8B4513 for supporting content or secondary calls-to-action, offering a classic wood tone.

accent

Apply #BC8F8F as a unique rosy-brown accent for subtle details, illustrations, or decorative elements.

background

Utilize #D2B48C as a light, inviting cream/tan base for content areas, ensuring excellent readability.

text

For optimal contrast on light backgrounds like #D2B48C, use #704214 or a deep charcoal for body text.

Accessibility notes

Pair #704214 with #D2B48C for text to achieve high WCAG AA contrast, ensuring maximum readability.
Be cautious when using #BC8F8F for small text; it generally requires a dark, contrasting background.
Ensure interactive elements using #A0522D provide clear visual feedback on hover/focus.
Avoid placing #BC8F8F directly against #8B4513 without sufficient contrast or separation for visual clarity.

Recommended combinations

Hearthside Warmth

Ideal for creating inviting headers or showcasing products with a comforting, artisanal feel.

#D2B48C · #A0522D · #BC8F8F

Artisan Blend

Excellent for backgrounds, footers, or strong visual sections, conveying depth and craftsmanship.

#8B4513 · #704214 · #A0522D

Rustic Bake

Perfect for creating a balanced, natural aesthetic in product descriptions or brand storytelling.

#D2B48C · #8B4513 · #BC8F8F

CSS variables

:root {
  --rustic-bread-hearth-1: #D2B48C;
  --rustic-bread-hearth-2: #BC8F8F;
  --rustic-bread-hearth-3: #A0522D;
  --rustic-bread-hearth-4: #8B4513;
  --rustic-bread-hearth-5: #704214;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rustic-bread-hearth": {
        1: "#D2B48C",
        2: "#BC8F8F",
        3: "#A0522D",
        4: "#8B4513",
        5: "#704214",
      }
    }
  }
}

Hex values

Color 1#D2B48C

Color 2#BC8F8F

Color 3#A0522D

Color 4#8B4513

Color 5#704214

Accessibility

Contrast checker

1.4:1Fail

2.8:1Fail

3.6:1AA18

4.3:1AA18

1.4:1Fail

2:1Fail

2.5:1Fail

3:1AA18

2.8:1Fail

2:1Fail

1.3:1Fail

1.5:1Fail

3.6:1AA18

2.5:1Fail

1.3:1Fail

1.2:1Fail

4.3:1AA18

3:1AA18

1.5:1Fail

1.2:1Fail

Similar palettes

More like Rustic Bread Hearth