Palette

Terra Cotta Bloom

Earthy reds and warm oranges, reminiscent of handcrafted terracotta pots baking in the sun.

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

#B22222#D2691E#F4A460#DAA520#CD853F

Palette guide

How to use Terra Cotta Bloom

Overview

The Terra Cotta Bloom palette captures the essence of sun-baked pottery and rustic charm, blending deep reds with warm oranges and golden accents. From the robust #B22222 to the inviting #F4A460 and the rich #CD853F, this collection offers a grounding yet vibrant aesthetic. It's ideal for designs that aim to evoke natural warmth, handcrafted quality, or a Mediterranean feel. Developers can use the striking #D2691E for strong calls to action, while #DAA520 provides a unique golden touch, ensuring interfaces feel both authentic and visually engaging.

Best used for

Rustic café or restaurant branding
Websites for artisanal crafts or ceramics
Travel blogs focused on Mediterranean destinations
E-commerce sites for home decor or gardening supplies
Autumnal event marketing materials
Branding for natural skincare products

Suggested color roles

primary

Use #D2691E for key interactive elements, providing a strong, warm focal point.

secondary

Apply #CD853F for supporting graphics or secondary navigation, a slightly muted but rich tone.

accent

Reserve #F4A460 for highlighting important information or decorative flourishes, offering a soft glow.

background

Employ a light cream or off-white for content areas, or #B22222 for a dramatic, impactful backdrop.

text

A deep brown or black provides excellent contrast on #F4A460; white text works well on #B22222 and #D2691E.

Accessibility notes

#F4A460 and #DAA520 are light; ensure dark text (e.g., black or #B22222) is used for readability.
Check contrast ratios between #D2691E and #CD853F if used together for text and background.
For interactive states, differentiate clearly between #CD853F and #DAA520, which are close in hue.
Consider using a very dark brown or black for body text on any of the lighter background colors.

Recommended combinations

Rustic Glow

Creates a warm, inviting gradient, perfect for header backgrounds or brand hero sections.

#F4A460 · #CD853F · #B22222

Earthy Accent

Strong red base with golden highlights for buttons or data points, balanced by the rich orange.

#D2691E · #DAA520 · #B22222

Pottery Blend

Muted orange as a base, with lighter and slightly richer tones for layered content cards.

#CD853F · #F4A460 · #D2691E

CSS variables

:root {
  --terra-cotta-bloom-4-1: #B22222;
  --terra-cotta-bloom-4-2: #D2691E;
  --terra-cotta-bloom-4-3: #F4A460;
  --terra-cotta-bloom-4-4: #DAA520;
  --terra-cotta-bloom-4-5: #CD853F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terra-cotta-bloom-4": {
        1: "#B22222",
        2: "#D2691E",
        3: "#F4A460",
        4: "#DAA520",
        5: "#CD853F",
      }
    }
  }
}

Hex values

Color 1#B22222

Color 2#D2691E

Color 3#F4A460

Color 4#DAA520

Color 5#CD853F

Accessibility

Contrast checker

1.8:1Fail

3.3:1AA18

3:1Fail

2.2:1Fail

1.8:1Fail

1.6:1Fail

1.2:1Fail

3.3:1AA18

1.8:1Fail

1.1:1Fail

1.5:1Fail

3:1Fail

1.6:1Fail

1.1:1Fail

1.3:1Fail

2.2:1Fail

1.2:1Fail

1.5:1Fail

1.3:1Fail

Similar palettes

More like Terra Cotta Bloom

Terra Cotta Bloom

See it in context.

Ready when you are.

Built with Terra Cotta Bloom.

How to use Terra Cotta Bloom

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Rustic Glow

Earthy Accent

Pottery Blend

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Terra Cotta Bloom