Palette

Canyon Rock Texture

The natural, layered beauty of canyon rock formations, showing muted, textural browns and deep oranges.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A0522D#CD853F#8B4513#D2B48C#B8860B

Palette guide

How to use Canyon Rock Texture

Overview

The "Canyon Rock Texture" palette captures the natural, layered beauty of canyon rock formations, featuring muted, textural browns and deep oranges. It ranges from the deep, grounding #8B4513 to the subtle, golden #B8860B, offering a robust yet organic gradient. Key shades include the rich #A0522D, the inviting #CD853F, and the soft #D2B48C. 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. Its inherent warmth provides a comforting and reliable visual experience.

Best used for

Outdoor adventure gear e-commerce
Southwestern-themed home decor websites
Branding for artisanal goods or craft beverages
Photography portfolios showcasing rugged landscapes
Rustic event invitations or stationery
Geological survey websites or educational materials

Suggested color roles

primary

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

secondary

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

accent

Apply #B8860B 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 #CD853F 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 #B8860B for small text if it's placed on backgrounds close to #D2B48C to maintain readability.

Recommended combinations

Rugged Earth

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

#8B4513 · #A0522D · #CD853F

Desert Gold

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

#D2B48C · #B8860B · #CD853F

Rock Contrast

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

#8B4513 · #CD853F · #D2B48C

CSS variables

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

Tailwind config

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

Hex values

Color 1#A0522D

Color 2#CD853F

Color 3#8B4513

Color 4#D2B48C

Color 5#B8860B

Accessibility

Contrast checker

1.9:1Fail

1.3:1Fail

2.8:1Fail

1.7:1Fail

1.9:1Fail

2.4:1Fail

1.5:1Fail

1.1:1Fail

1.3:1Fail

2.4:1Fail

3.6:1AA18

2.2:1Fail

2.8:1Fail

1.5:1Fail

3.6:1AA18

1.7:1Fail

1.1:1Fail

2.2:1Fail

1.7:1Fail

Similar palettes

More like Canyon Rock Texture

Canyon Rock Texture

See it in context.

Ready when you are.

Built with Canyon Rock Texture.

How to use Canyon Rock Texture

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Rugged Earth

Desert Gold

Rock Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Canyon Rock Texture