Back to palettes

Palette

Hearthside Embrace

Warm browns and oranges evoking the cozy comfort of a crackling fire on a chilly evening.

warmcalm5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Hearthside Embrace 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 Hearthside Embrace.

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

Data visualization

#7E3E0E#AF5916#D77728#F99847#5C2D0A

Palette guide

How to use Hearthside Embrace

Overview

The Hearthside Embrace palette offers a deep, rustic warmth, perfectly capturing the essence of a crackling fire and cozy cabin interiors. Dominated by rich browns like #7E3E0E and #5C2D0A, it is beautifully complemented by vibrant, inviting oranges such as #AF5916, #D77728, and the brighter #F99847. This collection provides designers and developers with a robust set of colors for projects demanding a grounded, comforting, and authentic feel. It's particularly effective for creating user interfaces or branding that evokes nature, tradition, and the comforting embrace of a warm, rustic environment, ensuring a memorable and inviting experience.

Best used for

  • Rustic lodge and cabin rental websites
  • Outdoor adventure and camping gear branding
  • Autumn festival and harvest event promotions
  • Cozy interior design and home decor e-commerce
  • Traditional craftsmanship and artisanal product marketing
  • Digital content evoking warmth and natural elements

Suggested color roles

primary

Utilize #AF5916 as a bold, warm primary color for prominent headings, buttons, or key navigational elements, drawing attention with its earthy glow.

secondary

The vibrant #D77728 serves as an excellent secondary color for impactful calls-to-action or sections needing an energetic, fiery touch.

accent

Apply #F99847 as a bright, energetic accent for interactive elements, highlights, or small decorative details, providing a pop of light.

background

The deep, grounding #7E3E0E can be used for section backgrounds or footers, providing a rich, stable foundation for lighter text or elements.

text

Employ #5C2D0A for body text and crucial information. Its very dark brown ensures exceptional contrast and readability, especially on lighter palette colors.

Accessibility notes

  • Ensure #5C2D0A provides excellent contrast against #F99847 or other light backgrounds for all critical text to meet WCAG AA standards.
  • Avoid using #F99847 for small text on backgrounds like #AF5916 or #D77728 due to insufficient contrast.
  • When using #7E3E0E as a background, ensure text colors like #F99847 or #D77728 are large enough for readability.
  • The mid-tones of #AF5916 and #D77728 work best as background for very dark text or as large graphic elements.

Recommended combinations

Ember Glow

Perfect for hero sections or vibrant banners, simulating the dynamic warmth of a fire.

#AF5916 · #D77728 · #F99847

Deep Hearth

Ideal for footers, navigation, or rich content blocks, providing a grounded and sophisticated feel.

#5C2D0A · #7E3E0E · #AF5916

Rustic Warmth

Suitable for feature cards or interactive elements, combining deep browns with lively orange accents.

#7E3E0E · #D77728 · #F99847

CSS variables

:root {
  --hearthside-embrace-1: #7E3E0E;
  --hearthside-embrace-2: #AF5916;
  --hearthside-embrace-3: #D77728;
  --hearthside-embrace-4: #F99847;
  --hearthside-embrace-5: #5C2D0A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "hearthside-embrace": {
        1: "#7E3E0E",
        2: "#AF5916",
        3: "#D77728",
        4: "#F99847",
        5: "#5C2D0A",
      }
    }
  }
}

Related searches

rustic fire colorscozy brown orangeautumn cabin palettewarm earthy tonescomforting design hues

Palette colors

Hex values

Color 1#7E3E0E
·
Color 2#AF5916
·
Color 3#D77728
·
Color 4#F99847
·
Color 5#5C2D0A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.5:1Fail
3.7:1AA18
1.4:1Fail
2
1.7:1Fail
1.5:1Fail
2.3:1Fail
2.3:1Fail
3
2.5:1Fail
1.5:1Fail
1.5:1Fail
3.6:1AA18
4
3.7:1AA18
2.3:1Fail
1.5:1Fail
5.2:1AA
5
1.4:1Fail
2.3:1Fail
3.6:1AA18
5.2:1AA

Similar palettes

More like Hearthside Embrace

View all warm
Cozy Cottage Hearth
Flickering Hearth Fire
Gingerbread House Spice
Hazelnut Latte Blend
Orchard Brew Harmony
Rustic Fireside Hearth