Back to palettes

Palette

Misty Canyon Walls

Earthy browns and muted greys reflect the solemn, weathered grandeur of ancient canyon walls shrouded in mist.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Misty Canyon Walls 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 Misty Canyon Walls.

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

Data visualization

#8B4513#A0522D#D2B48C#696969#4F4F4F

Palette guide

How to use Misty Canyon Walls

Overview

The Misty Canyon Walls palette brings the rugged beauty of nature to digital and print designs with its earthy browns and muted greys. Featuring deep tones like #8B4513 (Saddle Brown) and #4F4F4F (Dark Gray), alongside the warm #D2B48C (Tan), this palette is ideal for projects seeking a grounded, authentic, and sophisticated feel. It evokes the solemn grandeur of ancient rock formations shrouded in mist, making it perfect for designs that require a sense of history, stability, or organic elegance. Designers can leverage its versatility to create rich textures and warm, inviting interfaces.

Best used for

  • Outdoor adventure branding
  • Heritage product packaging
  • Rustic interior design concepts
  • Nature photography websites
  • Sustainable brand identities
  • Masculine-leaning designs

Suggested color roles

primary

#8B4513 - A rich, deep brown, excellent for branding, main headers, or important call-to-action elements.

secondary

#A0522D - A warmer, slightly lighter brown, suitable for sub-headings, secondary buttons, or accent panels.

accent

#D2B48C - A soft tan, perfect for subtle highlights, background textures, or complementary graphic elements.

background

#D2B48C - A warm, muted tan that provides a soft, inviting base for content.

text

#4F4F4F - A dark grey that offers strong readability against lighter backgrounds, softer than pure black.

Accessibility notes

  • Ensure #4F4F4F text has sufficient contrast against #D2B48C for body text.
  • Avoid using #696969 for small text on backgrounds similar in lightness, such as #D2B48C.
  • Use #8B4513 or #4F4F4F for primary text on the lightest background #D2B48C to meet WCAG AA.
  • Differentiate interactive states with distinct color changes, for example, from #A0522D to #8B4513 on hover.

Recommended combinations

Earthy Header

Dark grey text on a warm tan background for a grounded header.

#4F4F4F · #D2B48C · #8B4513

Rustic Button

Primary button with a slightly lighter hover state for a natural feel.

#8B4513 · #A0522D · #D2B48C

Textured Background

Subtle gradient or pattern using these two for depth in background sections.

#D2B48C · #696969 · #4F4F4F

CSS variables

:root {
  --misty-canyon-walls-1: #8B4513;
  --misty-canyon-walls-2: #A0522D;
  --misty-canyon-walls-3: #D2B48C;
  --misty-canyon-walls-4: #696969;
  --misty-canyon-walls-5: #4F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-canyon-walls": {
        1: "#8B4513",
        2: "#A0522D",
        3: "#D2B48C",
        4: "#696969",
        5: "#4F4F4F",
      }
    }
  }
}

Related searches

earthy brown grey paletterustic nature colorscanyon inspired palettemuted brown designnatural heritage brand colors

Palette colors

Hex values

Color 1#8B4513
·
Color 2#A0522D
·
Color 3#D2B48C
·
Color 4#696969
·
Color 5#4F4F4F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
3.6:1AA18
1.3:1Fail
1.2:1Fail
2
1.3:1Fail
2.8:1Fail
1:1Fail
1.5:1Fail
3
3.6:1AA18
2.8:1Fail
2.8:1Fail
4.2:1AA18
4
1.3:1Fail
1:1Fail
2.8:1Fail
1.5:1Fail
5
1.2:1Fail
1.5:1Fail
4.2:1AA18
1.5:1Fail

Similar palettes

More like Misty Canyon Walls

View all earth
Canyon Rock Texture
Ancient Canyon Echo
Ancient Scrolls Earth
Bohemian Grove Spirit
Bohemian Tapestry Craft
Canyon Rock Layers