Palette

Fiery Desert Mesa

Intense reds and oranges reflecting the burning sun on desert mesas.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A34724#C6683B#E08F5D#F4BB8B#8A371F

Palette guide

How to use Fiery Desert Mesa

Overview

The Fiery Desert Mesa palette captures the intense reds and oranges reflecting the burning sun on desert mesas. This rich, earthy collection features deep russets like #A34724 and #8A371F, alongside vibrant oranges such as #C6683B, #E08F5D, and the lighter #F4BB8B. Ideal for designers and developers aiming to create a sense of rugged beauty, warmth, and natural drama. Its harmonious blend of warm tones offers versatility for creating immersive landscapes, rustic brand identities, or inviting digital experiences that feel both grounded and energetic.

Best used for

rustic home decor branding
southwestern art and design
outdoor adventure websites
warm, inviting web themes
heritage and cultural projects
gaming environments and textures

Suggested color roles

primary

#C6683B for main headings, calls to action, or prominent interactive elements.

secondary

#A34724 for supporting content, navigation, or secondary buttons, adding depth.

accent

#F4BB8B for soft highlights, small icons, or elements needing a gentle, warm glow.

background

#8A371F for a deep, grounding backdrop, or #E08F5D for a warmer, inviting base.

text

Use white or a light cream for text on darker colors like #A34724 and #8A371F, and a deep charcoal for lighter backgrounds.

Accessibility notes

White text will provide excellent contrast against #A34724, #C6683B, and #8A371F.
Ensure sufficient contrast for #F4BB8B text on #E08F5D or #C6683B backgrounds.
Avoid placing #E08F5D text directly on #C6683B for small text; increase font size if necessary.
For improved readability, use a darker text color (e.g., deep charcoal) on #F4BB8B.

Recommended combinations

Mesa Sunset

Creates a rich, earthy gradient for headers or illustrative elements, depicting a dramatic sunset.

#8A371F · #A34724 · #C6683B

Warm Earth

A harmonious blend for backgrounds and supporting content, evoking warmth and natural beauty.

#A34724 · #E08F5D · #F4BB8B

Desert Radiance

Ideal for UI cards or sections where a dark base needs a vibrant, warm accent.

#8A371F · #E08F5D · #C6683B

CSS variables

:root {
  --fiery-desert-mesa-1: #A34724;
  --fiery-desert-mesa-2: #C6683B;
  --fiery-desert-mesa-3: #E08F5D;
  --fiery-desert-mesa-4: #F4BB8B;
  --fiery-desert-mesa-5: #8A371F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fiery-desert-mesa": {
        1: "#A34724",
        2: "#C6683B",
        3: "#E08F5D",
        4: "#F4BB8B",
        5: "#8A371F",
      }
    }
  }
}

Hex values

Color 1#A34724

Color 2#C6683B

Color 3#E08F5D

Color 4#F4BB8B

Color 5#8A371F

Accessibility

Contrast checker

1.6:1Fail

2.4:1Fail

3.5:1AA18

1.3:1Fail

1.6:1Fail

1.5:1Fail

2.3:1Fail

2.1:1Fail

2.4:1Fail

1.5:1Fail

3.1:1AA18

3.5:1AA18

2.3:1Fail

1.5:1Fail

4.7:1AA

1.3:1Fail

2.1:1Fail

3.1:1AA18

4.7:1AA

Similar palettes

More like Fiery Desert Mesa

Fiery Desert Mesa

See it in context.

Ready when you are.

Built with Fiery Desert Mesa.

How to use Fiery Desert Mesa

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Mesa Sunset

Warm Earth

Desert Radiance

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Fiery Desert Mesa