Palette

Southwestern Clay Mesa

Earthy, sun-baked tones recalling the rugged beauty of desert landscapes and clay structures.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B25F37#D18749#7D3F28#E6AF68#9E4F33

Palette guide

How to use Southwestern Clay Mesa

Overview

The Southwestern Clay Mesa palette captures the rugged beauty of desert landscapes and sun-baked clay structures with its rich, earthy tones. It features a deep terracotta (#B25F37), a warm canyon orange (#D18749), a strong espresso brown (#7D3F28), a lighter sandy ochre (#E6AF68), and a robust reddish-brown (#9E4F33). This palette is an excellent choice for designers and developers creating rustic, artisanal, or nature-inspired projects. Its grounded warmth and textural depth are perfect for craft branding, outdoor adventure themes, or digital interfaces that aim to convey authenticity and natural strength.

Best used for

Craft stores and artisan workshops
Pottery and ceramics branding
Outdoor adventure and hiking brands
Rustic home decor websites
Indigenous art and cultural projects
Ecotourism promotions

Suggested color roles

primary

Use #D18749 as the inviting, warm orange-brown for key visual components or headers.

secondary

Apply #B25F37 for a richer, grounding brown, suitable for backgrounds or significant sections.

accent

Introduce #E6AF68 as a lighter, sandy highlight for subtle details or secondary information.

background

Use #E6AF68 or a very light cream as a soft, natural background to let the deeper tones stand out.

text

Employ #7D3F28 for body text and headings, providing a deep, strong brown for maximum readability.

Accessibility notes

Use #7D3F28 for all main body text against lighter backgrounds like #E6AF68 for optimal readability.
Be mindful of the contrast between #B25F37 and #9E4F33 as they are quite close; use them strategically.
Ensure interactive elements meet WCAG contrast standards, especially when using mid-tone colors.
Avoid using #E6AF68 for small text on light backgrounds due to potential low contrast.

Recommended combinations

Clay Depth

Create a rich, grounded, and inviting feel, perfect for robust branding or a strong visual hierarchy.

#7D3F28 · #B25F37 · #D18749

Mesa Sunrise

Evoke soft highlights with deep shadows, ideal for landscape photography or natural themes.

#E6AF68 · #D18749 · #9E4F33

Rustic Accent

Combine these for a strong, traditional feel, great for heritage brands or artisanal product displays.

#9E4F33 · #B25F37 · #E6AF68

CSS variables

:root {
  --southwestern-clay-mesa-1: #B25F37;
  --southwestern-clay-mesa-2: #D18749;
  --southwestern-clay-mesa-3: #7D3F28;
  --southwestern-clay-mesa-4: #E6AF68;
  --southwestern-clay-mesa-5: #9E4F33;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "southwestern-clay-mesa": {
        1: "#B25F37",
        2: "#D18749",
        3: "#7D3F28",
        4: "#E6AF68",
        5: "#9E4F33",
      }
    }
  }
}

Hex values

Color 1#B25F37

Color 2#D18749

Color 3#7D3F28

Color 4#E6AF68

Color 5#9E4F33

Accessibility

Contrast checker

1.6:1Fail

1.8:1Fail

2.3:1Fail

1.3:1Fail

1.6:1Fail

2.8:1Fail

1.5:1Fail

2:1Fail

1.8:1Fail

2.8:1Fail

4.1:1AA18

1.4:1Fail