Palette

Deep Forest Hearth

Rich, earthy browns and inviting oranges evoke the warmth and comfort of a crackling fire in a deep forest cabin.

warmcalm5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Forest 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 Deep Forest Hearth.

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

Data visualization

#3A1C0F#6B3F2D#A36F52#D1A58D#ECC7B3

Palette guide

How to use Deep Forest Hearth

Overview

The Deep Forest Hearth palette exudes warmth and comfort, drawing inspiration from the cozy glow of a cabin fire amidst a deep forest. It features a rich spectrum of browns and inviting oranges, beginning with the deep, grounding #3A1C0F and progressing through the rustic #6B3F2D and the warm #A36F52. Lighter, comforting tones like #D1A58D and #ECC7B3 complete the set, evoking crackling embers and soft lamplight. This palette is perfectly suited for designers aiming to create an inviting, rustic, or autumnal aesthetic. Its inherent warmth makes it ideal for projects that emphasize comfort, tradition, or handcrafted quality, providing a welcoming and secure visual experience.

Best used for

Cozy cafe or bakery branding
Autumnal seasonal campaigns
Rustic home decor websites
Craft and handmade product packaging
Traditional storytelling illustrations
Winter holiday marketing materials

Suggested color roles

primary

Use #3A1C0F as a deep, anchoring color for backgrounds or main structural elements, conveying warmth and stability.

secondary

Apply #6B3F2D for supporting sections, navigation, or larger text blocks, adding depth and a rich, earthy feel.

accent

Incorporate #A36F52 for calls-to-action, highlights, or decorative elements to introduce a vibrant, inviting glow.

background

Utilize #ECC7B3 as a soft, warm background color for content, providing a clean yet cozy canvas.

text

For body text, use #3A1C0F on lighter backgrounds like #D1A58D or #ECC7B3 to ensure excellent readability and a cohesive, warm aesthetic.

Accessibility notes

Text in #3A1C0F offers strong contrast against #D1A58D and #ECC7B3, suitable for body copy and headings.
Avoid placing #6B3F2D text on #A36F52 without careful contrast checking due to similar hues and lightness.
Ensure interactive elements using #A36F52 have enough contrast against surrounding colors, especially on #D1A58D.
Lighter shades like #D1A58D and #ECC7B3 may require very dark text (e.g., black or #3A1C0F) to meet contrast requirements.

Recommended combinations

Cabin Comfort

Establishes a deep, cozy foundation, ideal for rustic branding or warm, inviting web layouts.

#3A1C0F · #6B3F2D · #ECC7B3

Ember Glow

Creates a warm, radiating effect, perfect for highlighting key content or evoking a sense of gentle warmth.

#6B3F2D · #A36F52 · #D1A58D

Autumnal Blend

Offers a balanced and inviting combination, excellent for seasonal promotions or designs with an organic feel.

#A36F52 · #D1A58D · #3A1C0F

CSS variables

:root {
  --deep-forest-hearth-1: #3A1C0F;
  --deep-forest-hearth-2: #6B3F2D;
  --deep-forest-hearth-3: #A36F52;
  --deep-forest-hearth-4: #D1A58D;
  --deep-forest-hearth-5: #ECC7B3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-forest-hearth": {
        1: "#3A1C0F",
        2: "#6B3F2D",
        3: "#A36F52",
        4: "#D1A58D",
        5: "#ECC7B3",
      }
    }
  }
}

Hex values

Color 1#3A1C0F

Color 2#6B3F2D

Color 3#A36F52

Color 4#D1A58D

Color 5#ECC7B3

Accessibility

Contrast checker

1.8:1Fail

3.7:1AA18

7:1AAA

9.9:1AAA

1.8:1Fail

2.1:1Fail

4:1AA18

5.6:1AA

3.7:1AA18

2.1:1Fail

1.9:1Fail

2.7:1Fail

7:1AAA

4:1AA18

1.9:1Fail

1.4:1Fail

9.9:1AAA

5.6:1AA

2.7:1Fail

1.4:1Fail

Similar palettes

More like Deep Forest Hearth

View all warm

Autumn Hearth Comfort