Palette

Mesa Clay

Rooted in the natural earth, this palette reflects the sun-drenched, rugged beauty of mesa landscapes.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A37B5C#CC9966#E0BB96#F0D4BB#FFF2E5

Palette guide

How to use Mesa Clay

Overview

The Mesa Clay palette evokes the natural, rustic beauty of sun-drenched landscapes. This collection of warm, earthy tones, including the grounding #A37B5C and the inviting #CC9966, offers a sophisticated yet organic feel. With lighter shades like #E0BB96, #F0D4BB, and the softest #FFF2E5, it's perfect for designs aiming for a natural, terracotta-inspired aesthetic. Designers and developers will find this palette excellent for creating harmonious, welcoming interfaces and branding that feels authentic and rooted in nature. It offers a spectrum from deep, rich browns to delicate, creamy whites, ensuring versatility.

Best used for

Nature-inspired branding and logos
Rustic interior design concepts
Websites with an earthy, organic theme
Artisanal product packaging
Print materials for eco-conscious businesses
Fashion accessories or textile design

Suggested color roles

primary

Use #A37B5C as a deep, grounding primary color for strong headers, navigation, or brand accents.

secondary

Employ #CC9966 as a warm, supportive secondary for subheadings, buttons, or complementary sections.

accent

Apply #E0BB96 for subtle highlights, interactive elements, or to add a gentle warmth without overpowering.

background

Utilize #FFF2E5 as a soft, airy background to provide a clean, natural canvas that enhances other colors.

text

For optimal readability, use #A37B5C or a dark charcoal on lighter backgrounds like #FFF2E5.

Accessibility notes

Ensure sufficient contrast for text on backgrounds, especially with similar tones like #E0BB96 on #F0D4BB.
Prioritize #A37B5C or black for body text on #FFF2E5 to meet WCAG contrast guidelines.
Avoid using light shades like #F0D4BB for small or critical text elements.
Test interactive elements (buttons, links) to ensure their states are clearly distinguishable with enough luminance difference.

Recommended combinations

Earthy Base

Ideal for foundational branding, website main sections, or header/body text combinations.

#A37B5C · #CC9966 · #FFF2E5

Soft Rustic

Perfect for subtle UI elements, background gradients, or adding a gentle, inviting feel to design.

#E0BB96 · #F0D4BB · #FFF2E5

Terracotta Accent

Effective for call-to-action buttons, feature highlights, or creating visual hierarchy in content.

#CC9966 · #A37B5C · #E0BB96

CSS variables

:root {
  --mesa-clay-1: #A37B5C;
  --mesa-clay-2: #CC9966;
  --mesa-clay-3: #E0BB96;
  --mesa-clay-4: #F0D4BB;
  --mesa-clay-5: #FFF2E5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mesa-clay": {
        1: "#A37B5C",
        2: "#CC9966",
        3: "#E0BB96",
        4: "#F0D4BB",
        5: "#FFF2E5",
      }
    }
  }
}

Hex values

Color 1#A37B5C

Color 2#CC9966

Color 3#E0BB96

Color 4#F0D4BB

Color 5#FFF2E5

Accessibility

Contrast checker

1.5:1Fail

2.1:1Fail

2.7:1Fail

3.4:1AA18

1.5:1Fail

1.4:1Fail

1.8:1Fail

2.3:1Fail

2.1:1Fail

1.4:1Fail

1.3:1Fail

1.6:1Fail

2.7:1Fail

1.8:1Fail

1.3:1Fail

3.4:1AA18

2.3:1Fail

1.6:1Fail

1.3:1Fail

Similar palettes

More like Mesa Clay

Mesa Clay

See it in context.

Ready when you are.

Built with Mesa Clay.

How to use Mesa Clay

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Earthy Base

Soft Rustic

Terracotta Accent

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Mesa Clay