Back to palettes

Palette

Cinnamon Hearth

Rich and comforting, inspired by the earthy warmth and aroma of autumn spices by a glowing hearth.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8D6E63#A1887F#BCAAA4#D7CCC8#EFEBE9

Palette guide

How to use Cinnamon Hearth

Overview

The Cinnamon Hearth palette offers rich and comforting tones, inspired by the earthy warmth and aroma of autumn spices by a glowing hearth. This elegant collection transitions from the grounding #8D6E63 to the soft, subtle #EFEBE9, providing a sophisticated range of muted browns and beiges. Shades like #A1887F, #BCAAA4, and #D7CCC8 create a harmonious progression, perfect for designs that aim for a calm, refined, and inviting atmosphere. Designers can leverage these hex codes to evoke coziness, understated elegance, and a sense of natural comfort. Developers will find this palette excellent for crafting serene UI, sophisticated branding, or tranquil digital experiences, making it ideal for luxury home goods, wellness, or minimalist designs.

Best used for

  • minimalist home decor branding
  • wellness and spa website design
  • luxury fashion e-commerce
  • architectural interior design concepts
  • subtle autumnal marketing
  • artisanal product packaging

Suggested color roles

primary

The grounding #8D6E63 serves as a sophisticated primary color, ideal for main content areas, headings, or prominent branding elements.

secondary

The soft #A1887F provides a gentle secondary option, perfect for subheadings, subtle interactive elements, or backgrounds that need a refined touch.

accent

The deepest tone, #8D6E63, or a slightly darker charcoal, can be used sparingly for impactful accents, adding definition to important details or calls-to-action.

background

The airy #EFEBE9 creates a clean, light background, promoting readability and a serene user experience. For a warmer background, consider #D7CCC8.

text

For lighter backgrounds like #EFEBE9, use #8D6E63 or a deep charcoal for body text. For darker backgrounds, white or a very light cream provides excellent contrast.

Accessibility notes

  • Ensure sufficient contrast when pairing #D7CCC8 with #EFEBE9 for text, as they are very close in luminosity.
  • The darkest color, #8D6E63, offers strong contrast for light text (e.g., white or #EFEBE9).
  • Avoid using #BCAAA4 for small text against #A1887F backgrounds without careful WCAG contrast checking.
  • For optimal readability, use a dark brown or black for body text on the lighter palette shades.

Recommended combinations

Gentle Warmth

Create soft, calming sections or light, inviting backgrounds for a minimalist aesthetic.

#D7CCC8 · #EFEBE9 · #BCAAA4

Subtle Depth

Use the deeper browns for grounding elements and the lighter shades for subtle accents or text.

#8D6E63 · #A1887F · #BCAAA4

Hearth Blend

Ideal for creating harmonious gradients, soft transitions, or layered graphic elements with a refined feel.

#A1887F · #D7CCC8 · #EFEBE9

CSS variables

:root {
  --cinnamon-hearth-1: #8D6E63;
  --cinnamon-hearth-2: #A1887F;
  --cinnamon-hearth-3: #BCAAA4;
  --cinnamon-hearth-4: #D7CCC8;
  --cinnamon-hearth-5: #EFEBE9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cinnamon-hearth": {
        1: "#8D6E63",
        2: "#A1887F",
        3: "#BCAAA4",
        4: "#D7CCC8",
        5: "#EFEBE9",
      }
    }
  }
}

Related searches

muted brown beige palettecalm earthy tonescinnamon neutral colorscozy minimalist designsophisticated warm palette

Palette colors

Hex values

Color 1#8D6E63
·
Color 2#A1887F
·
Color 3#BCAAA4
·
Color 4#D7CCC8
·
Color 5#EFEBE9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
2.9:1Fail
3.9:1AA18
2
1.4:1Fail
1.5:1Fail
2.1:1Fail
2.8:1Fail
3
2.1:1Fail
1.5:1Fail
1.4:1Fail
1.9:1Fail
4
2.9:1Fail
2.1:1Fail
1.4:1Fail
1.3:1Fail
5
3.9:1AA18
2.8:1Fail
1.9:1Fail
1.3:1Fail

Similar palettes

More like Cinnamon Hearth

View all warm
Autumn Chai Warmth
Autumn Cider Spice
Autumn Harvest Spices
Autumn Hearth Spice
Autumn Spice Blend
Autumn Spice Hearth