Palette

Cinnamon Hearth Glow

Warm and inviting tones of a crackling autumn hearth, rich with cinnamon and amber hues.

warmcalm5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6B2B1B#A34B2C#D97F4F#F7B98E#FAE3C3

Palette guide

How to use Cinnamon Hearth Glow

Overview

The Cinnamon Hearth Glow palette radiates warm and inviting tones, reminiscent of a crackling autumn hearth, rich with cinnamon and amber hues. This comforting collection gracefully transitions from the deep, grounding #6B2B1B to the soft, airy #FAE3C3, offering a harmonious blend of reddish-browns and creams. Shades like #A34B2C, #D97F4F, and #F7B98E provide a natural progression, perfect for creating depth and visual interest. Designers can leverage these hex codes to evoke coziness, rustic charm, and a sense of inviting warmth. Developers will find this palette excellent for crafting autumnal UI, engaging marketing materials, or elegant branding that seeks to comfort and inspire, making it ideal for holiday themes, food, and lifestyle projects.

Best used for

cozy home goods branding
autumn event invitations and decor
seasonal food blog design
fireplace and home decor websites
natural beauty product packaging
holiday marketing campaigns

Suggested color roles

primary

The warm #A34B2C serves as an inviting primary color, ideal for main content areas, headings, or prominent branding elements.

secondary

The brighter #D97F4F provides a lively secondary option, perfect for subheadings, interactive buttons, or to add a touch of cheerful warmth.

accent

The deepest tone, #6B2B1B, can be used sparingly for impactful accents, offering sophistication and grounding to important details or calls-to-action.

background

The soft #FAE3C3 creates a light, airy background, promoting readability and a comforting user experience. For a slightly warmer background, consider #F7B98E.

text

For lighter backgrounds like #FAE3C3, use #6B2B1B 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 #F7B98E with #FAE3C3 for text, as they are very close in luminosity.
The darkest color, #6B2B1B, offers strong contrast for light text (e.g., white or #FAE3C3).
Avoid using #D97F4F for small text against #A34B2C 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

Hearth Light

Create soft, warm gradients or light, inviting sections for a welcoming user experience.

#F7B98E · #FAE3C3 · #D97F4F

Deep Ember

Use the deeper browns for grounding elements and the orange for vibrant accents or headers.

#6B2B1B · #A34B2C · #D97F4F

Spiced Comfort

Ideal for creating strong visual hierarchy, with dark text on light backgrounds and a rich accent.

#6B2B1B · #FAE3C3 · #A34B2C

CSS variables

:root {
  --cinnamon-hearth-glow-1: #6B2B1B;
  --cinnamon-hearth-glow-2: #A34B2C;
  --cinnamon-hearth-glow-3: #D97F4F;
  --cinnamon-hearth-glow-4: #F7B98E;
  --cinnamon-hearth-glow-5: #FAE3C3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cinnamon-hearth-glow": {
        1: "#6B2B1B",
        2: "#A34B2C",
        3: "#D97F4F",
        4: "#F7B98E",
        5: "#FAE3C3",
      }
    }
  }
}

Hex values

Color 1#6B2B1B

Color 2#A34B2C

Color 3#D97F4F

Color 4#F7B98E

Color 5#FAE3C3

Accessibility

Contrast checker

1.8:1Fail

3.6:1AA18

6.2:1AA

8.5:1AAA

1.8:1Fail

2:1Fail

3.4:1AA18

4.7:1AA

3.6:1AA18

2:1Fail

1.7:1Fail

2.4:1Fail

6.2:1AA

3.4:1AA18

1.7:1Fail

1.4:1Fail

8.5:1AAA

4.7:1AA

2.4:1Fail

1.4:1Fail

Similar palettes

More like Cinnamon Hearth Glow