Palette

Dusty Mesa Sunset

Earthy, muted tones reflecting the soft, fading light of a sunset over ancient, dusty mesa landscapes.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E8C4A9#C28C65#A16B4D#7F4E36#613D2C

Palette guide

How to use Dusty Mesa Sunset

Overview

The Dusty Mesa Sunset palette features earthy, muted tones reflecting the soft, fading light of a sunset over ancient, dusty mesa landscapes. With shades like #E8C4A9, #C28C65, and the deep #613D2C, this collection is perfect for designs that require a natural, warm, and serene feel. Designers and developers can leverage these harmonious tones to create captivating Southwestern branding, desert photography themes, or digital interfaces that resonate with tranquility and organic beauty. The palette offers a versatile foundation for conveying the subtle grandeur of natural landscapes.

Best used for

Southwestern branding and identity
Desert photography and art
Rustic wedding themes
Natural product packaging
Travel blogs and destinations
Serene interior decor

Suggested color roles

primary

#A16B4D serves as a warm, inviting mid-brown, ideal for main content areas or headers.

secondary

#7F4E36 offers a deeper tone for grounding, subheadings, or strong borders.

accent

#C28C65 provides a lighter, sun-kissed highlight, perfect for subtle accents or decorative details.

background

#E8C4A9 is the lightest shade, creating a soft sandy base that enhances the natural feel.

text

For readability on light backgrounds, use #613D2C or a dark brown/charcoal. For critical text, black is recommended.

Accessibility notes

For text on #E8C4A9, use #613D2C for sufficient contrast and optimal readability.
The contrast between #C28C65 and #E8C4A9 might be low for small text or critical UI elements; test carefully.
Ensure all interactive elements are clearly distinguishable from their backgrounds with clear focus states.
For body text, a dark brown or black provides optimal legibility on the lightest colors, especially for users with visual impairments.

Recommended combinations

Sunset Gradient

Creates a smooth transition from light to mid-tones, ideal for background effects or layered elements.

#E8C4A9 · #C28C65 · #A16B4D

Mesa Shadow

Combines the deepest brown with a soft, sandy background for strong contrast and a rich, natural feel.

#613D2C · #7F4E36 · #E8C4A9

Desert Glow

Offers balanced mid-tones for a warm, natural feel, suitable for content blocks or visual hierarchy.

#A16B4D · #C28C65 · #7F4E36

CSS variables

:root {
  --dusty-mesa-sunset-1: #E8C4A9;
  --dusty-mesa-sunset-2: #C28C65;
  --dusty-mesa-sunset-3: #A16B4D;
  --dusty-mesa-sunset-4: #7F4E36;
  --dusty-mesa-sunset-5: #613D2C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dusty-mesa-sunset": {
        1: "#E8C4A9",
        2: "#C28C65",
        3: "#A16B4D",
        4: "#7F4E36",
        5: "#613D2C",
      }
    }
  }
}

Hex values

Color 1#E8C4A9

Color 2#C28C65

Color 3#A16B4D

Color 4#7F4E36

Color 5#613D2C

Accessibility

Contrast checker

1.8:1Fail

2.7:1Fail

4.2:1AA18

5.8:1AA

1.8:1Fail

1.5:1Fail

2.4:1Fail

3.3:1AA18

2.7:1Fail

1.5:1Fail

1.6:1Fail

2.1:1Fail

4.2:1AA18

2.4:1Fail

1.6:1Fail

1.4:1Fail

5.8:1AA

3.3:1AA18

2.1:1Fail

1.4:1Fail

Similar palettes

More like Dusty Mesa Sunset