Back to palettes

Palette

Canyon Wall Ember

A rugged collection inspired by the sun-baked, stratified rock formations and fiery embers of a vast canyon.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Canyon Wall Ember 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 Wall Ember.

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

Data visualization

#5E3219#8F4C23#BF6C2D#E68F38#F7B252

Palette guide

How to use Canyon Wall Ember

Overview

The Canyon Wall Ember palette ignites designs with the fiery, sun-baked essence of a desert canyon. Ranging from deep espresso #5E3219 and rustic burnt orange #8F4C23 to vibrant terracotta #BF6C2D, glowing amber #E68F38, and a luminous golden peach #F7B252, this collection offers a dynamic and energetic spectrum. Developers and designers will find this palette excellent for projects demanding warmth, ruggedness, and a natural yet bold statement. It effectively conveys a sense of adventure, heat, and the majestic beauty of stratified rock formations, ensuring an engaging visual experience.

Best used for

  • Outdoor adventure brand identity
  • Rustic lodge or resort websites
  • Desert landscape photography portfolios
  • Packaging for artisanal coffee or craft beverages
  • Interactive maps for national parks
  • Themed event invitations and decor

Suggested color roles

primary

Establish #BF6C2D as the dominant color for prominent sections or hero elements, creating an inviting and energetic foundation.

secondary

Use #8F4C23 for supporting content blocks, sub-navigation, or background textures, deepening the palette's earthy warmth.

accent

Apply #E68F38 or #F7B252 to highlight calls to action, interactive elements, or key information, providing a bright, unmissable pop.

background

Employ a very light cream or off-white, or #F7B252 for lighter background sections, allowing the deeper tones to truly glow.

text

For contrast, use #5E3219 or a dark charcoal against lighter backgrounds, and white text against #BF6C2D or #8F4C23.

Accessibility notes

  • Ensure sufficient contrast when placing text in #5E3219 or #8F4C23 on #F7B252 backgrounds.
  • Lighter shades like #F7B252 and #E68F38 require careful contrast checking if used for small text against each other.
  • Avoid using #BF6C2D text on #E68F38 without verification, as contrast might be low for readability.
  • For UI elements, ensure clear visual distinction between states, especially when using colors close in luminosity.

Recommended combinations

Fiery Gradient

Excellent for dynamic headers, background animations, or sunrise-themed visuals.

#F7B252 · #E68F38 · #BF6C2D

Deep Ember

Ideal for creating strong, grounded content blocks or sophisticated branding.

#5E3219 · #8F4C23 · #BF6C2D

Desert Glow

Use for accentuating key features or adding a vibrant, natural highlight to designs.

#E68F38 · #F7B252 · #5E3219

CSS variables

:root {
  --canyon-wall-ember-1: #5E3219;
  --canyon-wall-ember-2: #8F4C23;
  --canyon-wall-ember-3: #BF6C2D;
  --canyon-wall-ember-4: #E68F38;
  --canyon-wall-ember-5: #F7B252;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "canyon-wall-ember": {
        1: "#5E3219",
        2: "#8F4C23",
        3: "#BF6C2D",
        4: "#E68F38",
        5: "#F7B252",
      }
    }
  }
}

Related searches

warm canyon color schemedesert ember paletterustic orange brown colorsfiery earth tonesnatural adventure palette

Palette colors

Hex values

Color 1#5E3219
·
Color 2#8F4C23
·
Color 3#BF6C2D
·
Color 4#E68F38
·
Color 5#F7B252
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.8:1Fail
4.3:1AA18
5.9:1AA
2
1.7:1Fail
1.7:1Fail
2.6:1Fail
3.5:1AA18
3
2.8:1Fail
1.7:1Fail
1.5:1Fail
2.1:1Fail
4
4.3:1AA18
2.6:1Fail
1.5:1Fail
1.4:1Fail
5
5.9:1AA
3.5:1AA18
2.1:1Fail
1.4:1Fail

Similar palettes

More like Canyon Wall Ember

View all warm