Back to palettes

Palette

Warm Desert Stone

The resilient hues of sunbaked rocks and arid landscapes, grounding and enduring.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Warm Desert Stone 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 Warm Desert Stone.

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

Data visualization

#CC9966#D2B48C#B87333#778899#A88F7B

Palette guide

How to use Warm Desert Stone

Overview

The Warm Desert Stone palette draws inspiration from the enduring beauty of arid landscapes, featuring resilient hues of sunbaked rocks and ancient earth. Anchored by the rich #B87333 (a striking bronze) and complemented by warm sandy tones like #CC9966 and #D2B48C, this palette evokes a sense of natural strength and tranquility. The unexpected inclusion of #778899 (a soft slate gray) adds a unique, cooling counterpoint, while #A88F7B provides a gentle, stony neutral. This collection is perfect for designs seeking an authentic, grounded, and subtly rugged aesthetic.

Best used for

  • Outdoor adventure and travel branding
  • Southwestern-inspired interior design
  • Natural history museum exhibits
  • Sustainable fashion or product lines
  • Web interfaces with an earthy, robust feel
  • Documentary film or photography portfolios

Suggested color roles

primary

#B87333 for impactful headings, call-to-action buttons, or brand focal points, signifying strength.

secondary

#CC9966 offers a versatile, warm tone for supporting information, subheadings, or background elements.

accent

#A88F7B provides a subtle, sophisticated highlight, ideal for interactive elements or decorative details.

background

#D2B48C acts as a soft, sandy base, suitable for main content areas or a harmonious overall canvas.

text

For main body text, #B87333 or a dark charcoal works well against #D2B48C for good readability.

Accessibility notes

  • Ensure #B87333 has sufficient contrast with #D2B48C for body text (WCAG AA requires 4.5:1).
  • #778899 might provide good contrast against #D2B48C for text, but always verify.
  • Avoid using #CC9966 or #A88F7B for small text on #D2B48C backgrounds due to potential low contrast.
  • Use #B87333 for critical interactive elements to ensure visibility and distinguishability.

Recommended combinations

Canyon Contrast

Strong primary-secondary contrast for readability, with a cool gray for subtle UI elements or borders.

#B87333 · #D2B48C · #778899

Sandy Earth

A harmonious, warm blend for layered content, background patterns, or inviting visual textures.

#CC9966 · #A88F7B · #D2B48C

Desert Dusk

Creates a sophisticated, grounded look for branding, with a pop of warm bronze against cool gray.

#B87333 · #778899 · #CC9966

CSS variables

:root {
  --warm-desert-stone-1: #CC9966;
  --warm-desert-stone-2: #D2B48C;
  --warm-desert-stone-3: #B87333;
  --warm-desert-stone-4: #778899;
  --warm-desert-stone-5: #A88F7B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "warm-desert-stone": {
        1: "#CC9966",
        2: "#D2B48C",
        3: "#B87333",
        4: "#778899",
        5: "#A88F7B",
      }
    }
  }
}

Related searches

desert color paletteearthy natural tonesrustic warm colorssandstone hex codesrugged earth design

Palette colors

Hex values

Color 1#CC9966
·
Color 2#D2B48C
·
Color 3#B87333
·
Color 4#778899
·
Color 5#A88F7B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.5:1Fail
1.4:1Fail
1.2:1Fail
2
1.3:1Fail
1.9:1Fail
1.8:1Fail
1.5:1Fail
3
1.5:1Fail
1.9:1Fail
1:1Fail
1.2:1Fail
4
1.4:1Fail
1.8:1Fail
1:1Fail
1.2:1Fail
5
1.2:1Fail
1.5:1Fail
1.2:1Fail
1.2:1Fail

Similar palettes

More like Warm Desert Stone

View all earth
Desert Clay Bloom
Adobe Sunset
Ancient Clay Vessel
Ancient Desert Tapestry
Arid Flower Sparkle
Artisan Clay Glaze