Back to palettes

Palette

Sandstone Mesa Ridge

Sun-baked oranges and browns, recalling the grand formations and textures of sandstone mesas.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sandstone Mesa Ridge 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 Sandstone Mesa Ridge.

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

Data visualization

#D2B48C#F5DEB3#CD853F#B8860B#8B4513

Palette guide

How to use Sandstone Mesa Ridge

Overview

The Sandstone Mesa Ridge palette offers a rich collection of warm, earthy tones inspired by sun-baked desert landscapes. Featuring deep browns like #8B4513 and #CD853F, alongside lighter sandy hues such as #D2B48C and the soft #F5DEB3, this palette evokes a sense of natural beauty and rugged elegance. Its golden-brown accent, #B8860B, adds a touch of sunlit warmth. Ideal for designers and developers seeking to convey authenticity, warmth, and a connection to nature, this palette is perfect for creating inviting and grounded digital or physical experiences. It provides a harmonious blend that feels both timeless and sophisticated, making it versatile for various applications.

Best used for

  • Rustic branding and packaging for artisanal goods
  • Interior design concepts evoking warmth and nature
  • Nature-themed websites, blogs, or outdoor adventure apps
  • Apparel and accessories with an earthy, natural aesthetic
  • Autumnal or harvest festival marketing campaigns
  • Coffee shop or organic food product branding

Suggested color roles

primary

Use this impactful warm brown, #CD853F, for prominent headings, key call-to-action buttons, or main graphic elements to draw attention.

secondary

A versatile sandy brown, #D2B48C, ideal for subheadings, navigation elements, or secondary information panels, offering a softer presence than the primary.

accent

This golden brown, #B8860B, works well for subtle highlights, interactive states like hover effects, small icons, or decorative lines to add a touch of warmth.

background

A very light, creamy sand, #F5DEB3, perfect for clean, warm backgrounds that provide excellent readability for darker text and allow other colors to pop.

text

The darkest hue in the palette, #8B4513, ensures strong contrast and excellent readability for primary body text, especially on lighter backgrounds like #F5DEB3.

Accessibility notes

  • Ensure sufficient contrast when using #CD853F or #D2B48C for text, especially on light backgrounds like #F5DEB3; consider WCAG AA standards.
  • #8B4513 provides excellent contrast on #F5DEB3 for body text, making it a reliable choice for readability.
  • Be mindful of colorblind users when differentiating elements solely by hue; incorporate other visual cues like icons or underlines.
  • For interactive elements, ensure hover/focus states have adequate contrast against both their default state and surrounding background colors.

Recommended combinations

Desert Horizon

Create soft, natural gradients or layered background sections for web pages or packaging, evoking a calm, expansive feel.

#F5DEB3 · #D2B48C · #CD853F

Mesa Contrast

Ideal for clear UI elements: #F5DEB3 as background, #8B4513 for primary text, and #B8860B for interactive elements or highlights.

#F5DEB3 · #8B4513 · #B8860B

Deep Earth

For bold headers, striking graphic elements, or branding where a strong, rich, and earthy presence is desired.

#CD853F · #B8860B · #8B4513

CSS variables

:root {
  --sandstone-mesa-ridge-1: #D2B48C;
  --sandstone-mesa-ridge-2: #F5DEB3;
  --sandstone-mesa-ridge-3: #CD853F;
  --sandstone-mesa-ridge-4: #B8860B;
  --sandstone-mesa-ridge-5: #8B4513;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sandstone-mesa-ridge": {
        1: "#D2B48C",
        2: "#F5DEB3",
        3: "#CD853F",
        4: "#B8860B",
        5: "#8B4513",
      }
    }
  }
}

Related searches

natural color paletteswarm earthy tonesdesert aesthetic colorsrustic brown orange palettesandstone color scheme

Palette colors

Hex values

Color 1#D2B48C
·
Color 2#F5DEB3
·
Color 3#CD853F
·
Color 4#B8860B
·
Color 5#8B4513
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.5:1Fail
1.7:1Fail
3.6:1AA18
2
1.5:1Fail
2.3:1Fail
2.5:1Fail
5.4:1AA
3
1.5:1Fail
2.3:1Fail
1.1:1Fail
2.4:1Fail
4
1.7:1Fail
2.5:1Fail
1.1:1Fail
2.2:1Fail
5
3.6:1AA18
5.4:1AA
2.4:1Fail
2.2:1Fail

Similar palettes

More like Sandstone Mesa Ridge

View all earth
Arid Blossom Mirage
Canyon Dust Hues
Desert Sand Echoes
Desert Sands Dune
Desert Sands Glaze
Desert Sandstone Glow