Palette

Copper Bloom Hearth

A cozy blend of deep copper and warm neutrals, reminiscent of a crackling fire in a rustic home.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Copper Bloom 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 Copper Bloom Hearth.

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

Data visualization

#A34A28#D88C5E#F2DDC3#5F4F42#7D2E28

Palette guide

How to use Copper Bloom Hearth

Overview

The Copper Bloom Hearth palette offers a cozy and sophisticated blend of deep copper, rich browns, and warm neutrals, evoking the comforting glow of a crackling fire. Featuring robust #A34A28 and #7D2E28, balanced by grounding #5F4F42 and lighter #D88C5E, and culminating in the creamy #F2DDC3, this palette exudes warmth, authenticity, and rustic elegance. Designers and developers can leverage these hex codes to create inviting, natural, and timeless interfaces, robust branding, or evocative digital experiences. It's an excellent choice for projects requiring a comforting, autumnal, or heritage aesthetic, offering depth and a grounded appeal.

Best used for

Rustic home decor e-commerce
Autumnal event invitations
Artisan food or beverage branding
Cozy cafe or restaurant websites
Fireplace or outdoor living product promotions
Traditional craft workshop branding

Suggested color roles

primary

Use #A34A28 as a dominant, rich primary for headers, important buttons, or main sections.

secondary

Apply #5F4F42 for secondary content areas, navigation, or subtle textural elements.

accent

Introduce #D88C5E as a warm, inviting accent for interactive elements or highlighted content.

background

The creamy #F2DDC3 provides a soft, warm background for optimal readability.

text

A deep brown (#3A2E20) or black (#000000) provides excellent contrast on lighter backgrounds, while white (#FFFFFF) works on darker tones.

Accessibility notes

Ensure sufficient contrast for text, especially when pairing mid-tones like #D88C5E with text.
Text in dark brown on #F2DDC3 will be highly readable.
White text will be necessary for #A34A28, #7D2E28, and #5F4F42 to meet WCAG contrast standards.
Use #A34A28 for key interactive elements to ensure they stand out against lighter backgrounds.

Recommended combinations

Hearth Glow

Excellent for defining sections, backgrounds with strong headings, or rustic branding.

#A34A28 · #D88C5E · #F2DDC3

Earthy Base

Use for contrasting content blocks, subtle gradients, or warm, inviting backgrounds.

#5F4F42 · #F2DDC3 · #D88C5E

Deep Bloom

Ideal for layered backgrounds, textured elements, or a rich, autumnal visual hierarchy.

#7D2E28 · #A34A28 · #D88C5E

CSS variables

:root {
  --copper-bloom-hearth-1: #A34A28;
  --copper-bloom-hearth-2: #D88C5E;
  --copper-bloom-hearth-3: #F2DDC3;
  --copper-bloom-hearth-4: #5F4F42;
  --copper-bloom-hearth-5: #7D2E28;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "copper-bloom-hearth": {
        1: "#A34A28",
        2: "#D88C5E",
        3: "#F2DDC3",
        4: "#5F4F42",
        5: "#7D2E28",
      }
    }
  }
}

Hex values

Color 1#A34A28

Color 2#D88C5E

Color 3#F2DDC3

Color 4#5F4F42

Color 5#7D2E28

Accessibility

Contrast checker

2.2:1Fail

4.5:1AA18

1.3:1Fail

1.6:1Fail

2.2:1Fail

2:1Fail

2.9:1Fail

3.4:1AA18

4.5:1AA18

2:1Fail

5.9:1AA

6.9:1AA

1.3:1Fail

2.9:1Fail

5.9:1AA

1.2:1Fail

1.6:1Fail

3.4:1AA18

6.9:1AA

1.2:1Fail

Similar palettes

More like Copper Bloom Hearth

Autumn Foliage Crunch

Autumn Harvest Berry