Palette

Canyon Ridge Ember

Fiery oranges and soft yellows capturing the last light of day on rugged canyon ridges.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#9F5E27#C47732#E8913D#FBB762#FFDB97

Palette guide

How to use Canyon Ridge Ember

Overview

The "Canyon Ridge Ember" palette ignites designs with fiery oranges and soft yellows, capturing the last light of day on rugged canyon ridges. It transitions from the deep, inviting #9F5E27 to the radiant #E8913D and #FBB762, culminating in the luminous #FFDB97. The rich #C47732 provides a strong mid-tone, balancing the intensity. This palette is perfect for designs that aim to convey a sense of warmth, natural wonder, and dynamic energy, offering a sophisticated blend of deep earth tones and radiant sunset oranges. It's excellent for creating immersive and memorable visual experiences.

Best used for

Outdoor adventure and travel websites
Branding for natural energy drinks or healthy snacks
Art and photography portfolios with dramatic sunset themes
E-commerce for camping gear or outdoor apparel
Event promotion for summer festivals or outdoor concerts
Digital art or illustration with warm, natural light

Suggested color roles

primary

Use #9F5E27 as a robust primary for deep backgrounds or strong structural elements, conveying stability and warmth.

secondary

Employ #C47732 for navigation, subheadings, or key content blocks, maintaining a rich, earthy foundation.

accent

Apply #E8913D for vibrant call-to-action buttons or focal points, adding an energetic and inviting glow.

background

Utilize #FFDB97 as a soft, luminous background, offering excellent readability for darker text and a radiant feel.

text

For body text, a deep brown like #9F5E27 or a dark charcoal ensures optimal legibility against lighter backgrounds.

Accessibility notes

Ensure high contrast when using #FFDB97 or #FBB762 with text; darker palette colors are essential.
Check WCAG contrast ratios for #E8913D when used for text, especially on light backgrounds.
The dark tones #9F5E27 and #C47732 provide excellent contrast for white or very light text.
Avoid pairing #E8913D with #FBB762 for small text to maintain clear distinction and readability.

Recommended combinations

Ridge Glow

Ideal for creating a dramatic, deep-to-bright gradient in headers or hero images.

#9F5E27 · #C47732 · #E8913D

Sunset Radiance

Excellent for vibrant backgrounds with layered accents, evoking a warm, setting sun.

#FFDB97 · #FBB762 · #E8913D

Ember Contrast

Suitable for high-contrast informational sections, with dark text on light backgrounds, highlighted by a vibrant mid-tone.

#9F5E27 · #FBB762 · #FFDB97

CSS variables

:root {
  --canyon-ridge-ember-1: #9F5E27;
  --canyon-ridge-ember-2: #C47732;
  --canyon-ridge-ember-3: #E8913D;
  --canyon-ridge-ember-4: #FBB762;
  --canyon-ridge-ember-5: #FFDB97;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "canyon-ridge-ember": {
        1: "#9F5E27",
        2: "#C47732",
        3: "#E8913D",
        4: "#FBB762",
        5: "#FFDB97",
      }
    }
  }
}

Hex values

Color 1#9F5E27

Color 2#C47732

Color 3#E8913D

Color 4#FBB762

Color 5#FFDB97

Accessibility

Contrast checker

1.5:1Fail

2.1:1Fail

2.9:1Fail

3.9:1AA18

1.5:1Fail

1.4:1Fail

2:1Fail

2.6:1Fail

2.1:1Fail

1.4:1Fail

1.9:1Fail

2.9:1Fail

2:1Fail

1.4:1Fail

1.3:1Fail

3.9:1AA18

2.6:1Fail

1.9:1Fail

1.3:1Fail

Similar palettes

More like Canyon Ridge Ember

Canyon Ridge Ember

See it in context.

Ready when you are.

Built with Canyon Ridge Ember.

How to use Canyon Ridge Ember

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Ridge Glow

Sunset Radiance

Ember Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Canyon Ridge Ember