Back to palettes

Palette

Terracotta Bloom Garden

Warm, earthy tones inspired by blooming flowers in terracotta pots under the soft sun.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Terracotta Bloom Garden 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 Terracotta Bloom Garden.

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

Data visualization

#D47963#E8B09F#F4DDCF#AC5D4A#7B3E2D

Palette guide

How to use Terracotta Bloom Garden

Overview

The Terracotta Bloom Garden palette draws inspiration from blooming flowers in terracotta pots under the soft sun, offering a warm and earthy collection of hues. From the vibrant #D47963 and the soft #E8B09F, to the deep, grounding #7B3E2D, this palette is perfect for designers and developers aiming to create inviting, natural, and charming visuals. It provides a versatile range for projects that celebrate nature, craftsmanship, and a cozy aesthetic, suitable for both digital interfaces and physical branding materials with a touch of warmth.

Best used for

  • Garden and floral design businesses
  • Natural home goods and decor stores
  • Artisanal food and beverage branding
  • Cozy cafe or bakery website designs
  • Wedding invitations or event branding
  • Eco-friendly product packaging

Suggested color roles

primary

The vibrant #D47963 serves as an energetic primary color, ideal for calls to action, prominent headings, or brand logos.

secondary

Use #AC5D4A for supporting content, subheadings, or as a rich background to ground the softer tones.

accent

The lightest shade, #F4DDCF, provides a delicate accent, perfect for highlights, clean backgrounds, or subtle graphic details.

background

The airy #F4DDCF creates a bright, spacious background, offering excellent contrast for darker text and elements. For a warmer base, consider #E8B09F.

text

For optimal readability on lighter backgrounds like #F4DDCF, use the darkest shade #7B3E2D or a deep charcoal. On dark backgrounds, a crisp off-white is recommended.

Accessibility notes

  • Ensure sufficient contrast when using #E8B09F and #F4DDCF for text, as they are close in value.
  • The deep #7B3E2D offers excellent contrast for light text, ensuring readability.
  • Pair the vibrant #D47963 with #7B3E2D for strong readability and a balanced visual impact.
  • Avoid placing light text on #AC5D4A without checking WCAG contrast ratios.

Recommended combinations

Sunbaked Pot

Creates a grounded yet fresh feel, great for hero sections or prominent graphics.

#7B3E2D · #D47963 · #F4DDCF

Soft Bloom

Offers a gentle, inviting combination, suitable for product descriptions or testimonials.

#E8B09F · #F4DDCF · #AC5D4A

Garden Earth

A robust and cohesive trio for navigation, buttons, or strong design elements.

#D47963 · #AC5D4A · #7B3E2D

CSS variables

:root {
  --terracotta-bloom-garden-1: #D47963;
  --terracotta-bloom-garden-2: #E8B09F;
  --terracotta-bloom-garden-3: #F4DDCF;
  --terracotta-bloom-garden-4: #AC5D4A;
  --terracotta-bloom-garden-5: #7B3E2D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terracotta-bloom-garden": {
        1: "#D47963",
        2: "#E8B09F",
        3: "#F4DDCF",
        4: "#AC5D4A",
        5: "#7B3E2D",
      }
    }
  }
}

Related searches

terracotta bloom color palettewarm garden colorsfloral earth tonesnatural sunbaked schemerustic pot colors

Palette colors

Hex values

Color 1#D47963
·
Color 2#E8B09F
·
Color 3#F4DDCF
·
Color 4#AC5D4A
·
Color 5#7B3E2D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.4:1Fail
1.5:1Fail
2.6:1Fail
2
1.7:1Fail
1.4:1Fail
2.5:1Fail
4.3:1AA18
3
2.4:1Fail
1.4:1Fail
3.6:1AA18
6.3:1AA
4
1.5:1Fail
2.5:1Fail
3.6:1AA18
1.7:1Fail
5
2.6:1Fail
4.3:1AA18
6.3:1AA
1.7:1Fail

Similar palettes

More like Terracotta Bloom Garden

View all earth