Back to palettes

Palette

Fireside Hearth Warmth

Inviting reds and oranges that evoke the comforting, glowing warmth of a crackling fireplace.

warmcalm5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B0000#CD5C5C#FFA07A#FFEFD5#A52A2A

Palette guide

How to use Fireside Hearth Warmth

Overview

The Fireside Hearth Warmth palette captures the comforting, glowing essence of a crackling fireplace with inviting reds and oranges. This classic collection provides designers and developers with a traditional yet vibrant range of colors, perfect for projects aiming to evoke coziness and nostalgia. It features a deep burgundy (#8B0000), a warm coral (#CD5C5C), a soft peach (#FFA07A), and a creamy off-white (#FFEFD5). A robust reddish-brown (#A52A2A) anchors the palette, ensuring versatility for everything from festive designs to traditional branding, creating a truly inviting atmosphere.

Best used for

  • Holiday and festive marketing campaigns
  • Traditional home decor and textile design
  • Cozy blog themes and online journals
  • Food and beverage branding, especially for comfort foods
  • Winter event promotions and seasonal collateral
  • Educational materials with a warm, inviting tone

Suggested color roles

primary

Use #8B0000 for strong, impactful statements, main headings, or as a deep brand anchor.

secondary

Apply #A52A2A for supporting elements, subheadings, or to add a rich, earthy red complement to the primary.

accent

Deploy #CD5C5C for highlights, interactive elements, or to create a vibrant, warm visual pop.

background

Utilize #FFEFD5 as a soft, warm cream background, offering excellent contrast for darker text and ensuring high readability.

text

Choose #8B0000 for primary body text on light backgrounds like #FFEFD5, or a crisp white for text on darker hues.

Accessibility notes

  • Ensure #8B0000 text on #FFEFD5 background meets WCAG AA contrast standards for all users.
  • Avoid using #FFA07A or #CD5C5C for small body text on #FFEFD5, as contrast may be insufficient.
  • Verify that interactive elements have clear hover and active states using contrasting colors from the palette.
  • When placing text on #8B0000 or #A52A2A, use white or #FFEFD5 to guarantee readability.

Recommended combinations

Classic Hearth

Ideal for creating a traditional, comforting base for websites, print materials, or branding.

#8B0000 · #FFEFD5 · #A52A2A

Glowing Embers

Perfect for hero sections, atmospheric graphics, or elements meant to evoke warmth and light.

#CD5C5C · #FFA07A · #FFEFD5

Deep Red Contrast

Provides a rich, layered effect, suitable for detailed illustrations, infographics, or sections requiring visual depth.

#A52A2A · #8B0000 · #CD5C5C

CSS variables

:root {
  --fireside-hearth-warmth-1: #8B0000;
  --fireside-hearth-warmth-2: #CD5C5C;
  --fireside-hearth-warmth-3: #FFA07A;
  --fireside-hearth-warmth-4: #FFEFD5;
  --fireside-hearth-warmth-5: #A52A2A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fireside-hearth-warmth": {
        1: "#8B0000",
        2: "#CD5C5C",
        3: "#FFA07A",
        4: "#FFEFD5",
        5: "#A52A2A",
      }
    }
  }
}

Related searches

warm red color palettecozy fireplace colorstraditional christmas huesred and cream designinviting warm tones

Palette colors

Hex values

Color 1#8B0000
·
Color 2#CD5C5C
·
Color 3#FFA07A
·
Color 4#FFEFD5
·
Color 5#A52A2A
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.5:1Fail
5:1AA
8.8:1AAA
1.4:1Fail
2
2.5:1Fail
2:1Fail
3.5:1AA18
1.8:1Fail
3
5:1AA
2:1Fail
1.8:1Fail
3.6:1AA18
4
8.8:1AAA
3.5:1AA18
1.8:1Fail
6.3:1AA
5
1.4:1Fail
1.8:1Fail
3.6:1AA18
6.3:1AA

Similar palettes

More like Fireside Hearth Warmth

View all warm