Back to palettes

Palette

Canyon Vista

Rich terracotta and sun-baked orange hues reflect the majestic layers of a grand canyon at sunrise.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#BF5B47#D98D6E#F0C7AB#A64A35#733324

Palette guide

How to use Canyon Vista

Overview

The "Canyon Vista" palette features rich terracotta and sun-baked orange hues, reflecting the majestic layers of a grand canyon at sunrise. It ranges from the deep, grounding #733324 to the soft, luminous #F0C7AB, offering a robust yet inviting gradient. Key shades include the earthy #A64A35, the vibrant #BF5B47, and the inviting #D98D6E. This palette is perfect for designs that seek to convey authenticity, warmth, and natural drama, making it ideal for rustic, heritage, or energetic design themes across various platforms. Its inherent warmth provides a comforting and reliable visual experience for users.

Best used for

  • Outdoor adventure and travel websites
  • E-commerce for artisanal crafts or handmade goods
  • Branding for eco-friendly or natural product lines
  • Digital art or illustration with earthy themes
  • Travel blogs focusing on desert landscapes or national parks
  • Farm-to-table restaurant menus or branding

Suggested color roles

primary

Use #733324 as a grounding primary for large blocks of color or important headers, conveying stability and warmth.

secondary

Employ #A64A35 for secondary elements like call-to-action buttons or accent panels, adding a vibrant, inviting energy.

accent

Apply #BF5B47 for focal points or interactive elements, drawing attention without overwhelming the earthy base.

background

Utilize #F0C7AB as a soft, warm background for content, ensuring good readability with darker text.

text

For body text, consider a dark charcoal or a deep brown like #733324, ensuring sufficient contrast against lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast when pairing #F0C7AB with lighter text colors; darker hues are recommended.
  • Check color contrast for #D98D6E used with both light and dark text to meet WCAG guidelines.
  • Avoid using #733324 and #A64A35 in close proximity for small text to prevent readability issues for some users.
  • For interactive elements, ensure #BF5B47 has a clear focus state and meets minimum contrast ratios against its background.

Recommended combinations

Sunrise Terracotta

Ideal for hero sections or banners, capturing a warm, inviting glow.

#733324 · #A64A35 · #BF5B47

Desert Horizon

Excellent for creating a soft, luminous background with prominent, readable headings and accents.

#F0C7AB · #D98D6E · #BF5B47

Vista Contrast

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

#733324 · #D98D6E · #F0C7AB

CSS variables

:root {
  --canyon-vista-1: #BF5B47;
  --canyon-vista-2: #D98D6E;
  --canyon-vista-3: #F0C7AB;
  --canyon-vista-4: #A64A35;
  --canyon-vista-5: #733324;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "canyon-vista": {
        1: "#BF5B47",
        2: "#D98D6E",
        3: "#F0C7AB",
        4: "#A64A35",
        5: "#733324",
      }
    }
  }
}

Related searches

terracotta orange palettecanyon sunrise colorsdesert rustic designwarm vista schemerugged earth hex codes

Palette colors

Hex values

Color 1#BF5B47
·
Color 2#D98D6E
·
Color 3#F0C7AB
·
Color 4#A64A35
·
Color 5#733324
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.8:1Fail
1.3:1Fail
2.2:1Fail
2
1.7:1Fail
1.7:1Fail
2.2:1Fail
3.6:1AA18
3
2.8:1Fail
1.7:1Fail
3.7:1AA18
6:1AA
4
1.3:1Fail
2.2:1Fail
3.7:1AA18
1.6:1Fail
5
2.2:1Fail
3.6:1AA18
6:1AA
1.6:1Fail

Similar palettes

More like Canyon Vista

View all warm