Back to palettes

Palette

Earth Clay Ochre

Warm, raw tones inspired by ancient earth pigments and the sun-baked ochre hues of the natural world.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Earth Clay Ochre 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 Earth Clay Ochre.

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

Data visualization

#B8860B#DAA520#CD853F#A0522D#D2B48C

Palette guide

How to use Earth Clay Ochre

Overview

The Earth Clay Ochre palette presents warm, raw tones inspired by ancient earth pigments and the sun-baked ochre hues of the natural world. Featuring rich goldens like #B8860B and #DAA520, it blends seamlessly with earthy oranges and browns such as #CD853F and #A0522D, with #D2B48C adding a soft, sandy beige. This palette is ideal for designers and developers seeking to create natural, rustic, and authentic experiences. It's versatile for conveying warmth, history, and an organic feel across web interfaces, branding, and physical product designs, particularly those with a bohemian or natural aesthetic.

Best used for

  • Natural cosmetics branding
  • Bohemian interior design
  • Earthy fashion collections
  • Art and craft websites
  • Traditional pottery products
  • Outdoor adventure gear

Suggested color roles

primary

#DAA520 - A vibrant golden ochre, excellent for primary UI elements or brand accents.

secondary

#CD853F - A warm, inviting orange-brown, ideal for supporting content or secondary highlights.

accent

#A0522D - The deepest, most grounding reddish-brown, perfect for impactful accents or calls-to-action.

background

#D2B48C - The lightest, sandy beige, providing a soft and natural canvas.

text

#A0522D - A deep, readable reddish-brown, ensuring strong contrast on lighter palette colors.

Accessibility notes

  • Ensure #A0522D is used for text on #D2B48C or #DAA520 to meet WCAG contrast guidelines.
  • The bright #DAA520 should primarily be used as an accent or for large text against dark backgrounds, not for small body text.
  • Avoid using #D2B48C for text on #CD853F due to insufficient contrast.
  • Test all text/background color pairs thoroughly, especially for interactive elements, to ensure readability.

Recommended combinations

Ochre Sunset

Soft, warm background gradients or layered visual effects evoking natural light.

#D2B48C · #DAA520 · #CD853F

Earth Pigment

High-contrast headings, buttons, or key information against a clean, light backdrop.

#A0522D · #B8860B · #D2B48C

Natural Harmony

Creating balanced content blocks or decorative elements with an organic, ancient feel.

#CD853F · #DAA520 · #B8860B

CSS variables

:root {
  --earth-clay-ochre-1: #B8860B;
  --earth-clay-ochre-2: #DAA520;
  --earth-clay-ochre-3: #CD853F;
  --earth-clay-ochre-4: #A0522D;
  --earth-clay-ochre-5: #D2B48C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "earth-clay-ochre": {
        1: "#B8860B",
        2: "#DAA520",
        3: "#CD853F",
        4: "#A0522D",
        5: "#D2B48C",
      }
    }
  }
}

Related searches

earth clay color paletteochre natural tonesrustic warm pigmentsmineral inspired colorsbohemian earth scheme

Palette colors

Hex values

Color 1#B8860B
·
Color 2#DAA520
·
Color 3#CD853F
·
Color 4#A0522D
·
Color 5#D2B48C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.1:1Fail
1.7:1Fail
1.7:1Fail
2
1.5:1Fail
1.3:1Fail
2.5:1Fail
1.1:1Fail
3
1.1:1Fail
1.3:1Fail
1.9:1Fail
1.5:1Fail
4
1.7:1Fail
2.5:1Fail
1.9:1Fail
2.8:1Fail
5
1.7:1Fail
1.1:1Fail
1.5:1Fail
2.8:1Fail

Similar palettes

More like Earth Clay Ochre

View all earth
Adobe Sunset
Ancient Clay Vessel
Ancient Earth Pigment
Artisan Clay Glaze
Artisan Clay Vessel
Artisan Clay Vessel