Palette

Desert Canyon Clay

Warm, sunbaked hues echoing the ancient ochre and terracotta colors of a sculpted desert canyon.

EarthNatural5 colors

More Earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8C4F3E#D9804B#F0C890#6A3A2F#A5735A

Palette guide

How to use Desert Canyon Clay

Overview

The Desert Canyon Clay palette is a vibrant collection of warm, sunbaked hues, echoing the ancient ochre and terracotta colors of a sculpted desert canyon. With rich tones like the deep #6A3A2F and the rustic #A5735A, alongside the striking #D9804B and the lighter #F0C890, this palette delivers a powerful, earthy feel. The robust #8C4F3E grounds the scheme, making it perfect for designs that aim to convey strength, warmth, and a connection to natural landscapes. Designers and developers will find these colors excellent for creating engaging, rustic, and inviting visual experiences.

Best used for

Rustic brand identities
Southwestern interior design
Adventure travel websites
Craft and pottery businesses
Earthy product packaging
Restaurant or cafe branding

Suggested color roles

primary

#D9804B - A warm, inviting terracotta, excellent for calls to action, main headers, or dominant graphic elements.

secondary

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

accent

#F0C890 - A soft, sun-drenched beige, perfect for highlights, backgrounds for testimonials, or subtle interactive states.

background

#F0C890 - A light, warm beige that provides a soft, inviting backdrop, enhancing the natural feel of the palette.

text

#6A3A2F - A dark, earthy brown, offering excellent readability for body text against lighter backgrounds, or use black for maximum contrast.

Accessibility notes

Ensure #6A3A2F text on #F0C890 background meets WCAG contrast standards for readability.
Avoid using #D9804B and #A5735A for small text on similar background shades, as contrast may be insufficient.
For critical information, pair darker colors like #6A3A2F with the lightest #F0C890.
Consider using pure black or near-black text on #F0C890 for maximum legibility, especially for body copy.

Recommended combinations

Canyon Wall

Strong contrast for headings and subheadings, evoking depth and warmth.

#6A3A2F · #D9804B · #8C4F3E

Desert Glow

A vibrant and light pairing, ideal for calls to action or highlighting key information.

#D9804B · #F0C890 · #6A3A2F

Earthen Harmony

A balanced trio for extensive layouts, providing visual hierarchy and a natural feel.

#8C4F3E · #A5735A · #F0C890

CSS variables

:root {
  --desert-canyon-clay-1: #8C4F3E;
  --desert-canyon-clay-2: #D9804B;
  --desert-canyon-clay-3: #F0C890;
  --desert-canyon-clay-4: #6A3A2F;
  --desert-canyon-clay-5: #A5735A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-canyon-clay": {
        1: "#8C4F3E",
        2: "#D9804B",
        3: "#F0C890",
        4: "#6A3A2F",
        5: "#A5735A",
      }
    }
  }
}

Hex values

Color 1#8C4F3E

Color 2#D9804B

Color 3#F0C890

Color 4#6A3A2F

Color 5#A5735A

Accessibility

Contrast checker

2.2:1Fail

4:1AA18

1.5:1Fail

1.6:1Fail

2.2:1Fail

1.9:1Fail

3.2:1AA18

1.4:1Fail

4:1AA18

1.9:1Fail

5.9:1AA

2.6:1Fail

1.5:1Fail

3.2:1AA18

5.9:1AA

2.3:1Fail

1.6:1Fail

1.4:1Fail

2.6:1Fail

2.3:1Fail

Similar palettes

More like Desert Canyon Clay

Earthenware Rustic Bake

Mystic Canyon Glow

Sun-Kissed Adobe Wall