Back to palettes

Palette

Terracotta Hearth Warm

Earthy and comforting, these shades mimic the warm, inviting glow of a terracotta hearth.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#CD5C5C#D2691E#F4A460#8B4513#A52A2A

Palette guide

How to use Terracotta Hearth Warm

Overview

The Terracotta Hearth Warm palette emanates a comforting, rustic glow, reminiscent of a crackling fireplace. Designers can build a strong foundation with the deep `#8B4513` and `#A52A2A`, while the vibrant `#CD5C5C` and `#D2691E` introduce inviting warmth. The lighter `#F4A460` provides a soft, glowing accent, perfect for highlights. This palette is ideal for projects seeking a cozy, natural, and inviting atmosphere, making it suitable for branding, web design, or interior concepts that evoke comfort, tradition, and the warmth of home.

Best used for

  • Coffee shop branding
  • Rustic lodge websites
  • Home decor e-commerce
  • Cozy blog designs
  • Winter seasonal marketing
  • Artisan food packaging

Suggested color roles

primary

#CD5C5C - A rich Indian Red, excellent for prominent calls-to-action, hero sections, or main branding elements to convey warmth and energy.

secondary

#D2691E - A vibrant chocolate orange, perfect for subheadings, prominent accents, or backgrounds that need to feel inviting and dynamic.

accent

#F4A460 - A soft, sandy brown, ideal for subtle highlights, interactive elements, or decorative details that need a gentle, airy touch.

background

#A52A2A - A deep, rustic brown-red, suitable for backgrounds that evoke a sense of coziness and depth. For lighter backgrounds, use a cream or near-white.

text

#8B4513 - This deep saddle brown provides excellent readability for body text against light backgrounds. For text on darker backgrounds like `#A52A2A`, use white or `#F4A460`.

Accessibility notes

  • Ensure `#8B4513` text on `#F4A460` meets WCAG contrast guidelines for readability.
  • Avoid using `#F4A460` for small text on light backgrounds due to low contrast.
  • Use `#CD5C5C` or `#D2691E` for important interactive elements to ensure visibility.
  • When using `#A52A2A` as a background, ensure text has sufficient contrast (e.g., white or `#F4A460`).

Recommended combinations

Hearth Glow

For vibrant headers or graphical elements, capturing the warm, radiant glow of a hearth.

#CD5C5C · #D2691E · #F4A460

Rustic Depth

Ideal for robust sections, blending deep browns with a subtle glowing accent for a grounded feel.

#8B4513 · #A52A2A · #F4A460

Warm Embrace

Creates a cozy, natural feel, using a vibrant red with a deep brown and a light, warm highlight.

#CD5C5C · #8B4513 · #F4A460

CSS variables

:root {
  --terracotta-hearth-warm-1: #CD5C5C;
  --terracotta-hearth-warm-2: #D2691E;
  --terracotta-hearth-warm-3: #F4A460;
  --terracotta-hearth-warm-4: #8B4513;
  --terracotta-hearth-warm-5: #A52A2A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terracotta-hearth-warm": {
        1: "#CD5C5C",
        2: "#D2691E",
        3: "#F4A460",
        4: "#8B4513",
        5: "#A52A2A",
      }
    }
  }
}

Related searches

terracotta cozy palettehearth warm colorsrustic brown red schemenatural earthy designcozy terracotta tones

Palette colors

Hex values

Color 1#CD5C5C
·
Color 2#D2691E
·
Color 3#F4A460
·
Color 4#8B4513
·
Color 5#A52A2A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
2:1Fail
1.8:1Fail
1.8:1Fail
2
1.1:1Fail
1.8:1Fail
2:1Fail
1.9:1Fail
3
2:1Fail
1.8:1Fail
3.5:1AA18
3.5:1AA18
4
1.8:1Fail
2:1Fail
3.5:1AA18
1:1Fail
5
1.8:1Fail
1.9:1Fail
3.5:1AA18
1:1Fail

Similar palettes

More like Terracotta Hearth Warm

View all warm