Palette

Deep Earthy Pigment

A grounding collection of deep, rich browns and subtle tans, like natural pigments sourced from ancient soil.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Earthy Pigment 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 Deep Earthy Pigment.

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

Data visualization

#3F2A1E#6F4B3C#A57B6C#D0B2A3#F2E2D9

Palette guide

How to use Deep Earthy Pigment

Overview

The Deep Earthy Pigment palette offers a harmonious gradient of natural browns, moving from deep, rich tones to soft, almost creamy hues. It begins with the profound espresso of #3F2A1E, transitioning to the warm, mid-brown of #6F4B3C and the inviting taupe of #A57B6C. The palette brightens significantly with the light, sandy #D0B2A3, culminating in the delicate, near-white #F2E2D9. This collection is ideal for designs requiring an organic, calming, and sophisticated feel, perfect for conveying natural elegance or handcrafted quality. It provides excellent versatility for layered designs.

Best used for

Organic food and beverage branding
Interior design and home staging
Skincare and natural beauty products
Sustainable fashion e-commerce
Artisan craft websites
Coffee shop or bakery branding

Suggested color roles

primary

Use #6F4B3C for main content areas and branding, offering warmth and approachability.

secondary

#A57B6C works well for subheadings, cards, or background accents, providing a soft contrast.

accent

#3F2A1E can be used sparingly for strong accents or borders, adding a touch of deep sophistication.

background

#F2E2D9 offers a light, airy base, ensuring readability and a gentle aesthetic.

text

For light backgrounds, a dark brown like #3F2A1E or #6F4B3C provides excellent contrast. On darker shades, use #F2E2D9 or a pure white.

Accessibility notes

Ensure sufficient contrast when placing #A57B6C text on #D0B2A3 backgrounds.
#3F2A1E or #6F4B3C text on #F2E2D9 provides excellent readability.
Avoid using #D0B2A3 and #F2E2D9 for text and background pairings without significant size differentiation.
Always check contrast ratios, especially for smaller text against mid-tone colors.

Recommended combinations

Natural Gradient

Creates a smooth visual flow from deep to light, ideal for transitions or layered UI.

#3F2A1E · #A57B6C · #F2E2D9

Earthy Warmth

Provides a cozy, inviting feel, perfect for soft backgrounds and readable text.

#6F4B3C · #D0B2A3 · #F2E2D9

Pigment Contrast

Use the darkest brown for text, mid-brown for elements, and the lightest for background.

#3F2A1E · #6F4B3C · #F2E2D9

CSS variables

:root {
  --deep-earthy-pigment-1: #3F2A1E;
  --deep-earthy-pigment-2: #6F4B3C;
  --deep-earthy-pigment-3: #A57B6C;
  --deep-earthy-pigment-4: #D0B2A3;
  --deep-earthy-pigment-5: #F2E2D9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-earthy-pigment": {
        1: "#3F2A1E",
        2: "#6F4B3C",
        3: "#A57B6C",
        4: "#D0B2A3",
        5: "#F2E2D9",
      }
    }
  }
}

Hex values

Color 1#3F2A1E

Color 2#6F4B3C

Color 3#A57B6C

Color 4#D0B2A3

Color 5#F2E2D9

Accessibility

Contrast checker

1.8:1Fail

3.6:1AA18

6.8:1AA

10.7:1AAA

1.8:1Fail

2.1:1Fail

3.9:1AA18

6.1:1AA

3.6:1AA18

2.1:1Fail

1.9:1Fail

2.9:1Fail

6.8:1AA

3.9:1AA18

1.9:1Fail

1.6:1Fail

10.7:1AAA

6.1:1AA

2.9:1Fail

1.6:1Fail

Similar palettes

More like Deep Earthy Pigment

View all earth

Ancient Clay Vessel

Ancient Earth Pigment

Artisan Clay Vessel

Bohemian Loom Tapestry

Earthen Pigment Palette

Earthy Artisan Clay