Back to palettes

Palette

Terra Cotta Bloom

Earthy reds and oranges reminiscent of sun-baked terra cotta, bringing a rustic warmth to any design.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Terra Cotta Bloom 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 Terra Cotta Bloom.

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

Data visualization

#B85B3C#D47F5C#F0A47D#FFD8B5#8F3D24

Palette guide

How to use Terra Cotta Bloom

Overview

The Terra Cotta Bloom palette delivers a beautiful progression of earthy reds and oranges, perfectly capturing the rustic warmth of sun-baked pottery. From the deep, foundational #8F3D24 to the soft, luminous #FFD8B5, and centered around the inviting #B85B3C, this collection offers a truly natural and inviting aesthetic. Designers and developers can utilize the vibrant #D47F5C for engaging calls to action, while #F0A47D provides a gentle, airy feel. This palette is ideal for creating interfaces that exude comfort, authenticity, and a serene, handcrafted charm, making it highly versatile for various digital applications.

Best used for

  • Artisanal pottery or handcrafted goods e-commerce
  • Rustic interior design showcase websites
  • Wellness and spa branding
  • Food blogs featuring natural, wholesome ingredients
  • Travel agencies specializing in cultural tours
  • Mobile apps with a calming, organic user experience

Suggested color roles

primary

Use #B85B3C for main calls to action or key branding elements, providing a robust and warm anchor.

secondary

Apply #D47F5C for secondary buttons or interactive components, offering a slightly brighter, approachable tone.

accent

Reserve #F0A47D for subtle highlights, background textures, or soft dividing lines, adding an airy touch.

background

Employ #8F3D24 for a deep, rich background with good contrast, or a near-white for content areas.

text

A deep brown like #8F3D24 provides excellent contrast on #F0A47D and #FFD8B5; white text works on #B85B3C.

Accessibility notes

  • #F0A47D and #FFD8B5 are very light and require dark text (e.g., #8F3D24 or black) for readability.
  • Ensure sufficient contrast when pairing #D47F5C with lighter background elements from the palette.
  • Avoid using #F0A47D and #FFD8B5 adjacently for text/background without careful contrast checking.
  • For body text on any of the lighter shades, a strong contrasting color like a dark brown or charcoal is essential.

Recommended combinations

Sunbaked Earth

Creates a compelling visual hierarchy from deep grounding to light, airy elements.

#8F3D24 · #B85B3C · #F0A47D

Warm Gradient

Ideal for soft, inviting gradients in hero sections or background elements, evoking warmth.

#D47F5C · #F0A47D · #FFD8B5

Rustic Contrast

A strong primary hue, with a very light accent and a deep brown for text or dark elements.

#B85B3C · #FFD8B5 · #8F3D24

CSS variables

:root {
  --terra-cotta-bloom-7-1: #B85B3C;
  --terra-cotta-bloom-7-2: #D47F5C;
  --terra-cotta-bloom-7-3: #F0A47D;
  --terra-cotta-bloom-7-4: #FFD8B5;
  --terra-cotta-bloom-7-5: #8F3D24;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terra-cotta-bloom-7": {
        1: "#B85B3C",
        2: "#D47F5C",
        3: "#F0A47D",
        4: "#FFD8B5",
        5: "#8F3D24",
      }
    }
  }
}

Related searches

terracotta color paletterustic orange hex codeswarm clay design colorsearthy pottery UInatural gradient color scheme

Palette colors

Hex values

Color 1#B85B3C
·
Color 2#D47F5C
·
Color 3#F0A47D
·
Color 4#FFD8B5
·
Color 5#8F3D24
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.2:1Fail
3.4:1AA18
1.6:1Fail
2
1.5:1Fail
1.5:1Fail
2.3:1Fail
2.4:1Fail
3
2.2:1Fail
1.5:1Fail
1.5:1Fail
3.6:1AA18
4
3.4:1AA18
2.3:1Fail
1.5:1Fail
5.5:1AA
5
1.6:1Fail
2.4:1Fail
3.6:1AA18
5.5:1AA

Similar palettes

More like Terra Cotta Bloom

View all earth