Back to palettes

Palette

Earthy Clay Bloom

Rich, sun-baked tones reminiscent of fertile earth and blooming desert flowers.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Earthy Clay 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 Earthy Clay Bloom.

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

Data visualization

#724231#A36B4F#D49C7D#E8C1A6#FAE5CF

Palette guide

How to use Earthy Clay Bloom

Overview

The Earthy Clay Bloom palette captures the essence of fertile earth and blooming desert flowers with a warm, inviting progression of terracotta and beige tones. From the deep #724231 (Dark Brown) to the soft, near-white #FAE5CF (Pale Peach), this collection offers a harmonious and natural aesthetic. Designers can leverage the versatile #A36B4F (Medium Terracotta) as a core tone, creating designs that feel organic, comforting, and subtly vibrant. This palette is ideal for projects seeking warmth, growth, and a connection to natural landscapes, providing a gentle yet rich visual experience.

Best used for

  • Botanical and garden-themed branding
  • Natural skincare and cosmetic packaging
  • Desert-inspired art and photography
  • Organic food and farm-to-table products
  • Rustic wedding themes and decor
  • Eco-friendly lifestyle blogs and websites

Suggested color roles

primary

#724231 (Dark Brown) serves as a deep, grounding color for primary branding, headings, and impactful elements.

secondary

#A36B4F (Medium Terracotta) offers a rich, warm tone for subheadings, important content blocks, and supporting UI elements.

accent

#D49C7D (Light Terracotta) provides a brighter, earthy accent for calls to action, interactive elements, or key highlights.

background

#FAE5CF (Pale Peach) creates a very light, airy background that brightens the overall aesthetic and enhances readability.

text

Use #724231 for primary text on #FAE5CF, ensuring excellent readability and strong visual impact.

Accessibility notes

  • Both #724231 and #A36B4F provide excellent contrast on #FAE5CF, making them highly accessible for text.
  • Ensure #D49C7D on #FAE5CF meets WCAG AA guidelines for large text (18pt or 14pt bold) readability.
  • Avoid using #E8C1A6 for small text on #FAE5CF due to potential low contrast; reserve for larger decorative text.
  • Use clear visual hierarchy and sufficient spacing to enhance readability within this warm palette, especially for long-form content.

Recommended combinations

Clay Depth

Create strong, hierarchical content and branding elements with these deep, rich tones.

#724231 · #A36B4F · #D49C7D

Bloom Glow

Apply gentle transitions for backgrounds, secondary elements, or subtle graphic patterns to evoke a soft glow.

#E8C1A6 · #FAE5CF · #D49C7D

Organic Contrast

Design with a light background, dark text, and a warm mid-tone accent for a balanced and organic layout.

#FAE5CF · #724231 · #A36B4F

CSS variables

:root {
  --earthy-clay-bloom-1: #724231;
  --earthy-clay-bloom-2: #A36B4F;
  --earthy-clay-bloom-3: #D49C7D;
  --earthy-clay-bloom-4: #E8C1A6;
  --earthy-clay-bloom-5: #FAE5CF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "earthy-clay-bloom": {
        1: "#724231",
        2: "#A36B4F",
        3: "#D49C7D",
        4: "#E8C1A6",
        5: "#FAE5CF",
      }
    }
  }
}

Related searches

earthy terracotta palettenatural clay colorsdesert bloom schemewarm organic designbotanical earth tones

Palette colors

Hex values

Color 1#724231
·
Color 2#A36B4F
·
Color 3#D49C7D
·
Color 4#E8C1A6
·
Color 5#FAE5CF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.5:1AA18
5:1AA
6.8:1AA
2
1.9:1Fail
1.9:1Fail
2.6:1Fail
3.6:1AA18
3
3.5:1AA18
1.9:1Fail
1.4:1Fail
1.9:1Fail
4
5:1AA
2.6:1Fail
1.4:1Fail
1.4:1Fail
5
6.8:1AA
3.6:1AA18
1.9:1Fail
1.4:1Fail

Similar palettes

More like Earthy Clay Bloom

View all earth