Palette

Misty Canyon Dawn

Earthy reds, muted grays, and soft pinks evoke a serene canyon at misty sunrise.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8A4A3B#B47C6F#DDC2B9#A3A3A3#7A7A7A

Palette guide

How to use Misty Canyon Dawn

Overview

The "Misty Canyon Dawn" palette beautifully captures the essence of a serene canyon at misty sunrise, blending earthy reds, muted grays, and soft pinks. It features the rich #8A4A3B, the warmer #B47C6F, and the delicate #DDC2B9, complemented by the grounding #A3A3A3 and the deeper #7A7A7A. This collection is perfect for designers and developers aiming to create interfaces or branding that feel natural, rustic, and inviting. Its harmonious blend evokes a sense of warmth, authenticity, and calm, making it suitable for projects that require a grounded yet sophisticated aesthetic across digital and print applications.

Best used for

Outdoor adventure and travel brands
Rustic home decor e-commerce
Artisanal craft products and websites
Photography portfolios with natural themes
Western-themed designs and branding
Sustainable fashion lines

Suggested color roles

primary

Designate #8A4A3B as the primary color for strong headers, main navigation, or significant UI elements, providing a rich, earthy anchor.

secondary

Employ #A3A3A3 for supporting content blocks, subheadings, or secondary interactive elements, offering a neutral, balancing presence.

accent

Apply #B47C6F sparingly for calls to action, important icons, or focal points, providing a softer, warm highlight.

background

Utilize #DDC2B9 as the main background color for a light, warm sandy canvas that enhances readability for darker text.

text

For optimal readability on light backgrounds like #DDC2B9, use #8A4A3B or black text. For darker backgrounds, white or a very light grey is recommended.

Accessibility notes

Ensure #8A4A3B text on #DDC2B9 background meets WCAG AA contrast standards.
Avoid using #B47C6F or #A3A3A3 for small text on light backgrounds, as contrast may be insufficient.
Provide clear hover/focus states for interactive elements, possibly by using #B47C6F against a darker button.
Test color pairings rigorously, especially with the muted grays, to ensure distinct visual separation where needed.

Recommended combinations

Canyon Depth

Excellent for main content blocks, headers, and primary calls to action, ensuring strong visual impact.

#8A4A3B · #DDC2B9 · #A3A3A3

Sunrise Glow

Suitable for highlights, softer elements, or sections needing a warm, inviting glow against a neutral base.

#B47C6F · #DDC2B9 · #7A7A7A

Earthy Balance

Use for monochromatic grey sections, strong accents, or to define hierarchy within content blocks.

#A3A3A3 · #7A7A7A · #8A4A3B

CSS variables

:root {
  --misty-canyon-dawn-1: #8A4A3B;
  --misty-canyon-dawn-2: #B47C6F;
  --misty-canyon-dawn-3: #DDC2B9;
  --misty-canyon-dawn-4: #A3A3A3;
  --misty-canyon-dawn-5: #7A7A7A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-canyon-dawn": {
        1: "#8A4A3B",
        2: "#B47C6F",
        3: "#DDC2B9",
        4: "#A3A3A3",
        5: "#7A7A7A",
      }
    }
  }
}

Hex values

Color 1#8A4A3B

Color 2#B47C6F

Color 3#DDC2B9

Color 4#A3A3A3

Color 5#7A7A7A

Accessibility

Contrast checker

1.9:1Fail

4:1AA18

2.7:1Fail

1.6:1Fail

1.9:1Fail

2.1:1Fail

1.4:1Fail

1.2:1Fail

4:1AA18

2.1:1Fail

1.5:1Fail

2.6:1Fail

2.7:1Fail

1.4:1Fail

1.5:1Fail

1.7:1Fail

1.6:1Fail

1.2:1Fail

2.6:1Fail

1.7:1Fail

Similar palettes

More like Misty Canyon Dawn