Palette

Terra Firma Fields

Grounded tones representing fertile earth, sun-drenched fields, and raw, untouched nature.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#A0522D#D2B48C#B58E5E#6E4A28

Palette guide

How to use Terra Firma Fields

Overview

The Terra Firma Fields palette embodies the essence of fertile earth and sun-drenched landscapes, offering a rich collection of natural browns. From the deep, grounding #6E4A28 to the warm, inviting #8B4513, and the light, sandy #D2B48C, this palette is perfect for designs seeking an organic, rustic, and authentic feel. It provides a versatile spectrum for designers creating natural brands or developers building websites that evoke a sense of heritage and connection to the land, ensuring a harmonious and earthy aesthetic.

Best used for

Agricultural and farm-to-table branding
Outdoor lifestyle and adventure apparel
Sustainable and eco-friendly product lines
Natural skincare and beauty product packaging
Website designs for rural tourism or retreat centers
Art and photography with a focus on landscapes

Suggested color roles

primary

The robust #8B4513 serves as an excellent primary color, conveying strength and natural richness for headings and key branding.

secondary

Use #A0522D for supporting content, subheadings, or as a background for sections that need a softer, yet still earthy, presence.

accent

The light, sandy #D2B48C provides a gentle accent, perfect for highlights, buttons, or as a background for lighter elements.

background

The lightest shade, #D2B48C, offers a clean, neutral background that allows darker elements to stand out. For a deeper, more immersive feel, consider #6E4A28.

text

For optimal readability, use the darkest shade #6E4A28 or a deep charcoal for text on lighter backgrounds like #D2B48C. On dark backgrounds, a crisp off-white is ideal.

Accessibility notes

Ensure good contrast for text placed on #D2B48C; a dark brown or black is recommended.
The deep #6E4A28 provides strong contrast for light-colored text.
Avoid using #B58E5E and #D2B48C for small text elements against each other due to potentially low contrast.
Pair #8B4513 with #D2B48C for a classic and highly readable combination.

Recommended combinations

Rich Earth

Creates a grounded yet open feel, great for section dividers and content blocks.

#6E4A28 · #8B4513 · #D2B48C

Sun-Kissed

Offers a warm, inviting combination, suitable for testimonials or product showcases.

#A0522D · #D2B48C · #B58E5E

Rustic Blend

A strong, cohesive trio for headings and navigation, conveying natural authenticity.

#8B4513 · #6E4A28 · #A0522D

CSS variables

:root {
  --terra-firma-fields-1: #8B4513;
  --terra-firma-fields-2: #A0522D;
  --terra-firma-fields-3: #D2B48C;
  --terra-firma-fields-4: #B58E5E;
  --terra-firma-fields-5: #6E4A28;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terra-firma-fields": {
        1: "#8B4513",
        2: "#A0522D",
        3: "#D2B48C",
        4: "#B58E5E",
        5: "#6E4A28",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#A0522D

Color 3#D2B48C

Color 4#B58E5E

Color 5#6E4A28

Accessibility

Contrast checker

1.3:1Fail

3.6:1AA18

2.4:1Fail

1.1:1Fail

1.3:1Fail

2.8:1Fail

1.9:1Fail

1.4:1Fail

3.6:1AA18

2.8:1Fail

1.5:1Fail

4:1AA18

2.4:1Fail

1.9:1Fail

1.5:1Fail

2.6:1Fail

1.1:1Fail

1.4:1Fail

4:1AA18

2.6:1Fail

Similar palettes

More like Terra Firma Fields

View all earth

Deep Earthy Pigment

Forest Path Tones

Woven Seagrass Basket

Aged Wood Stain

Ancient Clay Vessel

Ancient Forest Hush