Palette

Terra Cotta Bloom

Rich, warm clay colors paired with soft, sun-drenched orange blooms, inspired by rustic gardens.

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

#C06F3F#E09C6B#A35C33#F5CC9D#8A4F2E

Palette guide

How to use Terra Cotta Bloom

Overview

The Terra Cotta Bloom palette masterfully blends rich, warm clay tones with soft, sun-drenched oranges, evoking the serene beauty of Mediterranean gardens. Ranging from the deep, grounding #8A4F2E to the airy #F5CC9D, with the inviting #C06F3F as a central hue, this collection is perfect for creating designs that feel both established and gently vibrant. Developers and designers can leverage the robust #A35C33 for strong foundations, while the lighter #E09C6B adds approachable warmth. This palette offers a sophisticated, natural aesthetic, ideal for conveying comfort and rustic elegance in digital spaces.

Best used for

Mediterranean-inspired architecture or design websites
Gardening and landscaping services branding
Café or bakery digital presence
E-commerce for natural fibers or textiles
Travel blogs focused on warm climates
Branding for artisanal jams or baked goods

Suggested color roles

primary

Use #C06F3F for main calls to action, offering a balanced and inviting focal point.

secondary

Apply #E09C6B for secondary elements or subtle accents, providing a soft, approachable warmth.

accent

Reserve #F5CC9D for delicate highlights, soft background textures, or light typography on dark backgrounds.

background

Employ #A35C33 for a deep, grounding background that anchors content, or a light cream for content areas.

text

A very dark brown like #8A4F2E provides excellent contrast on lighter shades; white text is effective on #A35C33.

Accessibility notes

#F5CC9D requires very dark text (e.g., #8A4F2E or black) to meet WCAG AA contrast standards.
Ensure sufficient contrast between #E09C6B and #C06F3F if used for text and background, as they are close in lightness.
Use a contrast checker for all foreground/background pairings, especially with the lighter #F5CC9D.
Consider providing clear hover states for interactive elements using similar orange hues like #C06F3F and #E09C6B.

Recommended combinations

Garden Earth

Creates a strong, grounding base with progressively lighter tones for layered content.

#8A4F2E · #A35C33 · #C06F3F

Sun-kissed Bloom

Ideal for soft gradients or highlighting elements against a deeper, rich background.

#E09C6B · #F5CC9D · #A35C33

Rustic Elegance

The primary orange with a deep brown for text, and a lighter orange for secondary elements.

#C06F3F · #8A4F2E · #E09C6B

CSS variables

:root {
  --terra-cotta-bloom-6-1: #C06F3F;
  --terra-cotta-bloom-6-2: #E09C6B;
  --terra-cotta-bloom-6-3: #A35C33;
  --terra-cotta-bloom-6-4: #F5CC9D;
  --terra-cotta-bloom-6-5: #8A4F2E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terra-cotta-bloom-6": {
        1: "#C06F3F",
        2: "#E09C6B",
        3: "#A35C33",
        4: "#F5CC9D",
        5: "#8A4F2E",
      }
    }
  }
}

Hex values

Color 1#C06F3F

Color 2#E09C6B

Color 3#A35C33

Color 4#F5CC9D

Color 5#8A4F2E

Accessibility

Contrast checker

1.6:1Fail

1.4:1Fail

2.5:1Fail

1.7:1Fail

1.6:1Fail

2.2:1Fail

1.5:1Fail

2.8:1Fail

1.4:1Fail

2.2:1Fail

3.4:1AA18

1.3:1Fail

2.5:1Fail

1.5:1Fail

3.4:1AA18

4.3:1AA18

1.7:1Fail

2.8:1Fail

1.3:1Fail

4.3:1AA18

Similar palettes

More like Terra Cotta Bloom