Back to palettes

Palette

Desert Mesa Clay

Sun-baked hues of reds, oranges, and warm browns inspired by ancient desert mesas and their weathered clay.

Earthnatural5 colors
More Earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B22222#D2691E#F4A460#DEB887#CD853F

Palette guide

How to use Desert Mesa Clay

Overview

The Desert Mesa Clay palette vibrant, sun-baked hues of terracotta, rust, and warm oranges, evoking the majestic beauty of ancient desert mesas. From the bold #B22222 to the softer #DEB887, this collection offers a dynamic range for projects seeking a robust yet natural aesthetic. Designers can utilize the rich #D2691E for impactful calls to action and the inviting #F4A460 for appealing backgrounds. This palette is ideal for branding, web design, or editorial content that aims to convey strength, warmth, and a deep connection to the earth, creating visually striking and memorable user experiences.

Best used for

  • Southwestern landscape photography
  • Adventure travel websites
  • Earthy pottery or ceramics brands
  • Rustic restaurant interiors
  • Outdoor gear marketing
  • Native American cultural exhibits

Suggested color roles

primary

Use #B22222 as a bold, energetic primary for headers or key brand elements, conveying strength.

secondary

Employ #D2691E for secondary calls to action or prominent UI components, adding warmth and impact.

accent

Introduce #CD853F as an earthy accent for highlights or subtle interactive elements, maintaining cohesion.

background

Apply #DEB887 for soft, sandy backgrounds, allowing the stronger reds and oranges to stand out.

text

Utilize #B22222 for primary body text, ensuring excellent readability against lighter backgrounds.

Accessibility notes

  • Ensure #B22222 or #D2691E is used for text against #F4A460 or #DEB887 for sufficient contrast.
  • Avoid pairing #F4A460 with #DEB887 for small text due to low contrast.
  • The dark #B22222 provides excellent contrast for headings on any lighter color in the palette.
  • Always check contrast ratios for text on colored backgrounds to meet accessibility standards.

Recommended combinations

Mesa Sunset

Creates a dramatic, warm gradient for hero sections or captivating visual narratives.

#B22222 · #D2691E · #F4A460

Clay Earth

Effective for natural backgrounds, content cards, or subtle UI elements with an earthy feel.

#DEB887 · #CD853F · #D2691E

Desert Rust

Provides a striking contrast for impactful branding, buttons, or data visualization.

#B22222 · #CD853F · #F4A460

CSS variables

:root {
  --desert-mesa-clay-1: #B22222;
  --desert-mesa-clay-2: #D2691E;
  --desert-mesa-clay-3: #F4A460;
  --desert-mesa-clay-4: #DEB887;
  --desert-mesa-clay-5: #CD853F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-mesa-clay": {
        1: "#B22222",
        2: "#D2691E",
        3: "#F4A460",
        4: "#DEB887",
        5: "#CD853F",
      }
    }
  }
}

Related searches

desert mesa colorsterracotta red orangeearthy landscape palettewarm rustic designsouthwest clay hues

Palette colors

Hex values

Color 1#B22222
·
Color 2#D2691E
·
Color 3#F4A460
·
Color 4#DEB887
·
Color 5#CD853F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.3:1AA18
3.6:1AA18
2.2:1Fail
2
1.8:1Fail
1.8:1Fail
2:1Fail
1.2:1Fail
3
3.3:1AA18
1.8:1Fail
1.1:1Fail
1.5:1Fail
4
3.6:1AA18
2:1Fail
1.1:1Fail
1.6:1Fail
5
2.2:1Fail
1.2:1Fail
1.5:1Fail
1.6:1Fail

Similar palettes

More like Desert Mesa Clay

View all Earth
Moroccan Spice Market
Sunbaked Canyon Walls
Bohemian Earth Loom
Deserted Ruin Twilight
Rustic Market Harvest
Sun Drenched Provence