Palette

Red Rock Canyon

A rugged and warm palette capturing the distinctive ochre, russet, and umber tones of a majestic desert canyon.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A0522D#8B4513#D2691E#F4A460#6B3E25

Palette guide

How to use Red Rock Canyon

Overview

The Red Rock Canyon palette captures the rugged beauty of desert landscapes with its warm, earthy tones. Featuring a rich spectrum from the deep #6B3E25 (dark umber) to the vibrant #F4A460 (sandy orange), alongside the grounding #A0522D (sienna) and #D2691E (rust), this collection is perfect for evoking a natural, rustic, and adventurous mood. Designers and developers can leverage these hex codes to create inviting and authentic experiences, ideal for outdoor brands, travel websites, or any project seeking to convey warmth and stability. The palette's inherent earthiness provides a strong, reliable aesthetic.

Best used for

Outdoor adventure brands and gear websites
Travel blogs or tourism promotion (desert regions)
Rustic interior design concepts
Food and beverage packaging (e.g., coffee, spices)
Western-themed game or film aesthetics
Nature-inspired digital art and illustrations

Suggested color roles

primary

Use #6B3E25 as a deep, grounding background or footer color, anchoring the design with its rich earthiness.

secondary

Employ #A0522D for main content blocks, headings, or navigation, providing a strong, warm presence.

accent

Apply #D2691E for calls-to-action, important links, or highlight elements, drawing attention with its vibrant rust hue.

background

The lighter #F4A460 can serve as a soft, warm background, especially useful for showcasing darker content.

text

For text on darker shades like #6B3E25, use a cream or off-white. For lighter backgrounds like #F4A460, #6B3E25 or #A0522D works well for readability.

Accessibility notes

Ensure high contrast when using #F4A460 for text on other light-to-mid-tone colors in the palette.
Pair the darkest color, #6B3E25, with light text (e.g., #FFFFFF, #FFF0E0) for optimal readability.
Check contrast ratios for #D2691E on backgrounds like #A0522D, especially for small text.
Consider larger font sizes for text elements that use mid-range colors like #8B4513 to enhance legibility.

Recommended combinations

Desert Sunset

Creates a warm, inviting header or hero section, moving from deep earth to a glowing sunset.

#6B3E25 · #D2691E · #F4A460

Canyon Walls

Provides a rich, layered effect for backgrounds or detailed illustrations, mimicking rock formations.

#A0522D · #8B4513 · #6B3E25

Rustic Highlight

Ideal for cards or interactive elements, using a light base with strong, vibrant accents.

#F4A460 · #A0522D · #D2691E

CSS variables

:root {
  --red-rock-canyon-1: #A0522D;
  --red-rock-canyon-2: #8B4513;
  --red-rock-canyon-3: #D2691E;
  --red-rock-canyon-4: #F4A460;
  --red-rock-canyon-5: #6B3E25;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "red-rock-canyon": {
        1: "#A0522D",
        2: "#8B4513",
        3: "#D2691E",
        4: "#F4A460",
        5: "#6B3E25",
      }
    }
  }
}

Hex values

Color 1#A0522D

Color 2#8B4513

Color 3#D2691E

Color 4#F4A460

Color 5#6B3E25

Accessibility

Contrast checker

1.3:1Fail

1.5:1Fail

2.8:1Fail

1.6:1Fail

1.3:1Fail

2:1Fail

3.5:1AA18

1.3:1Fail

1.5:1Fail

2:1Fail

1.8:1Fail

2.5:1Fail

2.8:1Fail

3.5:1AA18

1.8:1Fail

4.4:1AA18

1.6:1Fail

1.3:1Fail

2.5:1Fail

4.4:1AA18

Similar palettes

More like Red Rock Canyon

Red Rock Canyon

See it in context.

Ready when you are.

Built with Red Rock Canyon.

How to use Red Rock Canyon

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Desert Sunset

Canyon Walls

Rustic Highlight

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Red Rock Canyon