Palette

Mesa Tones

Warm, baked earth tones echoing the vast, ancient landscapes of sun-drenched mesas and canyons.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B06540#D08560#E8B198#F2DDCF#954F30

Palette guide

How to use Mesa Tones

Overview

The Mesa Tones palette captures the essence of warm, baked earth and ancient desert landscapes, offering a rich and inviting color scheme. Featuring grounding colors like #B06540 and the deepest #954F30, it provides a robust foundation. Softer, complementary hues such as #D08560, #E8B198, and the airy #F2DDCF complete the collection, creating a cohesive and natural feel. This palette is excellent for designers and developers aiming for a warm, organic aesthetic, perfect for projects that need to convey a sense of history, warmth, and the rugged beauty of nature. It balances strength with subtle warmth.

Best used for

Eco-friendly product branding and packaging
Travel blogs or websites focused on desert destinations
Artisanal craft and handmade goods marketing
Home decor and interior design concepts
Educational materials on geology or ancient cultures
Warm and inviting web interfaces

Suggested color roles

primary

Use #B06540 as a rich, inviting primary color for prominent headlines, navigation, or key brand elements.

secondary

Employ #D08560 as a softer, complementary secondary for subheadings, decorative elements, or background sections.

accent

Apply #E8B198 for light, subtle warmth, interactive elements, or to add a gentle highlight.

background

Utilize #F2DDCF as a very light, airy background to provide a clean, natural canvas that allows richer tones to shine.

text

For optimal readability, use #954F30 (the darkest tone) on lighter backgrounds like #F2DDCF.

Accessibility notes

Prioritize #954F30 for main body text on #F2DDCF to ensure optimal readability and WCAG compliance.
Ensure interactive elements (buttons, links) have adequate contrast against their backgrounds.
Be mindful of placing #D08560 directly on #E8B198 for small text, as contrast may be insufficient.
Test for color blindness compatibility, particularly with similar warm brown shades.

Recommended combinations

Baked Earth

Creates a strong, grounded combination for branding, headers, and primary content areas.

#954F30 · #B06540 · #F2DDCF

Soft Desert Glow

Ideal for inviting UI elements, subtle background gradients, or adding warmth to illustrations.

#D08560 · #E8B198 · #F2DDCF

Canyon Depth

Effective for establishing visual hierarchy, deep accents, or textured background elements.

#B06540 · #954F30 · #D08560

CSS variables

:root {
  --mesa-tones-1: #B06540;
  --mesa-tones-2: #D08560;
  --mesa-tones-3: #E8B198;
  --mesa-tones-4: #F2DDCF;
  --mesa-tones-5: #954F30;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mesa-tones": {
        1: "#B06540",
        2: "#D08560",
        3: "#E8B198",
        4: "#F2DDCF",
        5: "#954F30",
      }
    }
  }
}

Hex values

Color 1#B06540

Color 2#D08560

Color 3#E8B198

Color 4#F2DDCF

Color 5#954F30

Accessibility

Contrast checker

1.5:1Fail

2.3:1Fail

3.4:1AA18

1.4:1Fail

1.5:1Fail

1.6:1Fail

2.2:1Fail

2.1:1Fail

2.3:1Fail

1.6:1Fail

1.4:1Fail

3.2:1AA18

3.4:1AA18

2.2:1Fail

1.4:1Fail

4.7:1AA

1.4:1Fail

2.1:1Fail

3.2:1AA18

4.7:1AA

Similar palettes

More like Mesa Tones

Mesa Tones

See it in context.

Ready when you are.

Built with Mesa Tones.

How to use Mesa Tones

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Baked Earth

Soft Desert Glow

Canyon Depth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Mesa Tones