Palette

Mesa Spire

Earthy tones capturing the rugged beauty of towering mesa spires under a setting sun, weathered and grand.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#724F3A#A67A5F#D8B49E#E6D2C4#4A3628

Palette guide

How to use Mesa Spire

Overview

The Mesa Spire palette embodies the rugged, weathered beauty of towering geological formations, offering a sophisticated range of earthy browns. With deep, anchoring tones like #724F3A and #4A3628, it provides a strong foundation, complemented by softer, warm shades such as #A67A5F, #D8B49E, and the delicate #E6D2C4. This collection is perfect for designers and developers aiming to create projects with a sense of stability, heritage, and natural elegance. It's a versatile palette for crafting designs that feel grounded, authentic, and subtly luxurious, reflecting the enduring strength of the earth.

Best used for

Heritage and artisanal brand identities
Upscale rustic interior design or decor
Nature conservation and educational materials
Websites with a sophisticated, earthy aesthetic
High-end product packaging for natural goods
Historical or cultural exhibition design

Suggested color roles

primary

Use #724F3A as a deep, grounding primary color for robust headers, navigation, or significant brand elements.

secondary

Employ #A67A5F as a mid-tone, supportive secondary for subheadings, descriptive text, or background sections.

accent

Apply #D8B49E for soft, subtle highlights, interactive elements, or to introduce gentle warmth.

background

Utilize #E6D2C4 as a light, warm background to provide a clean, inviting canvas that allows darker tones to stand out.

text

For optimal readability, use #4A3628 (the darkest tone) on lighter backgrounds like #E6D2C4.

Accessibility notes

Prioritize #4A3628 for main body text on #E6D2C4 to ensure optimal readability and meet WCAG standards.
Ensure interactive elements have sufficient contrast against their backgrounds to be easily identifiable.
Avoid using #D8B49E or #E6D2C4 for small text, especially when placed near similar light tones.
Check overall luminance differences to ensure clarity for users with visual impairments.

Recommended combinations

Foundation Earth

Creates a strong, stable visual foundation for branding, main content areas, or headers.

#4A3628 · #724F3A · #E6D2C4

Soft Desert

Ideal for gentle UI elements, inviting background sections, or subtle illustrative details.

#A67A5F · #D8B49E · #E6D2C4

Spire Contrast

Effective for establishing clear hierarchy, section breaks, or highlighting key information.

#724F3A · #D8B49E · #4A3628

CSS variables

:root {
  --mesa-spire-1: #724F3A;
  --mesa-spire-2: #A67A5F;
  --mesa-spire-3: #D8B49E;
  --mesa-spire-4: #E6D2C4;
  --mesa-spire-5: #4A3628;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mesa-spire": {
        1: "#724F3A",
        2: "#A67A5F",
        3: "#D8B49E",
        4: "#E6D2C4",
        5: "#4A3628",
      }
    }
  }
}

Hex values

Color 1#724F3A

Color 2#A67A5F

Color 3#D8B49E

Color 4#E6D2C4

Color 5#4A3628

Accessibility

Contrast checker

1.9:1Fail

3.8:1AA18

5:1AA

1.6:1Fail

1.9:1Fail

2:1Fail

2.6:1Fail

3:1AA18

3.8:1AA18

2:1Fail

1.3:1Fail

5.9:1AA

5:1AA

2.6:1Fail

1.3:1Fail

7.8:1AAA

1.6:1Fail

3:1AA18

5.9:1AA

7.8:1AAA

Similar palettes

More like Mesa Spire