Palette

Canyonlands Erosion

The dramatic sculpted forms of ancient canyon walls, showing layers of time and erosion.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Canyonlands Erosion 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 Canyonlands Erosion.

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

Data visualization

#B26A4A#D38C6A#7A4E3A#5E3E2F#8D8D8D

Palette guide

How to use Canyonlands Erosion

Overview

The Canyonlands Erosion palette captures the dramatic sculpted forms of ancient canyon walls, showcasing layers of time and erosion. Featuring a warm terracotta #B26A4A, soft peach-brown #D38C6A, rich earth brown #7A4E3A, deep espresso #5E3E2F, and a grounding medium gray #8D8D8D, this collection offers designers and developers a robust and natural aesthetic. It's ideal for projects aiming to convey authenticity, natural beauty, and a sense of enduring strength. The harmonious blend of earthy reds, browns, and a touch of gray provides a versatile foundation for compelling visual narratives.

Best used for

Geological or nature conservation websites
Rustic food and beverage branding
Outdoor adventure and exploration platforms
Historical documentary graphic design
Packaging for natural, artisanal products
E-commerce sites for handcrafted goods

Suggested color roles

primary

Use #B26A4A as a core color for significant sections, headlines, or primary calls to action, establishing a warm, inviting presence.

secondary

Apply #7A4E3A for subheadings, detailed UI elements, or as a grounding background texture, providing depth and contrast.

accent

Leverage #D38C6A for subtle highlights or interactive elements, offering a softer, more approachable emphasis.

background

Employ a very light cream or off-white, or a pale version of #D38C6A, for main content areas, enhancing readability.

text

For optimal readability, use #5E3E2F or a deep charcoal against lighter backgrounds, and white text against #B26A4A.

Accessibility notes

Ensure #5E3E2F provides sufficient contrast for text when used on #D38C6A backgrounds.
Avoid using #B26A4A text on #D38C6A backgrounds for main content due to potential low contrast.
#8D8D8D may have limited contrast with #D38C6A; verify for text use.
Verify contrast ratios for all text and interactive elements, especially when combining similar mid-tones.

Recommended combinations

Eroded Layers

Ideal for creating layered background effects or distinct content sections.

#B26A4A · #7A4E3A · #D38C6A

Deep Earth

Perfect for strong, grounded content blocks, footers, or sophisticated branding.

#5E3E2F · #7A4E3A · #B26A4A

Stone & Clay

Use for subtle textural graphics or UI elements needing a natural, muted contrast.

#8D8D8D · #D38C6A · #5E3E2F

CSS variables

:root {
  --canyonlands-erosion-1: #B26A4A;
  --canyonlands-erosion-2: #D38C6A;
  --canyonlands-erosion-3: #7A4E3A;
  --canyonlands-erosion-4: #5E3E2F;
  --canyonlands-erosion-5: #8D8D8D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "canyonlands-erosion": {
        1: "#B26A4A",
        2: "#D38C6A",
        3: "#7A4E3A",
        4: "#5E3E2F",
        5: "#8D8D8D",
      }
    }
  }
}

Hex values

Color 1#B26A4A

Color 2#D38C6A

Color 3#7A4E3A

Color 4#5E3E2F

Color 5#8D8D8D

Accessibility

Contrast checker

1.5:1Fail

1.7:1Fail

2.3:1Fail

1.3:1Fail

1.5:1Fail

2.6:1Fail

3.5:1AA18

1.2:1Fail

1.7:1Fail

2.6:1Fail

1.4:1Fail

2.1:1Fail

2.3:1Fail

3.5:1AA18

1.4:1Fail

2.9:1Fail

1.3:1Fail

1.2:1Fail

2.1:1Fail

2.9:1Fail

Similar palettes

More like Canyonlands Erosion

Ancient Earth Whisper