Palette

Canyon Dust Hues

Muted, warm tones inspired by the sun-baked earth and eroded rock formations of desert canyons.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Canyon Dust Hues 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 Dust Hues.

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

Data visualization

#B28F6F#D1B89F#8F6A4F#5C4F40#E0D3C2

Palette guide

How to use Canyon Dust Hues

Overview

The "Canyon Dust Hues" palette offers a collection of muted, warm tones inspired by the sun-baked earth and eroded rock formations of desert canyons. Featuring the soft beige of #E0D3C2, the warm browns of #B28F6F and #D1B89F, and the deeper, grounding shades of #8F6A4F and #5C4F40, this palette is ideal for creating a natural, understated, and sophisticated aesthetic. It excels in conveying a sense of calm, authenticity, and rugged elegance. Designers can leverage its subtle variations to build depth and texture, perfect for projects requiring a serene yet robust visual identity.

Best used for

Minimalist branding for natural products
E-commerce for sustainable fashion or ethical goods
Spa and wellness websites seeking a calming atmosphere
Interior design blogs focusing on earthy neutrals
Photography portfolios with a muted, natural aesthetic
Architectural firms specializing in desert modernism

Suggested color roles

primary

Use #5C4F40 as a sturdy primary for main navigation, footers, or strong visual anchors, providing stability.

secondary

Employ #8F6A4F for subheadings, borders, or secondary content blocks, maintaining a cohesive, earthy feel.

accent

Apply #B28F6F for subtle interactive elements or graphic details, offering a gentle visual cue.

background

Utilize #E0D3C2 as a soft, neutral background, perfect for showcasing content and ensuring good readability for dark text.

text

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

Accessibility notes

Ensure strong contrast when using #E0D3C2 or #D1B89F with text; darker palette colors are crucial.
Check WCAG contrast ratios for #B28F6F when used for text on light backgrounds.
The dark tones #5C4F40 and #8F6A4F provide excellent contrast for white or very light text.
Avoid pairing #D1B89F with #B28F6F for small text to maintain clear distinction and readability.

Recommended combinations

Dusty Layers

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

#5C4F40 · #8F6A4F · #B28F6F

Desert Whisper

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

#E0D3C2 · #D1B89F · #B28F6F

Muted Contrast

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

#5C4F40 · #D1B89F · #E0D3C2

CSS variables

:root {
  --canyon-dust-hues-1: #B28F6F;
  --canyon-dust-hues-2: #D1B89F;
  --canyon-dust-hues-3: #8F6A4F;
  --canyon-dust-hues-4: #5C4F40;
  --canyon-dust-hues-5: #E0D3C2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "canyon-dust-hues": {
        1: "#B28F6F",
        2: "#D1B89F",
        3: "#8F6A4F",
        4: "#5C4F40",
        5: "#E0D3C2",
      }
    }
  }
}

Hex values

Color 1#B28F6F

Color 2#D1B89F

Color 3#8F6A4F

Color 4#5C4F40

Color 5#E0D3C2

Accessibility

Contrast checker

1.6:1Fail

2.7:1Fail

2:1Fail

1.6:1Fail

2.5:1Fail

4.2:1AA18

1.3:1Fail

1.6:1Fail

2.5:1Fail

1.6:1Fail

3.3:1AA18

2.7:1Fail

4.2:1AA18

1.6:1Fail

5.4:1AA

2:1Fail

1.3:1Fail

3.3:1AA18

5.4:1AA

Similar palettes

More like Canyon Dust Hues

Canyon Dust Hues

See it in context.

Ready when you are.

Built with Canyon Dust Hues.

How to use Canyon Dust Hues

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Dusty Layers

Desert Whisper

Muted Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Canyon Dust Hues