Palette

Canyon Clay

Warm, sun-baked earth tones reflecting the rugged beauty and rich textures of desert canyons.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B27B5D#D6A78B#F0DCCB#8C5E45#704832

Palette guide

How to use Canyon Clay

Overview

The "Canyon Clay" palette delivers a cohesive collection of warm, sun-baked earth tones, perfect for designs that aim for a natural, grounded aesthetic. It features a range from the deep, rich brown of #704832 to the soft, near-white #F0DCCB, offering excellent contrast and versatility. Mid-tones like #B27B5D, #D6A78B, and #8C5E45 provide a harmonious blend, evoking the layered textures of desert canyons. This palette is particularly effective for projects that seek to convey authenticity, warmth, and a connection to nature, making it ideal for rustic, adobe-inspired, or organic design themes across various platforms.

Best used for

Southwestern architecture and interior design portfolios
E-commerce for natural beauty products or organic goods
Boutique hotel branding with an earthy, warm feel
Digital art and illustration depicting natural landscapes
Rustic cafe or bakery branding and website
App design for meditation or mindfulness programs

Suggested color roles

primary

Use #704832 as a strong, grounding primary for headers, navigation, or prominent branding elements, conveying stability.

secondary

Employ #8C5E45 for subheadings, important text, or secondary call-to-actions, adding warmth and depth.

accent

Apply #B27B5D for subtle accents, interactive elements, or graphic details to draw attention without harshness.

background

Utilize #F0DCCB as a light, airy background, providing a clean canvas that enhances readability for darker text.

text

For body text, a deep brown like #704832 or a dark charcoal offers optimal legibility against lighter backgrounds.

Accessibility notes

Ensure sufficient contrast when using #F0DCCB with any text; darker colors from the palette are essential.
Check WCAG contrast ratios for #D6A78B when used for text, especially on light backgrounds.
The dark shades #704832 and #8C5E45 offer good contrast for white or very light text.
Avoid using #B27B5D for small text if it's placed on backgrounds close to #D6A78B to maintain readability.

Recommended combinations

Adobe Layers

Excellent for creating a rich, textural effect in headers or layered content blocks.

#704832 · #8C5E45 · #B27B5D

Sunlit Sand

Ideal for soft, inviting backgrounds with prominent, readable headings and accents.

#F0DCCB · #D6A78B · #B27B5D

Deep Earth Blend

Suitable for high-contrast informational sections, with #704832 as text on #F0DCCB, highlighted by #D6A78B.

#704832 · #D6A78B · #F0DCCB

CSS variables

:root {
  --canyon-clay-1: #B27B5D;
  --canyon-clay-2: #D6A78B;
  --canyon-clay-3: #F0DCCB;
  --canyon-clay-4: #8C5E45;
  --canyon-clay-5: #704832;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "canyon-clay": {
        1: "#B27B5D",
        2: "#D6A78B",
        3: "#F0DCCB",
        4: "#8C5E45",
        5: "#704832",
      }
    }
  }
}

Hex values

Color 1#B27B5D

Color 2#D6A78B

Color 3#F0DCCB

Color 4#8C5E45

Color 5#704832

Accessibility

Contrast checker

1.7:1Fail

2.7:1Fail

1.5:1Fail

2.2:1Fail

1.7:1Fail

1.6:1Fail

2.6:1Fail

3.7:1AA18

2.7:1Fail

1.6:1Fail

4.2:1AA18

5.9:1AA

1.5:1Fail

2.6:1Fail

4.2:1AA18

1.4:1Fail

2.2:1Fail

3.7:1AA18

5.9:1AA

1.4:1Fail

Similar palettes

More like Canyon Clay