Palette

Canyon Wall Patina

A rugged blend of warm browns and rustic oranges, echoing the sun-baked layers of an ancient canyon wall.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8C5A3C#B27F5C#D4A887#E8C9B4#6C422C

Palette guide

How to use Canyon Wall Patina

Overview

The Canyon Wall Patina palette offers a sophisticated range of warm, weathered earth tones, reminiscent of ancient, sun-baked rock surfaces. With a rich umber #8C5A3C, a soft caramel #B27F5C, a delicate peach-beige #D4A887, a light dusty rose #E8C9B4, and a deep chocolate brown #6C422C, this collection is ideal for designers and developers seeking a natural, rustic, and elegant aesthetic. It excels at conveying a sense of heritage, comfort, and organic beauty, providing a harmonious and inviting user experience perfect for a variety of contemporary and traditional projects.

Best used for

Upscale rustic brand identity
Heritage or artisanal craft websites
Interior design and architecture mood boards
Packaging for gourmet food or natural cosmetics
Serene digital interfaces for wellness apps
Photography portfolios showcasing natural textures

Suggested color roles

primary

Utilize #8C5A3C as a grounding color for main content blocks, headers, or primary navigation, establishing a sophisticated base.

secondary

Apply #B27F5C for supporting details, sub-sections, or background elements, providing a softer, complementary layer.

accent

Leverage #6C422C for strong calls to action, important text, or impactful graphic outlines, offering deep contrast and definition.

background

Employ #E8C9B4 for expansive backgrounds or main content areas, creating a light, airy, and inviting canvas.

text

For optimal readability, use #6C422C or a deep charcoal against lighter backgrounds, and white text against #8C5A3C.

Accessibility notes

Ensure #6C422C provides sufficient contrast for text when used on #D4A887 or #E8C9B4 backgrounds.
Avoid using #B27F5C text on #D4A887 backgrounds for main content due to potential low contrast.
Lighter colors like #E8C9B4 should be reserved for larger display text if used on #D4A887, not body copy.
Check all interactive element states for clear visual distinction, especially between the subtle differences in the lighter tones.

Recommended combinations

Earthy Layers

Ideal for creating depth in background elements or distinct content areas.

#8C5A3C · #B27F5C · #D4A887

Deep Patina

Effective for strong branding, navigation, or high-contrast textual elements.

#6C422C · #8C5A3C · #E8C9B4

Desert Blush

Use for subtle gradient effects, delicate illustrations, or soft UI accents.

#D4A887 · #E8C9B4 · #B27F5C

CSS variables

:root {
  --canyon-wall-patina-1: #8C5A3C;
  --canyon-wall-patina-2: #B27F5C;
  --canyon-wall-patina-3: #D4A887;
  --canyon-wall-patina-4: #E8C9B4;
  --canyon-wall-patina-5: #6C422C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "canyon-wall-patina": {
        1: "#8C5A3C",
        2: "#B27F5C",
        3: "#D4A887",
        4: "#E8C9B4",
        5: "#6C422C",
      }
    }
  }
}

Hex values

Color 1#8C5A3C

Color 2#B27F5C

Color 3#D4A887

Color 4#E8C9B4

Color 5#6C422C

Accessibility

Contrast checker

1.7:1Fail

2.7:1Fail

3.7:1AA18

1.5:1Fail

1.7:1Fail

1.6:1Fail

2.2:1Fail

2.5:1Fail

2.7:1Fail

1.6:1Fail

1.4:1Fail

4:1AA18

3.7:1AA18

2.2:1Fail

1.4:1Fail

5.5:1AA

1.5:1Fail

2.5:1Fail

4:1AA18

5.5:1AA

Similar palettes

More like Canyon Wall Patina

View all earth

Adobe Sunset

Ancient Canyon Echo

Ancient Earth Whisper

Ancient Forest Bark

Artisan Pottery Wheel

Bohemian Earth Craft