Back to palettes

Palette

Mystic Canyon Glow

Warm, inviting colors that mimic the shifting sands and sun-kissed rock formations of a grand, ancient canyon.

EarthNatural5 colors
More Earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mystic Canyon Glow 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 Mystic Canyon Glow.

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

Data visualization

#7C3F2A#A65D3C#D07B4D#FAA057#FFC18D

Palette guide

How to use Mystic Canyon Glow

Overview

The Mystic Canyon Glow palette captures the essence of sun-kissed rock formations and shifting desert sands. This warm and inviting collection features earthy tones from deep #7C3F2A to a vibrant #D07B4D and the soft glow of #FFC18D. Ideal for projects seeking a natural, rustic, or adventurous feel, it provides a harmonious blend of rich browns and vibrant oranges. Designers can leverage its warmth for engaging user interfaces, compelling branding, and evocative visual storytelling, creating experiences that feel grounded and welcoming.

Best used for

  • Rustic brand identities
  • Nature-themed websites and apps
  • Autumnal product collections
  • Outdoor adventure marketing
  • Cultural heritage displays
  • Warm, inviting UI elements

Suggested color roles

primary

Use #7C3F2A as a deep, grounding color for main headings or foundational elements, providing a strong anchor.

secondary

Employ #A65D3C for supportive sections or backgrounds, adding a rich, earthy depth without overpowering.

accent

Highlight interactive elements or calls to action with #FAA057, drawing attention with its vibrant, energetic glow.

background

Utilize #FFC18D as a light, airy base for content areas, offering a soft canvas that enhances readability.

text

A deep brown like #7C3F2A or a dark charcoal provides excellent readability on lighter backgrounds like #FFC18D.

Accessibility notes

  • Ensure #7C3F2A text has sufficient contrast against #FFC18D for optimal readability.
  • Avoid using #FAA057 or #FFC18D for small body text on light backgrounds due to potential low contrast.
  • Use a dark color like #7C3F2A for body text over lighter backgrounds to meet WCAG AA standards.
  • Test contrast ratios for all text and interactive elements, especially when pairing mid-tones like #D07B4D.

Recommended combinations

Desert Sunset

Perfect for vibrant headers, illustrations, or gradients evoking a warm, fading light.

#D07B4D · #FAA057 · #FFC18D

Earthy Foundation

Ideal for primary branding, robust backgrounds, or establishing a grounded visual identity.

#7C3F2A · #A65D3C · #FFC18D

Warm Accents

Great for buttons, calls to action, or small graphical elements that need to pop with warmth.

#A65D3C · #D07B4D · #FAA057

CSS variables

:root {
  --mystic-canyon-glow-1: #7C3F2A;
  --mystic-canyon-glow-2: #A65D3C;
  --mystic-canyon-glow-3: #D07B4D;
  --mystic-canyon-glow-4: #FAA057;
  --mystic-canyon-glow-5: #FFC18D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-canyon-glow": {
        1: "#7C3F2A",
        2: "#A65D3C",
        3: "#D07B4D",
        4: "#FAA057",
        5: "#FFC18D",
      }
    }
  }
}

Related searches

desert color schemerustic web designwarm earth tonesnatural brand paletteorange brown gradient

Palette colors

Hex values

Color 1#7C3F2A
·
Color 2#A65D3C
·
Color 3#D07B4D
·
Color 4#FAA057
·
Color 5#FFC18D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.5:1Fail
3.9:1AA18
5.1:1AA
2
1.6:1Fail
1.6:1Fail
2.4:1Fail
3.1:1AA18
3
2.5:1Fail
1.6:1Fail
1.5:1Fail
2:1Fail
4
3.9:1AA18
2.4:1Fail
1.5:1Fail
1.3:1Fail
5
5.1:1AA
3.1:1AA18
2:1Fail
1.3:1Fail

Similar palettes

More like Mystic Canyon Glow

View all Earth
Desert Bloom Echo
Desert Clay Hearth
Desert Canyon Clay
Desert Mesa Sculptures
Sun-Kissed Adobe Wall
Sunbaked Terracotta