Back to palettes

Palette

Desert Rock Formation

Earthy browns and sandy beiges reflecting the layered beauty of sun-baked desert rock formations.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Desert Rock Formation 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 Desert Rock Formation.

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

Data visualization

#8C6A5A#A98C7F#C4A18D#D5BBAB#E3D1C2

Palette guide

How to use Desert Rock Formation

Overview

The Desert Rock Formation palette captures the rugged, sun-baked beauty of arid landscapes, offering a sophisticated range of earthy browns and sandy beiges. With core hues like the deep #8C6A5A, the balanced #A98C7F, and the lighter #C4A18D, this collection provides a natural, grounded aesthetic. Designers can leverage these tones to evoke warmth, stability, and an organic feel in their projects. The softer #D5BBAB and luminous #E3D1C2 add a touch of subtle light, perfect for creating depth and dimension reminiscent of layered geological strata. This palette is ideal for projects seeking a natural, timeless, and subtly rugged character.

Best used for

  • Nature-inspired branding
  • Rustic interior design concepts
  • E-commerce for artisanal goods
  • Outdoor adventure websites
  • Packaging for organic products
  • Editorial layouts with an earthy theme

Suggested color roles

primary

Use #8C6A5A for strong headings or background elements where depth is desired, anchoring the design with a rich, natural brown.

secondary

Apply #A98C7F for large sections or complementary blocks, providing a warmer, mid-tone brown that supports the primary.

accent

Employ #C4A18D sparingly for buttons or key call-outs, offering a brighter, inviting touch without overwhelming the earthy feel.

background

Utilize #E3D1C2 for a clean, warm background that provides excellent contrast for darker text and maintains a light, airy feel.

text

For optimal readability, use #8C6A5A for body text or a very dark charcoal on lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast when placing #8C6A5A text on #E3D1C2 backgrounds.
  • Lighter shades like #D5BBAB or #E3D1C2 may require dark text (e.g., #8C6A5A) for readability.
  • Avoid placing adjacent colors like #A98C7F and #C4A18D for small text to prevent low contrast issues.
  • Always test color combinations with accessibility tools, especially for interactive elements.

Recommended combinations

Rugged Earth

Ideal for branding with a strong, natural presence, pairing deep earth with a soft highlight.

#8C6A5A · #A98C7F · #E3D1C2

Canyon Layers

Excellent for creating depth in UI elements or layered graphic designs, mimicking rock strata.

#C4A18D · #D5BBAB · #8C6A5A

Warm Sandstone

Perfect for soft, inviting backgrounds and subtle visual hierarchies in web or print.

#D5BBAB · #E3D1C2 · #A98C7F

CSS variables

:root {
  --desert-rock-formation-1: #8C6A5A;
  --desert-rock-formation-2: #A98C7F;
  --desert-rock-formation-3: #C4A18D;
  --desert-rock-formation-4: #D5BBAB;
  --desert-rock-formation-5: #E3D1C2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-rock-formation": {
        1: "#8C6A5A",
        2: "#A98C7F",
        3: "#C4A18D",
        4: "#D5BBAB",
        5: "#E3D1C2",
      }
    }
  }
}

Related searches

natural brown color schemeearthy web design colorsdesert aesthetic palettewarm neutral color guiderugged earth tones

Palette colors

Hex values

Color 1#8C6A5A
·
Color 2#A98C7F
·
Color 3#C4A18D
·
Color 4#D5BBAB
·
Color 5#E3D1C2
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2:1Fail
2.7:1Fail
3.3:1AA18
2
1.6:1Fail
1.3:1Fail
1.7:1Fail
2.1:1Fail
3
2:1Fail
1.3:1Fail
1.3:1Fail
1.6:1Fail
4
2.7:1Fail
1.7:1Fail
1.3:1Fail
1.2:1Fail
5
3.3:1AA18
2.1:1Fail
1.6:1Fail
1.2:1Fail

Similar palettes

More like Desert Rock Formation

View all earth