Palette

Canyon Bloom Echo

Reflects the surprisingly delicate blooms and sun-baked rock formations of a quiet desert canyon.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#BC8F8F#DAA520#FFA500#FFDAB9

Palette guide

How to use Canyon Bloom Echo

Overview

The Canyon Bloom Echo palette reflects the surprisingly delicate blooms and sun-baked rock formations of a quiet desert canyon. It features earthy tones like the rich brown of #8B4513, a muted rose #BC8F8F, a golden yellow #DAA520, a vibrant orange #FFA500, and a soft peach #FFDAB9. This collection balances rugged naturalism with a touch of unexpected floral warmth, making it perfect for designs that evoke a sense of grounding, resilience, and subtle beauty. It's an excellent choice for designers seeking to create an authentic, rustic, and naturally inviting aesthetic.

Best used for

Desert-themed interior design
Southwestern or bohemian fashion brands
Nature-inspired artisan crafts
Outdoor adventure and exploration marketing
Organic food and natural product packaging
Earthy wedding or event stationery

Suggested color roles

primary

Use #8B4513 (Saddle Brown) for dominant backgrounds or robust headers to establish a strong, earthy foundation.

secondary

Employ #DAA520 (Goldenrod) for sub-sections, navigation, or as a warm, inviting complementary tone.

accent

Apply #FFA500 (Orange) sparingly for call-to-action buttons, key highlights, or interactive elements to add vitality.

background

The soft #FFDAB9 (Peach Puff) provides an airy, gentle canvas, allowing deeper colors to stand out, or use a neutral cream.

text

For optimal readability, use white or light cream text on #8B4513, and dark charcoal or black text on #DAA520, #FFA500, #BC8F8F, and #FFDAB9.

Accessibility notes

Ensure white text on #8B4513 has sufficient contrast for readability.
Dark text (e.g., #333333) is essential on #BC8F8F, #DAA520, #FFA500, and #FFDAB9 for accessibility.
Avoid pairing very similar light tones for critical information without checking contrast ratios.
When designing interactive elements, ensure hover/active states provide clear contrast changes.

Recommended combinations

Desert Bloom

Ideal for establishing a rustic, natural theme for branding or large content blocks with a touch of warmth.

#8B4513 · #FFA500 · #BC8F8F

Canyon Warmth

Perfect for creating warm web backgrounds, inviting illustrations, or an authentic eco-conscious design.

#DAA520 · #FFDAB9 · #8B4513

Earthy Radiance

Great for highlighting natural elements, interactive features, or a serene yet lively UI.

#FFA500 · #BC8F8F · #DAA520

CSS variables

:root {
  --canyon-bloom-echo-1: #8B4513;
  --canyon-bloom-echo-2: #BC8F8F;
  --canyon-bloom-echo-3: #DAA520;
  --canyon-bloom-echo-4: #FFA500;
  --canyon-bloom-echo-5: #FFDAB9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "canyon-bloom-echo": {
        1: "#8B4513",
        2: "#BC8F8F",
        3: "#DAA520",
        4: "#FFA500",
        5: "#FFDAB9",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#BC8F8F

Color 3#DAA520

Color 4#FFA500

Color 5#FFDAB9

Accessibility

Contrast checker

2.5:1Fail

3.2:1AA18

3.6:1AA18

5.4:1AA

2.5:1Fail

1.3:1Fail

1.4:1Fail

2.1:1Fail

3.2:1AA18

1.3:1Fail

1.1:1Fail

1.7:1Fail

3.6:1AA18

1.4:1Fail

1.1:1Fail

1.5:1Fail

5.4:1AA

2.1:1Fail

1.7:1Fail

1.5:1Fail

Similar palettes

More like Canyon Bloom Echo