Palette

Adobe Desert Hues

A rich, vibrant palette inspired by the sun-baked landscapes and traditional crafts of the American Southwest.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Adobe Desert 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 Adobe Desert Hues.

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

Data visualization

#CC7722#B22222#A0522D#40E0D0#FDF5E6

Palette guide

How to use Adobe Desert Hues

Overview

The Adobe Desert Hues palette captures the vibrant and sun-baked essence of the American Southwest, blending rich earth tones with a surprising pop of turquoise. Featuring the warm #CC7722 and fiery #B22222, alongside the grounding #A0522D, this collection is perfect for designs seeking a rustic, energetic, or culturally rich aesthetic. The striking #40E0D0 provides a fresh contrast, reminiscent of desert skies or turquoise jewelry, while #FDF5E6 offers a soft, sandy base. Designers and developers can leverage this palette for travel brands, artisanal crafts, or any project that benefits from a natural, warm, and inviting yet dynamic presence, ensuring a memorable and authentic user experience.

Best used for

Southwestern-themed restaurants or hotels
Travel and tourism websites for desert regions
Handicraft and artisan product branding
Cultural event promotions and posters
Outdoor adventure and lifestyle brands
Home decor and textile design

Suggested color roles

primary

Use #A0522D as a grounding, earthy primary for backgrounds or large content areas, evoking solid adobe structures.

secondary

Apply #CC7722 or #B22222 for headers, important sections, or visual accents, bringing warmth and energy.

accent

Introduce #40E0D0 as a vibrant, unexpected accent for calls to action, highlights, or decorative elements, adding a fresh pop.

background

The light #FDF5E6 provides an excellent sandy, warm background, while #A0522D offers a deeper, more rustic base.

text

For lighter backgrounds, use a dark brown like #A0522D or charcoal. For dark backgrounds, a crisp white or #FDF5E6 ensures readability.

Accessibility notes

Ensure good contrast when using #CC7722 or #B22222 for text; white or #FDF5E6 often works best.
The vibrant #40E0D0 should be paired with a contrasting dark color (e.g., #A0522D) for text to maintain readability.
The light #FDF5E6 provides excellent contrast with all darker colors in the palette for primary text.
Avoid placing #CC7722 directly on #B22222 for small text; larger headings might work but verify contrast.

Recommended combinations

Desert Sunset

Creates a warm, gradient effect for backgrounds, banners, or imagery, mimicking a fiery desert sunset.

#A0522D · #CC7722 · #B22222

Oasis Pop

Pairs a light, sandy background with a grounding brown and a vibrant turquoise accent for a fresh, engaging look.

#FDF5E6 · #A0522D · #40E0D0

Rustic Energy

Utilizes the warmer tones for a dynamic background, with the lightest shade for content or key information.

#B22222 · #CC7722 · #FDF5E6

CSS variables

:root {
  --adobe-desert-hues-1: #CC7722;
  --adobe-desert-hues-2: #B22222;
  --adobe-desert-hues-3: #A0522D;
  --adobe-desert-hues-4: #40E0D0;
  --adobe-desert-hues-5: #FDF5E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "adobe-desert-hues": {
        1: "#CC7722",
        2: "#B22222",
        3: "#A0522D",
        4: "#40E0D0",
        5: "#FDF5E6",
      }
    }
  }
}

Hex values

Color 1#CC7722

Color 2#B22222

Color 3#A0522D

Color 4#40E0D0

Color 5#FDF5E6

Accessibility

Contrast checker

2:1Fail

1.7:1Fail

2.1:1Fail

3.1:1AA18

2:1Fail

1.2:1Fail

4.1:1AA18

6.2:1AA

1.7:1Fail

1.2:1Fail

3.4:1AA18

5.2:1AA

2.1:1Fail

4.1:1AA18

3.4:1AA18

1.5:1Fail

3.1:1AA18

6.2:1AA

5.2:1AA

1.5:1Fail

Similar palettes

More like Adobe Desert Hues