Back to palettes

Palette

Earthy Canyon Echo

Rich, sun-baked reds and browns reflecting the grandeur of a deep canyon.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#CC8866#A66343#7F3E22#581C0C#300C00

Palette guide

How to use Earthy Canyon Echo

Overview

The Earthy Canyon Echo palette captures the raw grandeur of deep canyons with a rich, monochromatic progression of sun-baked reds and browns. Ranging from the deep #300C00 (Very Dark Brown) to the lighter #CC8866 (Terracotta Orange), this palette provides immense depth and a rugged feel. Designers can use the powerful #581C0C (Deep Brown) as a grounding base, while #7F3E22 (Russet) offers a versatile mid-tone. This collection is ideal for projects that demand a strong, natural, and adventurous aesthetic, evoking vast landscapes and ancient formations.

Best used for

  • Outdoor adventure and exploration brands
  • National park and wilderness websites
  • Rugged apparel and gear design
  • Historical documentaries and educational content
  • Travel blogs and photography portfolios
  • Natural history exhibits and displays

Suggested color roles

primary

#300C00 (Very Dark Brown) serves as a strong, deep anchor for primary branding, large text, and impactful elements.

secondary

#581C0C (Deep Brown) provides a rich, powerful tone for subheadings, important content, and supporting UI elements.

accent

#A66343 (Terracotta Brown) offers a vibrant, earthy accent for calls to action, interactive elements, or key highlights.

background

#CC8866 (Terracotta Orange) creates a lighter, warm background that supports darker tones and enhances readability.

text

Use #300C00 or #581C0C on #CC8866 for optimal readability across various text elements, ensuring strong contrast.

Accessibility notes

  • Both #300C00 and #581C0C provide excellent contrast on #CC8866, making them highly accessible for text.
  • Ensure #7F3E22 on #CC8866 meets WCAG AA guidelines for body text readability and legibility.
  • Avoid using lighter browns like #A66343 for small text on #CC8866 due to low contrast; reserve for larger decorative text.
  • Use clear visual hierarchy with color to guide users through content, especially in this rich monochromatic range.

Recommended combinations

Canyon Depths

Create strong, foundational elements, dark text, and hierarchical content structures with these deep, robust tones.

#300C00 · #581C0C · #7F3E22

Sunlit Walls

Apply gentle gradients, layered content sections, or subtle background textures to evoke natural formations.

#CC8866 · #A66343 · #7F3E22

Rugged Contrast

Design with a dark primary, a light accent/background, and the darkest text for a powerful visual impact.

#581C0C · #CC8866 · #300C00

CSS variables

:root {
  --earthy-canyon-echo-1: #CC8866;
  --earthy-canyon-echo-2: #A66343;
  --earthy-canyon-echo-3: #7F3E22;
  --earthy-canyon-echo-4: #581C0C;
  --earthy-canyon-echo-5: #300C00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "earthy-canyon-echo": {
        1: "#CC8866",
        2: "#A66343",
        3: "#7F3E22",
        4: "#581C0C",
        5: "#300C00",
      }
    }
  }
}

Related searches

canyon color palettedeep earthy brownsrustic terracotta schemerugged nature colorsmonochromatic red brown

Palette colors

Hex values

Color 1#CC8866
·
Color 2#A66343
·
Color 3#7F3E22
·
Color 4#581C0C
·
Color 5#300C00
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.8:1Fail
4.6:1AA
6.2:1AA
2
1.6:1Fail
1.7:1Fail
2.8:1Fail
3.8:1AA18
3
2.8:1Fail
1.7:1Fail
1.6:1Fail
2.2:1Fail
4
4.6:1AA
2.8:1Fail
1.6:1Fail
1.3:1Fail
5
6.2:1AA
3.8:1AA18
2.2:1Fail
1.3:1Fail

Similar palettes

More like Earthy Canyon Echo

View all earth