Palette

Quiet Desert Canyon

Muted earth tones reflecting the ancient, quiet grandeur of a vast desert canyon.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Quiet Desert Canyon 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 Quiet Desert Canyon.

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

Data visualization

#D2B48C#CD853F#A0522D#8B4513#556B2F

Palette guide

How to use Quiet Desert Canyon

Overview

The Quiet Desert Canyon palette evokes the serene, ancient grandeur of sun-baked landscapes. Featuring muted earth tones like the warm tan of #D2B48C, the rich terracotta of #CD853F, and the deep, grounding brown of #8B4513, this collection is perfect for projects seeking a natural, understated elegance. Designers will appreciate the organic flow between colors, while developers can implement these hex codes to create a cohesive, tranquil user experience. A subtle olive green, #556B2F, provides a refreshing, natural contrast, mimicking desert foliage. This palette is ideal for conveying warmth, history, and a quiet strength.

Best used for

Nature-inspired branding and logos
Travel agency websites focusing on adventure/exploration
Rustic or heritage product packaging
Interior design for natural, cozy spaces
Educational content about geology or ancient cultures
Eco-friendly product lines

Suggested color roles

primary

Use #CD853F as a dominant warm base for large sections or headers, providing an inviting, earthy feel.

secondary

Employ #D2B48C for supporting elements, backgrounds, or lighter text blocks, offering a soft, sandy complement.

accent

Apply #556B2F sparingly for calls-to-action, icons, or subtle highlights, introducing a natural, muted contrast.

background

The light #D2B48C serves as an excellent, soft background, allowing darker elements to stand out gently.

text

Utilize #8B4513 for primary text, ensuring strong readability against lighter backgrounds like #D2B48C or a near-white.

Accessibility notes

Ensure sufficient contrast when pairing #8B4513 text on #D2B48C backgrounds for optimal legibility.
Avoid placing lighter colors like #D2B48C on #CD853F for small text due to potential low contrast ratios.
Use #556B2F as an accent on a light background, but verify contrast for interactive elements.
Consider a pure black or dark charcoal text for critical information if the palette's darkest brown is insufficient on very light shades.

Recommended combinations

Sandstone Trail

Ideal for layered UI elements, where #D2B48C is the base, #A0522D for sub-headers, and #8B4513 for primary text.

#D2B48C · #A0522D · #8B4513

Canyon Depths

Creates a rich, earthy visual for sections or cards, with #CD853F as the dominant color and #556B2F for subtle highlights.

#CD853F · #556B2F · #8B4513

Desert Bloom

Effective for natural graphics or infographics, using #D2B48C for large areas, #CD853F for data, and #556B2F for key points.

#D2B48C · #CD853F · #556B2F

CSS variables

:root {
  --quiet-desert-canyon-1: #D2B48C;
  --quiet-desert-canyon-2: #CD853F;
  --quiet-desert-canyon-3: #A0522D;
  --quiet-desert-canyon-4: #8B4513;
  --quiet-desert-canyon-5: #556B2F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "quiet-desert-canyon": {
        1: "#D2B48C",
        2: "#CD853F",
        3: "#A0522D",
        4: "#8B4513",
        5: "#556B2F",
      }
    }
  }
}

Hex values

Color 1#D2B48C

Color 2#CD853F

Color 3#A0522D

Color 4#8B4513

Color 5#556B2F

Accessibility

Contrast checker

1.5:1Fail

2.8:1Fail

3.6:1AA18

3:1AA18

1.5:1Fail

1.9:1Fail

2.4:1Fail

2:1Fail