Back to palettes

Palette

Desert Clay Hills

Warm, muted tones reflecting the sun-baked clay and natural beauty of desert landscapes.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Desert Clay Hills 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 Desert Clay Hills.

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

Data visualization

#B97A57#D3A07F#EEC9AB#FDDBCD#8A5E3F

Palette guide

How to use Desert Clay Hills

Overview

The Desert Clay Hills palette features warm, muted tones reflecting the sun-baked clay and natural beauty of desert landscapes. This harmonious collection is built around the inviting #B97A57 and the softer #D3A07F, complemented by the airy #EEC9AB and the almost-ethereal #FDDBCD. A grounding presence is found in the deeper #8A5E3F, ensuring a balanced and tranquil aesthetic. Designers and developers can utilize these colors to evoke a sense of peace, natural elegance, and understated warmth. It's an excellent choice for projects requiring a soft, inviting, and authentically earthy visual experience.

Best used for

  • Minimalist website designs
  • Eco-friendly brand identity
  • Natural product packaging
  • Spa or wellness center branding
  • Interior design for serene spaces
  • Photography portfolios

Suggested color roles

primary

#B97A57 - A warm, muted clay-brown, excellent for main content areas or dominant graphic elements, offering a soft, natural base.

secondary

#8A5E3F - A deep, rich earth brown, providing a strong, grounding presence for navigation, footers, or important textual content.

accent

#D3A07F - A lighter, warm peach-beige, perfect for subtle highlights, interactive states, or decorative flourishes that add visual interest.

background

#FDDBCD - A very light, near-white peach-beige, serving as a clean, spacious backdrop that enhances readability and the natural feel.

text

#8A5E3F - A deep, robust brown, offering excellent readability for body text against lighter backgrounds, or use black for maximum contrast.

Accessibility notes

  • Ensure sufficient contrast between #8A5E3F text and #FDDBCD backgrounds for WCAG AA compliance.
  • Avoid using #B97A57 or #D3A07F for small text on similar background shades, as contrast may be insufficient.
  • For critical information, pair the darkest color #8A5E3F with the lightest background #FDDBCD.
  • Consider using pure black or a very dark charcoal for body text on very light backgrounds for optimal legibility.

Recommended combinations

Clay Horizon

High-contrast pairing for headlines and clean backgrounds, evoking distant hills and sky.

#8A5E3F · #FDDBCD · #B97A57

Sun-kissed Slopes

A soft, warm blend for layered UI elements or subtle branding accents, reflecting gentle light.

#B97A57 · #D3A07F · #EEC9AB

Desert Layers

A versatile trio for extensive layouts, providing depth and natural warmth across sections.

#B97A57 · #EEC9AB · #FDDBCD

CSS variables

:root {
  --desert-clay-hills-1: #B97A57;
  --desert-clay-hills-2: #D3A07F;
  --desert-clay-hills-3: #EEC9AB;
  --desert-clay-hills-4: #FDDBCD;
  --desert-clay-hills-5: #8A5E3F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-clay-hills": {
        1: "#B97A57",
        2: "#D3A07F",
        3: "#EEC9AB",
        4: "#FDDBCD",
        5: "#8A5E3F",
      }
    }
  }
}

Related searches

desert clay brown palettemuted earth tonesnatural rustic colorssouthwest landscape schemewarm beige brown palette

Palette colors

Hex values

Color 1#B97A57
·
Color 2#D3A07F
·
Color 3#EEC9AB
·
Color 4#FDDBCD
·
Color 5#8A5E3F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.3:1Fail
2.7:1Fail
1.6:1Fail
2
1.5:1Fail
1.5:1Fail
1.8:1Fail
2.4:1Fail
3
2.3:1Fail
1.5:1Fail
1.2:1Fail
3.6:1AA18
4
2.7:1Fail
1.8:1Fail
1.2:1Fail
4.3:1AA18
5
1.6:1Fail
2.4:1Fail
3.6:1AA18
4.3:1AA18

Similar palettes

More like Desert Clay Hills

View all earth
Canyon Whisper
Ceramic Pot Earth
Clay Canyon Artifacts
Desert Clay Hues
Earthen Clay Crafts
Earthen Clay Pottery