Back to palettes

Palette

Terra Firma Earth

Grounding shades of terracotta, warm browns, and deep sienna from the very earth itself.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Terra Firma Earth 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 Firma Earth.

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

Data visualization

#D1BAA9#B49280#8D625A#653E3E#422828

Palette guide

How to use Terra Firma Earth

Overview

The Terra Firma Earth palette grounds designs with a sophisticated range of warm browns and terracotta-inspired hues, reflecting the rich, varied tones of natural soil. From the light, airy #D1BAA9 to the deep, grounding #422828, and including the inviting #8D625A, this palette brings a sense of stability and organic elegance. It's an excellent choice for designers aiming to convey authenticity and a connection to nature, offering a versatile range for both digital interfaces and physical branding materials that feel both classic and contemporary.

Best used for

  • Organic food and beverage branding
  • Eco-friendly product packaging and websites
  • Interior design themes (rustic, minimalist, natural)
  • Artisan craft businesses (pottery, textiles)
  • Educational content related to geology or archaeology
  • Wellness and spa branding for a calming effect

Suggested color roles

primary

The rich #8D625A serves as a strong primary, offering a warm and inviting base for main content areas or brand logos.

secondary

Use #B49280 for complementary elements, subheadings, or backgrounds where a slightly lighter, warm brown is desired.

accent

The deepest shade, #422828, can be used sparingly for impactful accents, strong borders, or important calls to action against lighter backgrounds.

background

The lightest hue, #D1BAA9, creates a clean, airy background, providing excellent contrast for darker text and elements. For a more dramatic feel, use #422828.

text

For optimal legibility, use the deep #422828 or a near-black charcoal for text on lighter backgrounds like #D1BAA9. For dark backgrounds, a light off-white is recommended.

Accessibility notes

  • Ensure sufficient contrast when using #B49280 and #D1BAA9 together for text, as they are close in value.
  • The darkest color, #422828, offers excellent contrast for light text on dark backgrounds.
  • Pair #653E3E with #D1BAA9 for strong readability and a balanced visual impact.
  • Avoid placing light text on #B49280 without checking WCAG contrast ratios.

Recommended combinations

Deep Roots

Excellent for defining sections, with the dark providing depth and the light for readability.

#422828 · #8D625A · #D1BAA9

Warm Clay

Creates a soft, inviting look, suitable for product descriptions or testimonials.

#B49280 · #653E3E · #D1BAA9

Solid Ground

A robust combination for navigation or footer elements, providing a sense of stability.

#8D625A · #422828 · #B49280

CSS variables

:root {
  --terra-firma-earth-1: #D1BAA9;
  --terra-firma-earth-2: #B49280;
  --terra-firma-earth-3: #8D625A;
  --terra-firma-earth-4: #653E3E;
  --terra-firma-earth-5: #422828;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terra-firma-earth": {
        1: "#D1BAA9",
        2: "#B49280",
        3: "#8D625A",
        4: "#653E3E",
        5: "#422828",
      }
    }
  }
}

Related searches

earth tone color palettenatural brown color schemerustic terracotta colorsgrounding earth toneswarm sienna palette

Palette colors

Hex values

Color 1#D1BAA9
·
Color 2#B49280
·
Color 3#8D625A
·
Color 4#653E3E
·
Color 5#422828
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.8:1Fail
4.9:1AA
7.2:1AAA
2
1.5:1Fail
1.8:1Fail
3.2:1AA18
4.7:1AA
3
2.8:1Fail
1.8:1Fail
1.7:1Fail
2.6:1Fail
4
4.9:1AA
3.2:1AA18
1.7:1Fail
1.5:1Fail
5
7.2:1AAA
4.7:1AA
2.6:1Fail
1.5:1Fail

Similar palettes

More like Terra Firma Earth

View all earth