Palette

Terra Bloom Harvest

Inspired by sunbaked earth and late autumn crops, blending warm clay and deep brown hues.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Terra Bloom Harvest 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 Bloom Harvest.

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

Data visualization

#F1DDBF#C8A387#9A785B#6D4C42#47332E

Palette guide

How to use Terra Bloom Harvest

Overview

The Terra Bloom Harvest palette is inspired by sunbaked earth and late autumn crops, blending warm clay and deep brown hues. From the creamy lightness of #F1DDBF, it transitions through inviting mid-tones like #C8A387 and #9A785B, culminating in the rich, grounding depths of #6D4C42 and #47332E. This collection is perfect for designers and developers seeking to evoke feelings of warmth, authenticity, and natural comfort. Its earthy, rustic tones are incredibly versatile for branding, interior design, and digital interfaces, providing a sense of organic elegance and timeless appeal across various applications.

Best used for

Food and beverage branding
Artisan crafts and handmade goods
Interior design and home decor
Rustic and farm-to-table businesses
Natural product packaging
Autumnal themed digital content

Suggested color roles

primary

Utilize #47332E as the deep, grounding primary color for backgrounds, headers, or core branding, establishing warmth and stability.

secondary

Employ #6D4C42 for supportive sections, subheadings, or secondary navigation, providing rich, earthy visual continuity.

accent

Apply #C8A387 for warm, inviting accents, interactive elements, or to highlight key information with a touch of natural brightness.

background

Use #F1DDBF as a creamy, light base for main content, creating a welcoming and readable backdrop.

text

For dark backgrounds like #47332E, use #F1DDBF or a near-white. On lighter backgrounds such as #F1DDBF, use #47332E or a dark charcoal for optimal contrast.

Accessibility notes

Ensure #47332E text on #F1DDBF backgrounds meets WCAG AA standards for optimal readability.
Be cautious when using #C8A387 on #9A785B for small text; verify contrast ratios carefully.
Avoid placing light text on #F1DDBF; darker hues are necessary for readability.
Always check contrast for interactive elements and links, especially when using mid-range browns.

Recommended combinations

Earthy Contrast

A strong dark-light contrast with a rich mid-brown, excellent for creating clear hierarchy and visual impact in layouts.

#47332E · #F1DDBF · #9A785B

Harvest Blend

Creates a smooth, warm progression of earthy tones, perfect for background gradients, layered UI, or indicating natural depth.

#C8A387 · #9A785B · #6D4C42

Rustic Highlight

Combines the deepest brown with a warm accent and a light base, ideal for highlighting features or creating a sense of natural elegance.

#47332E · #C8A387 · #F1DDBF

CSS variables

:root {
  --terra-bloom-harvest-1: #F1DDBF;
  --terra-bloom-harvest-2: #C8A387;
  --terra-bloom-harvest-3: #9A785B;
  --terra-bloom-harvest-4: #6D4C42;
  --terra-bloom-harvest-5: #47332E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terra-bloom-harvest": {
        1: "#F1DDBF",
        2: "#C8A387",
        3: "#9A785B",
        4: "#6D4C42",
        5: "#47332E",
      }
    }
  }
}

Hex values

Color 1#F1DDBF

Color 2#C8A387

Color 3#9A785B

Color 4#6D4C42

Color 5#47332E

Accessibility

Contrast checker

1.8:1Fail

3:1AA18

5.7:1AA

8.9:1AAA

1.8:1Fail

1.7:1Fail

3.3:1AA18

5.1:1AA

3:1AA18

1.7:1Fail

1.9:1Fail

2.9:1Fail

5.7:1AA

3.3:1AA18

1.9:1Fail

1.6:1Fail

8.9:1AAA

5.1:1AA

2.9:1Fail

1.6:1Fail

Similar palettes

More like Terra Bloom Harvest