Back to palettes

Palette

Terra Cotta Bloom

Warm, earthy reds and browns inspired by the rich tones of fired clay pottery and dry soil.

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

#E2725B#D46F54#CD5B45#BC563F#A94D36

Palette guide

How to use Terra Cotta Bloom

Overview

This Terra Cotta Bloom palette offers a rich, monochromatic journey through warm, earthy red-orange tones, ideal for creating rustic and inviting digital experiences. With shades ranging from the vibrant #E2725B to the deeper, grounding #A94D36, designers and developers can craft cohesive interfaces that evoke natural warmth and sun-baked landscapes. The consistent hue, exemplified by #CD5B45, ensures harmonious visual flow, making it perfect for brand identities seeking an organic, artisanal feel. Its earthy depth is versatile for both subtle backgrounds and prominent UI elements, providing a sophisticated yet approachable aesthetic.

Best used for

  • Rustic e-commerce websites (e.g., pottery, handcrafted goods)
  • Interior design blogs and portfolios
  • Branding for artisanal food or beverage products
  • Mobile apps with a natural or earthy theme
  • Editorial layouts for travel or lifestyle magazines
  • Warm, inviting user interface elements

Suggested color roles

primary

Use #CD5B45 for primary calls to action or key branding elements, providing a strong, warm anchor.

secondary

Apply #D46F54 for secondary buttons or active states, offering a slightly softer yet complementary tone.

accent

Reserve #E2725B for subtle highlights or decorative elements, drawing attention without overpowering.

background

Employ #BC563F for richer, textured backgrounds, or a lighter off-white for content areas.

text

Use a very dark brown like #A94D36 for primary text on lighter backgrounds for readability, or white text on darker hues.

Accessibility notes

  • Ensure sufficient contrast when pairing lighter shades like #E2725B with text; black or very dark brown is often necessary.
  • Avoid using adjacent colors from this palette for text and background without checking contrast ratios (WCAG AA).
  • For interactive elements, provide clear visual cues beyond color, especially for #D46F54 and #CD5B45, which are close in value.
  • Consider using a stark contrast, such as a near-white or light gray, for primary text on any of these deep terracotta hues.

Recommended combinations

Earthy Depth

Ideal for creating depth in UI, with the darkest as background, mid-tone for cards, and lightest for accents.

#A94D36 · #BC563F · #E2725B

Warm Gradient

Excellent for subtle gradients in hero sections or banners, evoking a sun-drenched feel.

#D46F54 · #CD5B45 · #BC563F

Rustic Highlight

Pair the darkest for text, the lightest for interactive elements, and the mid-tone for supporting visuals.

#A94D36 · #E2725B · #CD5B45

CSS variables

:root {
  --terra-cotta-bloom-2-1: #E2725B;
  --terra-cotta-bloom-2-2: #D46F54;
  --terra-cotta-bloom-2-3: #CD5B45;
  --terra-cotta-bloom-2-4: #BC563F;
  --terra-cotta-bloom-2-5: #A94D36;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terra-cotta-bloom-2": {
        1: "#E2725B",
        2: "#D46F54",
        3: "#CD5B45",
        4: "#BC563F",
        5: "#A94D36",
      }
    }
  }
}

Related searches

terracotta color schemeearthy red paletterustic ui colorswarm clay hex codesmonochromatic red-orange design

Palette colors

Hex values

Color 1#E2725B
·
Color 2#D46F54
·
Color 3#CD5B45
·
Color 4#BC563F
·
Color 5#A94D36
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.3:1Fail
1.5:1Fail
1.8:1Fail
2
1.1:1Fail
1.2:1Fail
1.4:1Fail
1.6:1Fail
3
1.3:1Fail
1.2:1Fail
1.1:1Fail
1.4:1Fail
4
1.5:1Fail
1.4:1Fail
1.1:1Fail
1.2:1Fail
5
1.8:1Fail
1.6:1Fail
1.4:1Fail
1.2:1Fail

Similar palettes

More like Terra Cotta Bloom

View all earth