Palette

Desert Clay Warmth

A rustic palette inspired by sun-baked adobe and the muted tones of arid landscapes, evoking cozy, sun-drenched environments.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#C28B65#E0B496#8B5A3C#5C3D2E#D1A27F

Palette guide

How to use Desert Clay Warmth

Overview

The Desert Clay Warmth palette is a rustic collection inspired by sun-baked adobe and the muted tones of arid landscapes, evoking cozy, sun-drenched environments. This natural scheme features the deep #5C3D2E and #8B5A3C, complemented by the inviting #C28B65 and the lighter #D1A27F. The inclusion of the airy #E0B496 adds a balancing, sun-kissed element. Designers and developers can utilize these colors to evoke a sense of comfort, authenticity, and organic charm. It's an excellent choice for projects requiring a cozy, rustic, and genuinely earthy visual experience that connects to natural living.

Best used for

Rustic home decor brands
Southwestern-themed events
Natural beauty and wellness products
Earthy lifestyle blogs
Handcrafted artisan products
Cozy cafe or bakery branding

Suggested color roles

primary

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

secondary

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

accent

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

background

#E0B496 - A very light, creamy beige, serving as a clean, spacious backdrop that enhances readability and the natural feel.

text

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

Accessibility notes

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

Recommended combinations

Adobe Contrast

High-contrast pairing for headlines and clean backgrounds, evoking traditional desert architecture.

#5C3D2E · #E0B496 · #C28B65

Terracotta Blend

A warm, inviting blend for layered UI elements or subtle branding accents, reflecting sun-baked clay.

#C28B65 · #D1A27F · #E0B496

Earthy Layers

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

#8B5A3C · #E0B496 · #C28B65

CSS variables

:root {
  --desert-clay-warmth-1: #C28B65;
  --desert-clay-warmth-2: #E0B496;
  --desert-clay-warmth-3: #8B5A3C;
  --desert-clay-warmth-4: #5C3D2E;
  --desert-clay-warmth-5: #D1A27F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-clay-warmth": {
        1: "#C28B65",
        2: "#E0B496",
        3: "#8B5A3C",
        4: "#5C3D2E",
        5: "#D1A27F",
      }
    }
  }
}

Hex values

Color 1#C28B65

Color 2#E0B496

Color 3#8B5A3C

Color 4#5C3D2E

Color 5#D1A27F

Accessibility

Contrast checker

1.6:1Fail

2:1Fail

3.3:1AA18

1.3:1Fail

1.6:1Fail

3.1:1AA18

5.2:1AA

1.2:1Fail

2:1Fail

3.1:1AA18

1.7:1Fail

2.5:1Fail

3.3:1AA18

5.2:1AA

1.7:1Fail

4.2:1AA18

1.3:1Fail

1.2:1Fail

2.5:1Fail

4.2:1AA18

Similar palettes

More like Desert Clay Warmth

View all earth

Sunstone Mesa Horizon

Adobe Sunset

Artisan Clay Kiln

Bohemian Desert Bloom

Canyon Cliffside View

Canyon Wall Rust