Back to palettes

Palette

Canyon Clay Bluffs

Rugged browns and fiery oranges, reminiscent of vast desert mesas and deep canyon walls.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B22222#D2691E#F4A460#D2B48C#8B4513

Palette guide

How to use Canyon Clay Bluffs

Overview

The Canyon Clay Bluffs palette features rugged browns and fiery oranges, reminiscent of vast desert mesas and deep canyon walls. Ranging from the intense #B22222 (Firebrick) and rich #D2691E (Chocolate) to the warm #F4A460 (Sandy Brown) and soft #D2B48C (Tan), culminating in the deep #8B4513 (Saddle Brown), this palette offers a powerful, natural earthiness. It's an excellent choice for designers seeking to convey strength, authenticity, and a strong connection to raw, untouched landscapes. This collection of warm, rustic tones is perfect for projects that require a robust and visually grounding aesthetic.

Best used for

  • Outdoor adventure and exploration branding
  • Rustic cabin or lodge interior design
  • Southwestern-themed product packaging
  • Documentary film titles and graphics
  • Artisan pottery or craft marketing
  • Earthy, natural food and beverage branding

Suggested color roles

primary

Use #B22222 (Firebrick) for dominant sections, headlines, or hero images to establish a bold, earthy foundation.

secondary

Employ #D2691E (Chocolate) for sub-sections, navigation, or as a rich, grounding complementary tone.

accent

Apply #F4A460 (Sandy Brown) sparingly for call-to-action buttons, key highlights, or interactive elements to add warmth and contrast.

background

The soft #D2B48C (Tan) provides an airy, natural canvas, allowing deeper colors to stand out, or use a neutral cream.

text

For optimal readability, use white or light cream text on #B22222, #D2691E, and #8B4513, and dark charcoal or black text on #F4A460 and #D2B48C.

Accessibility notes

  • Ensure white text on #B22222, #D2691E, and #8B4513 has sufficient contrast for readability.
  • Dark text (e.g., #333333) is essential on #F4A460 and #D2B48C for accessibility.
  • Avoid pairing very similar mid-tones for critical information without checking contrast ratios.
  • When designing interactive elements, ensure hover/active states provide clear contrast changes.

Recommended combinations

Desert Bluffs

Ideal for robust branding, large content blocks, or conveying depth and a powerful natural theme.

#B22222 · #D2691E · #8B4513

Canyon Warmth

Perfect for creating warm web backgrounds, inviting illustrations, or an authentic rustic design.

#F4A460 · #D2B48C · #D2691E

Clay Earth

Great for grounding elements, subtle UI features, or a refined, natural aesthetic with a strong character.

#8B4513 · #B22222 · #F4A460

CSS variables

:root {
  --canyon-clay-bluffs-1: #B22222;
  --canyon-clay-bluffs-2: #D2691E;
  --canyon-clay-bluffs-3: #F4A460;
  --canyon-clay-bluffs-4: #D2B48C;
  --canyon-clay-bluffs-5: #8B4513;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "canyon-clay-bluffs": {
        1: "#B22222",
        2: "#D2691E",
        3: "#F4A460",
        4: "#D2B48C",
        5: "#8B4513",
      }
    }
  }
}

Related searches

canyon earth tonesrustic desert paletteclay orange brownnatural warm schemesouthwestern design colors

Palette colors

Hex values

Color 1#B22222
·
Color 2#D2691E
·
Color 3#F4A460
·
Color 4#D2B48C
·
Color 5#8B4513
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.3:1AA18
3.4:1AA18
1.1:1Fail
2
1.8:1Fail
1.8:1Fail
1.8:1Fail
2:1Fail
3
3.3:1AA18
1.8:1Fail
1:1Fail
3.5:1AA18
4
3.4:1AA18
1.8:1Fail
1:1Fail
3.6:1AA18
5
1.1:1Fail
2:1Fail
3.5:1AA18
3.6:1AA18

Similar palettes

More like Canyon Clay Bluffs

View all earth