Palette

Arid Mesa Dust

Dry, sun-baked earth tones capturing the quiet beauty of a remote canyon trail under a dusty sky.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Arid Mesa Dust 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 Arid Mesa Dust.

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

Data visualization

#8B4513#A0522D#C7825E#E4B097#F0C8B7

Palette guide

How to use Arid Mesa Dust

Overview

The Arid Mesa Dust palette captures the quiet beauty of a remote canyon trail under a dusty sky, with dry, sun-baked earth tones. It features a rich progression from deep brown #8B4513 to lighter, dusty beiges like #E4B097 and #F0C8B7, alongside warm mid-tones such as #A0522D and #C7825E. Designers and developers can leverage these hues to create grounded, authentic, and ruggedly elegant experiences. The palette evokes a sense of natural history and enduring strength, perfect for designs that need to feel solid and reliable. This collection is ideal for projects seeking a warm, rustic, and timeless aesthetic inspired by vast, ancient landscapes.

Best used for

Outdoor gear and adventure apparel branding
Rustic furniture and woodworking design
Historical museums and cultural institutions
Natural landscapes photography portfolios
Traditional crafts and artisanal products
Earthy and grounded web design

Suggested color roles

primary

Utilize #A0522D as the primary color for a rich, foundational brown in headers, main graphics, or key brand elements.

secondary

Employ #C7825E for warm, approachable mid-tones in supporting elements, subheadings, or background sections.

accent

Apply #E4B097 as a soft, dusty highlight for delicate details, decorative patterns, or subtle visual interest.

background

Use #F0C8B7 for a light, natural canvas background that provides excellent contrast for darker text and a warm feel.

text

For body text, #8B4513 offers a strong, grounding contrast and excellent readability on lighter backgrounds.

Accessibility notes

The very light #F0C8B7 and #E4B097 require dark text like #8B4513 for optimal readability.
Ensure #C7825E provides enough contrast when used for text against #E4B097 or similar light backgrounds.
Avoid using #F0C8B7 for small text or critical information due to its light value.
Always verify WCAG AA compliance for all text and UI elements, especially for contrast ratios.

Recommended combinations

Mesa Layers

Ideal for deep, grounding sections, rich backgrounds, or creating a sense of geological depth and stability.

#8B4513 · #A0522D · #C7825E

Dusty Trails

Excellent for light interfaces, subtle branding, or conveying a gentle, airy feel with hints of warmth.

#E4B097 · #F0C8B7 · #A0522D

Canyon Walls

Perfect for headers, textural elements, or designs that emphasize the layered beauty of natural rock formations.

#C7825E · #E4B097 · #8B4513

CSS variables

:root {
  --arid-mesa-dust-1: #8B4513;
  --arid-mesa-dust-2: #A0522D;
  --arid-mesa-dust-3: #C7825E;
  --arid-mesa-dust-4: #E4B097;
  --arid-mesa-dust-5: #F0C8B7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arid-mesa-dust": {
        1: "#8B4513",
        2: "#A0522D",
        3: "#C7825E",
        4: "#E4B097",
        5: "#F0C8B7",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#A0522D

Color 3#C7825E

Color 4#E4B097

Color 5#F0C8B7

Accessibility

Contrast checker

1.3:1Fail

2.3:1Fail

3.7:1AA18

4.6:1AA

1.3:1Fail

1.8:1Fail

2.9:1Fail

3.7:1AA18

2.3:1Fail

1.8:1Fail

1.6:1Fail

2:1Fail

3.7:1AA18

2.9:1Fail

1.6:1Fail

1.2:1Fail

4.6:1AA

3.7:1AA18

2:1Fail

1.2:1Fail

Similar palettes

More like Arid Mesa Dust

Arid Mesa Dust

See it in context.

Ready when you are.

Built with Arid Mesa Dust.

How to use Arid Mesa Dust

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Mesa Layers

Dusty Trails

Canyon Walls

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Arid Mesa Dust