Back to palettes

Palette

Canyon Vista Hues

Captures the stratified colors of sunlit rock formations in 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 Vista Hues 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 Hues.

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

Data visualization

#B37D52#D4A778#F0CC9D#8C5B3F#6A4430

Palette guide

How to use Canyon Vista Hues

Overview

The "Canyon Vista Hues" palette captures the stratified colors of sunlit rock formations in a vast canyon, offering a warm and grounding collection of browns and beiges. It spans from the deep, rich #6A4430 to the soft, luminous #F0CC9D, providing a harmonious gradient of natural tones. Intermediate shades like #8C5B3F, #B37D52, and #D4A778 allow for subtle depth and gentle transitions, evoking a sense of natural beauty and tranquility. This palette is perfect for designs seeking an organic, sophisticated, and inviting aesthetic, ideal for conveying warmth and connection to nature across various digital and print applications.

Best used for

  • Travel and tourism websites for national parks
  • E-commerce for artisanal crafts or natural home goods
  • Photography portfolios showcasing landscapes
  • Boutique hotel branding with an earthy aesthetic
  • Interior design inspiration for rustic or desert modern homes
  • Educational content about geology or natural history

Suggested color roles

primary

Use #6A4430 as a strong, grounding primary for headers, navigation, or prominent branding elements, conveying stability.

secondary

Employ #8C5B3F for subheadings, important text, or secondary call-to-actions, adding warmth and depth.

accent

Apply #B37D52 for subtle accents, interactive elements, or graphic details to draw attention without harshness.

background

Utilize #F0CC9D as a light, airy background, providing a clean canvas that enhances readability for darker text.

text

For body text, a deep brown like #6A4430 or a dark charcoal offers optimal legibility against lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast when using #F0CC9D with any text; darker colors from the palette are essential.
  • Check WCAG contrast ratios for #D4A778 when used for text, especially on light backgrounds.
  • The dark tones #6A4430 and #8C5B3F offer good contrast for white or very light text.
  • Avoid using #B37D52 for small text if it's placed on backgrounds close to #D4A778 to maintain readability.

Recommended combinations

Layered Vista

Excellent for creating a rich, textural effect in headers or layered content blocks.

#6A4430 · #8C5B3F · #B37D52

Sunlit Strata

Ideal for soft, inviting backgrounds with prominent, readable headings and accents.

#F0CC9D · #D4A778 · #B37D52

Canyon Contrast

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

#6A4430 · #D4A778 · #F0CC9D

CSS variables

:root {
  --canyon-vista-hues-1: #B37D52;
  --canyon-vista-hues-2: #D4A778;
  --canyon-vista-hues-3: #F0CC9D;
  --canyon-vista-hues-4: #8C5B3F;
  --canyon-vista-hues-5: #6A4430;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "canyon-vista-hues": {
        1: "#B37D52",
        2: "#D4A778",
        3: "#F0CC9D",
        4: "#8C5B3F",
        5: "#6A4430",
      }
    }
  }
}

Related searches

canyon brown beige palettedesert landscape color schemenatural earth toneswarm travel designvista hues hex codes

Palette colors

Hex values

Color 1#B37D52
·
Color 2#D4A778
·
Color 3#F0CC9D
·
Color 4#8C5B3F
·
Color 5#6A4430
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.3:1Fail
1.6:1Fail
2.4:1Fail
2
1.6:1Fail
1.4:1Fail
2.6:1Fail
3.9:1AA18
3
2.3:1Fail
1.4:1Fail
3.8:1AA18
5.6:1AA
4
1.6:1Fail
2.6:1Fail
3.8:1AA18
1.5:1Fail
5
2.4:1Fail
3.9:1AA18
5.6:1AA
1.5:1Fail

Similar palettes

More like Canyon Vista Hues

View all warm