Palette

Desert Mesa Sunset

Earthy tones reminiscent of a vast desert landscape bathed in the intense light of sunset.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D2B48C#B06500#CD853F#FF8C00#A52A2A

Palette guide

How to use Desert Mesa Sunset

Overview

The Desert Mesa Sunset palette captures the intense, sun-drenched beauty of a vast desert landscape at dusk. Featuring the deep warmth of #B06500 and the vibrant #FF8C00, it's balanced by the rich #CD853F and the grounding #A52A2A. The soft, sandy #D2B48C provides an essential light base, reminiscent of adobe structures and ochre earth. This collection is perfect for designers and developers looking to convey natural grandeur, warmth, and a touch of rustic elegance, ideal for branding, UI/UX, and artistic endeavors.

Best used for

Branding for travel agencies or outdoor recreation
Websites for artisan goods or traditional crafts
UI/UX design for apps with a natural or rustic theme
Interior design inspiration for warm, inviting spaces
Product packaging for coffee, spices, or natural foods
Photography portfolios focused on landscapes or nature

Suggested color roles

primary

Use #CD853F for primary brand elements, headers, or backgrounds to establish a warm, inviting tone.

secondary

Apply #B06500 for supporting content, subheadings, or darker sections, adding depth and richness.

accent

Highlight key information or calls-to-action with #FF8C00, providing a vibrant and energetic focal point.

background

Employ #D2B48C as a light, expansive background to ensure readability and maintain an open feel.

text

Utilize #A52A2A for body text and important labels, offering excellent contrast and a deep, earthy warmth.

Accessibility notes

Ensure #A52A2A text has sufficient contrast on #D2B48C background for readability.
Avoid using #FF8C00 text on #CD853F directly, as contrast might be insufficient.
When using #B06500 or #A52A2A as a background, ensure text is white or a very light cream for optimal contrast.
Verify all interactive elements meet WCAG contrast guidelines for various states.

Recommended combinations

Ochre Glow

Ideal for creating warm, inviting banners or hero sections with a gradient effect.

#CD853F · #FF8C00 · #D2B48C

Adobe Hearth

Perfect for grounding elements, footers, or sections needing a stable, rustic feel.

#B06500 · #A52A2A · #D2B48C

Sunset Drama

Excellent for high-impact calls-to-action or dramatic visual statements.

#CD853F · #B06500 · #FF8C00

CSS variables

:root {
  --desert-mesa-sunset-1: #D2B48C;
  --desert-mesa-sunset-2: #B06500;
  --desert-mesa-sunset-3: #CD853F;
  --desert-mesa-sunset-4: #FF8C00;
  --desert-mesa-sunset-5: #A52A2A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-mesa-sunset": {
        1: "#D2B48C",
        2: "#B06500",
        3: "#CD853F",
        4: "#FF8C00",
        5: "#A52A2A",
      }
    }
  }
}

Hex values

Color 1#D2B48C

Color 2#B06500

Color 3#CD853F

Color 4#FF8C00

Color 5#A52A2A

Accessibility

Contrast checker

2.3:1Fail

1.5:1Fail

1.2:1Fail

3.6:1AA18

2.3:1Fail

1.5:1Fail

1.9:1Fail

1.6:1Fail

1.5:1Fail

1.3:1Fail

2.4:1Fail

1.2:1Fail

1.9:1Fail

1.3:1Fail

3:1AA18

3.6:1AA18

1.6:1Fail

2.4:1Fail

3:1AA18

Similar palettes

More like Desert Mesa Sunset

Desert Mesa Sunset

See it in context.

Ready when you are.

Built with Desert Mesa Sunset.

How to use Desert Mesa Sunset

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Ochre Glow

Adobe Hearth

Sunset Drama

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Desert Mesa Sunset