Back to palettes

Palette

Mesa Twilight Hues

Capturing the dramatic, sun-baked landscape of mesas glowing under the warm twilight sky.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A0522D#CD853F#D2691E#F4A460#FFDAB9

Palette guide

How to use Mesa Twilight Hues

Overview

The Mesa Twilight Hues palette captures the dramatic, sun-baked landscape of mesas glowing under a warm twilight sky. This collection features rich, deep oranges and browns, including the earthy #A0522D and the vibrant #D2691E, evoking a sense of warmth and natural beauty. Complementary tones like #CD853F, the brighter #F4A460, and the softest #FFDAB9 complete the scheme, offering versatility. Designers and developers will find this palette ideal for creating compelling visuals that convey adventure, natural warmth, and the breathtaking beauty of desert landscapes at dusk. It balances intensity with inviting softness.

Best used for

  • Outdoor adventure and travel brand identities
  • Landscape photography portfolios and websites
  • Rustic event invitations and marketing
  • Web interfaces with an inviting, warm aesthetic
  • Digital art and illustrations inspired by nature
  • Cultural projects with an earthy, southwest feel

Suggested color roles

primary

Use #D2691E as a bold, energetic primary color for calls to action, prominent headlines, or impactful brand elements.

secondary

Employ #A0522D as a deep, grounding secondary for subheadings, navigation, or to add significant depth.

accent

Apply #F4A460 for bright, warm highlights, interactive elements, or to simulate a glowing effect.

background

Utilize #FFDAB9 as a very light, soft background to provide an airy canvas that allows the richer tones to stand out.

text

For optimal readability, use #A0522D or a deep charcoal on lighter backgrounds like #FFDAB9.

Accessibility notes

  • Ensure high contrast for text, especially when using lighter shades like #F4A460 on similar backgrounds.
  • Prioritize #A0522D for main body text on #FFDAB9 to meet WCAG contrast guidelines.
  • Avoid using #F4A460 for small or critical text elements on light backgrounds due to potential low contrast.
  • Test interactive elements (buttons, links) to ensure their states are clearly distinguishable.

Recommended combinations

Twilight Ember

Excellent for bold statements, main headers, or vibrant call-to-action sections in UI/UX.

#D2691E · #A0522D · #FFDAB9

Glowing Horizon

Creates soft gradients and transitions, suitable for backgrounds or subtle illustrative elements.

#CD853F · #F4A460 · #FFDAB9

Deep Mesa

Offers strong visual anchors for powerful branding, feature boxes, or textured backgrounds.

#A0522D · #D2691E · #CD853F

CSS variables

:root {
  --mesa-twilight-hues-1: #A0522D;
  --mesa-twilight-hues-2: #CD853F;
  --mesa-twilight-hues-3: #D2691E;
  --mesa-twilight-hues-4: #F4A460;
  --mesa-twilight-hues-5: #FFDAB9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mesa-twilight-hues": {
        1: "#A0522D",
        2: "#CD853F",
        3: "#D2691E",
        4: "#F4A460",
        5: "#FFDAB9",
      }
    }
  }
}

Related searches

desert twilight colorswarm orange brown palettesunset earthy tonesdramatic landscape colorsrustic outdoor branding

Palette colors

Hex values

Color 1#A0522D
·
Color 2#CD853F
·
Color 3#D2691E
·
Color 4#F4A460
·
Color 5#FFDAB9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
1.5:1Fail
2.8:1Fail
4.3:1AA18
2
1.9:1Fail
1.2:1Fail
1.5:1Fail
2.3:1Fail
3
1.5:1Fail
1.2:1Fail
1.8:1Fail
2.8:1Fail
4
2.8:1Fail
1.5:1Fail
1.8:1Fail
1.5:1Fail
5
4.3:1AA18
2.3:1Fail
2.8:1Fail
1.5:1Fail

Similar palettes

More like Mesa Twilight Hues

View all earth