Palette

Canyon Earth Clay

Evokes the sunbaked earth and vast skies of an arid canyon at dusk, warm and inviting.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Canyon Earth Clay 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 Earth Clay.

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

Data visualization

#8C5A4B#A3725B#C2977D#EAD2B3#F5E4D2

Palette guide

How to use Canyon Earth Clay

Overview

The "Canyon Earth Clay" palette beautifully evokes the sunbaked earth and vast skies of an arid canyon at dusk, offering a warm and inviting collection of browns and beiges. It spans from the deep, grounding #8C5A4B to the soft, ethereal #F5E4D2, providing a harmonious gradient of natural tones. The intermediate shades, including #A3725B, #C2977D, and #EAD2B3, allow for subtle depth and gentle transitions. This palette is perfect for designs seeking a tranquil, organic, and sophisticated aesthetic, ideal for conveying warmth, natural beauty, and refined simplicity across various digital and print applications.

Best used for

Southwestern-themed websites or blogs
E-commerce for handcrafted goods or artisanal products
Yoga or meditation studio branding
Natural beauty product packaging
Real estate listings for desert properties
Photography portfolios showcasing landscapes

Suggested color roles

primary

Use #8C5A4B as a robust primary for navigation, footers, or strong visual anchors, providing stability and elegance.

secondary

Employ #A3725B for subheadings, borders, or secondary information, maintaining a cohesive, earthy flow.

accent

Apply #C2977D for subtle highlights or interactive elements, offering a gentle visual cue.

background

Utilize #F5E4D2 as a clean, airy background, perfect for showcasing content and ensuring high readability for dark text.

text

For body text, a deep brown like #8C5A4B or a dark charcoal ensures optimal contrast and legibility against lighter backgrounds.

Accessibility notes

Ensure high contrast when using #F5E4D2 or #EAD2B3 with text; darker palette colors or black are recommended.
Check WCAG compliance for #C2977D when used for text on light backgrounds.
The dark tones #8C5A4B and #A3725B provide excellent contrast for white or very light text.
Avoid pairing #EAD2B3 with #C2977D for small text to prevent potential readability issues.

Recommended combinations

Dusk Horizon

Ideal for creating a sophisticated, layered look in headers or section dividers.

#8C5A4B · #A3725B · #C2977D

Clay Whisper

Excellent for serene backgrounds with soft transitions, perfect for tranquil content areas.

#F5E4D2 · #EAD2B3 · #C2977D

Earthy Gradient

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

#8C5A4B · #EAD2B3 · #F5E4D2

CSS variables

:root {
  --canyon-earth-clay-1: #8C5A4B;
  --canyon-earth-clay-2: #A3725B;
  --canyon-earth-clay-3: #C2977D;
  --canyon-earth-clay-4: #EAD2B3;
  --canyon-earth-clay-5: #F5E4D2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "canyon-earth-clay": {
        1: "#8C5A4B",
        2: "#A3725B",
        3: "#C2977D",
        4: "#EAD2B3",
        5: "#F5E4D2",
      }
    }
  }
}

Hex values

Color 1#8C5A4B

Color 2#A3725B

Color 3#C2977D

Color 4#EAD2B3

Color 5#F5E4D2

Accessibility

Contrast checker

1.4:1Fail

2.2:1Fail

3.9:1AA18

4.6:1AA

1.4:1Fail

1.6:1Fail

2.8:1Fail

3.3:1AA18

2.2:1Fail

1.6:1Fail

1.8:1Fail

2.1:1Fail

3.9:1AA18

2.8:1Fail

1.8:1Fail

1.2:1Fail

4.6:1AA

3.3:1AA18

2.1:1Fail

1.2:1Fail

Similar palettes

More like Canyon Earth Clay

Ochre Dune Wildflower

Adobe Desert Hues

Ancient Pyramid Sun