Back to palettes

Palette

Terra Cotta Bloom

Sun-baked tones of Mediterranean pottery paired with dried flowers, evoking rustic warmth and charm.

warmnatural5 colors
More warm 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

#E37B5C#C16E5D#E1B099#B87333#F8F8F8

Palette guide

How to use Terra Cotta Bloom

Overview

The Terra Cotta Bloom palette captures the sun-baked tones of Mediterranean pottery paired with the gentle hues of dried flowers, evoking a rustic warmth and undeniable charm. With a spectrum from the inviting #E37B5C to the soft, near-white #F8F8F8, and featuring the rich #B87333, this collection is ideal for creating serene and elegant digital experiences. Developers and designers will appreciate the subtle variations between #E37B5C and #C16E5D for cohesive branding, while #E1B099 offers a beautiful, muted background option. This palette provides a sophisticated foundation for designs seeking an organic, natural, and comforting aesthetic.

Best used for

  • Mediterranean-style home decor websites
  • Artisan bakery or coffee shop branding
  • Wedding or event planning with a rustic theme
  • E-commerce for natural beauty products
  • Lifestyle blogs and digital magazines
  • User interfaces requiring a soft, warm, and clean feel

Suggested color roles

primary

Use #E37B5C for main calls to action, providing a welcoming and warm central hue.

secondary

Apply #C16E5D for supporting elements or secondary navigation, a slightly deeper, grounding terracotta.

accent

Reserve #B87333 for strong highlights or important details, adding a rich, burnished gold touch.

background

Employ #F8F8F8 as a clean, crisp background for content areas, or #E1B099 for a soft, warm base.

text

A deep brown (e.g., from #B87333) or charcoal provides excellent contrast on #F8F8F8 and #E1B099.

Accessibility notes

  • #F8F8F8 and #E1B099 require very dark text (e.g., black or #B87333) to ensure WCAG AA readability.
  • Check contrast carefully between #E37B5C and #C16E5D if used for text and background.
  • Ensure sufficient contrast for interactive elements, especially when using #E1B099 as a background.
  • For body text, a strong contrasting color like a dark brown or black is essential on the lighter shades.

Recommended combinations

Rustic Clean

A clean base with a warm primary and a rich accent, ideal for modern rustic designs.

#F8F8F8 · #E37B5C · #B87333

Dried Bloom

Soft, muted background with two complementary terracotta hues for content and interactive elements.

#E1B099 · #C16E5D · #E37B5C

Earthy Gold

A rich golden brown as a base, with near-white for text and a vibrant terracotta for highlights.

#B87333 · #F8F8F8 · #E37B5C

CSS variables

:root {
  --terra-cotta-bloom-9-1: #E37B5C;
  --terra-cotta-bloom-9-2: #C16E5D;
  --terra-cotta-bloom-9-3: #E1B099;
  --terra-cotta-bloom-9-4: #B87333;
  --terra-cotta-bloom-9-5: #F8F8F8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terra-cotta-bloom-9": {
        1: "#E37B5C",
        2: "#C16E5D",
        3: "#E1B099",
        4: "#B87333",
        5: "#F8F8F8",
      }
    }
  }
}

Related searches

mediterranean terracotta paletterustic warm ui colorsearthy gold hex codesdried flower color schemenatural clean design palette

Palette colors

Hex values

Color 1#E37B5C
·
Color 2#C16E5D
·
Color 3#E1B099
·
Color 4#B87333
·
Color 5#F8F8F8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.5:1Fail
1.3:1Fail
2.7:1Fail
2
1.3:1Fail
1.9:1Fail
1:1Fail
3.5:1AA18
3
1.5:1Fail
1.9:1Fail
2:1Fail
1.8:1Fail
4
1.3:1Fail
1:1Fail
2:1Fail
3.6:1AA18
5
2.7:1Fail
3.5:1AA18
1.8:1Fail
3.6:1AA18

Similar palettes

More like Terra Cotta Bloom

View all warm