Palette

Canyon Rock Layers

Textured browns and ochres mirroring the ancient, eroded layers of a majestic desert canyon.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#CD853F#D2B48C#BC8F8F#A0522D#8B4513

Palette guide

How to use Canyon Rock Layers

Overview

The "Canyon Rock Layers" palette offers textured browns and ochres, mirroring the ancient, eroded layers of a majestic desert canyon. It ranges from the deep, grounding #8B4513 to the soft, muted #D2B48C, providing a robust yet natural gradient. Intermediate shades like #A0522D, #CD853F, and #BC8F8F offer a harmonious blend, evoking the layered textures of rock formations. This palette is perfect for designs that seek to convey authenticity, ruggedness, and a connection to ancient landscapes, making it ideal for rustic, heritage, or organic design themes across various platforms.

Best used for

Geology or natural history museum websites
E-commerce for artisanal stone crafts or pottery
Outdoor adventure brand identities
Photography portfolios showcasing landscapes
Rustic interior design inspiration
App design for historical or archaeological content

Suggested color roles

primary

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

secondary

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

accent

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

background

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

text

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

Accessibility notes

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

Recommended combinations

Layered Earth

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

#8B4513 · #A0522D · #CD853F

Rock & Sand

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

#D2B48C · #BC8F8F · #CD853F

Canyon Contrast

Suitable for high-contrast informational sections, with dark text on light backgrounds, highlighted by a mid-tone.

#8B4513 · #BC8F8F · #D2B48C

CSS variables

:root {
  --canyon-rock-layers-1: #CD853F;
  --canyon-rock-layers-2: #D2B48C;
  --canyon-rock-layers-3: #BC8F8F;
  --canyon-rock-layers-4: #A0522D;
  --canyon-rock-layers-5: #8B4513;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "canyon-rock-layers": {
        1: "#CD853F",
        2: "#D2B48C",
        3: "#BC8F8F",
        4: "#A0522D",
        5: "#8B4513",
      }
    }
  }
}

Hex values

Color 1#CD853F

Color 2#D2B48C

Color 3#BC8F8F

Color 4#A0522D

Color 5#8B4513

Accessibility

Contrast checker

1.5:1Fail

1.1:1Fail

1.9:1Fail

2.4:1Fail

1.5:1Fail

1.4:1Fail

2.8:1Fail

3.6:1AA18

1.1:1Fail

1.4:1Fail

2:1Fail

2.5:1Fail

1.9:1Fail

2.8:1Fail

2:1Fail

1.3:1Fail

2.4:1Fail

3.6:1AA18

2.5:1Fail

1.3:1Fail

Similar palettes

More like Canyon Rock Layers

Ancient Desert Tapestry