Palette

Sunbaked Mesa Hues

Capturing the sun-drenched layers of desert canyons and ancient rock formations at midday.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A34E2B#D36C45#E7AD91#F0DBB4#8B5A3C

Palette guide

How to use Sunbaked Mesa Hues

Overview

The Sunbaked Mesa Hues palette captures the essence of desert landscapes with its warm, earthy tones. Designers and developers can leverage this collection of five inviting colors to evoke a sense of natural warmth and rustic charm. From the deep, grounding terracotta of #A34E2B to the vibrant mid-tone of #D36C45, and the soft, sun-bleached beige of #F0DBB4, these hues provide a versatile foundation. The rich brown of #8B5A3C adds depth, while #E7AD91 offers a gentle, sandy highlight. This palette is ideal for projects aiming for an organic, Southwestern, or artisanal feel, offering a cohesive and appealing visual experience across digital and print mediums.

Best used for

Southwestern-themed branding and websites
Interior design mood boards for rustic homes
Packaging for artisanal or organic products
Digital art and illustration depicting desert scenes
E-commerce sites for handmade goods
Event invitations with a natural, earthy feel

Suggested color roles

primary

Use #A34E2B as a dominant brand color for headings and key calls-to-action, conveying warmth and strength.

secondary

Apply #D36C45 for supporting elements, secondary buttons, or large content blocks to maintain a vibrant yet grounded aesthetic.

accent

Introduce #8B5A3C for subtle accents, borders, or iconography to add depth and a touch of grounded sophistication.

background

Utilize #F0DBB4 as a light, airy background color, providing a clean canvas that complements the warmer tones.

text

For optimal readability, use #A34E2B or #8B5A3C on lighter backgrounds, and white or a very light cream on darker elements.

Accessibility notes

Ensure sufficient contrast when pairing #E7AD91 or #F0DBB4 with text; dark text is generally recommended.
Check color contrast ratios for #D36C45 against both light and dark backgrounds, especially for interactive elements.
Avoid using #E7AD91 as primary text on #F0DBB4 backgrounds due to low contrast.
The darker shades like #A34E2B and #8B5A3C offer strong contrast for white or light-colored text.

Recommended combinations

Desert Sunset

Ideal for hero sections or captivating visuals, blending deep warmth with a sun-kissed highlight.

#A34E2B · #D36C45 · #F0DBB4

Mesa Shadow

Creates a grounded, sophisticated feel, perfect for navigation bars or footer designs.

#A34E2B · #8B5A3C · #E7AD91

Arid Glow

Excellent for softer, inviting content areas or illustrations requiring a gentle, radiant quality.

#D36C45 · #E7AD91 · #F0DBB4

CSS variables

:root {
  --sunbaked-mesa-hues-1: #A34E2B;
  --sunbaked-mesa-hues-2: #D36C45;
  --sunbaked-mesa-hues-3: #E7AD91;
  --sunbaked-mesa-hues-4: #F0DBB4;
  --sunbaked-mesa-hues-5: #8B5A3C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunbaked-mesa-hues": {
        1: "#A34E2B",
        2: "#D36C45",
        3: "#E7AD91",
        4: "#F0DBB4",
        5: "#8B5A3C",
      }
    }
  }
}

Hex values

Color 1#A34E2B

Color 2#D36C45

Color 3#E7AD91

Color 4#F0DBB4

Color 5#8B5A3C

Accessibility

Contrast checker

1.6:1Fail

2.9:1Fail

4.2:1AA18

1:1Fail

1.6:1Fail

1.8:1Fail

2.6:1Fail

1.7:1Fail

2.9:1Fail

1.8:1Fail

1.4:1Fail

3:1Fail