Back to palettes

Palette

Terra Vista Clay

Warm and rugged tones reflecting the rich ochres and sunlit surfaces of an ancient desert canyon.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#BF5A31#E27242#FFA874#FFD2A8#FFF5D2

Palette guide

How to use Terra Vista Clay

Overview

The Terra Vista Clay palette captures the sunlit beauty of ancient desert canyons, with a rugged collection of warm ochres and vibrant terracotta tones. Ranging from the rich #BF5A31 and energetic #E27242 to the soft, sun-baked #FFF5D2, this palette is ideal for designers and developers aiming to evoke a sense of warmth, natural beauty, and adventure. Its inviting yet robust character makes it perfect for projects that celebrate the outdoors, artisanal craftsmanship, or designs requiring a grounded, sun-drenched aesthetic across digital and physical mediums.

Best used for

  • Desert-inspired travel and tourism branding
  • Natural home decor and pottery businesses
  • Artisanal food and beverage packaging
  • Outdoor adventure and exploration websites
  • Cultural heritage or museum exhibitions
  • Fashion lines with an earthy, bohemian style

Suggested color roles

primary

The rich #BF5A31 serves as a strong primary, conveying warmth and authenticity for headings or key branding.

secondary

Use #E27242 for supporting content, subheadings, or as an energetic background for sections requiring more vibrancy.

accent

The lightest shade, #FFF5D2, provides a soft, luminous accent, perfect for highlights, clean backgrounds, or subtle details.

background

The airy #FFF5D2 creates a bright, spacious background, offering excellent contrast for darker text and elements. For a warmer base, consider #FFD2A8.

text

For optimal readability on lighter backgrounds like #FFF5D2, use the darkest shades like #BF5A31 or a deep charcoal. On dark backgrounds, a crisp off-white is recommended.

Accessibility notes

  • Ensure good contrast for text placed on #FFD2A8; a dark terracotta or black is essential.
  • The rich #BF5A31 offers strong contrast for light-colored text when used as a background.
  • Avoid using #E27242 and #FFA874 for small text elements against each other due to their similar warmth.
  • Pair #BF5A31 with #FFF5D2 for a classic, highly readable, and impactful combination.

Recommended combinations

Canyon Walls

Creates a vibrant yet grounded visual, perfect for hero sections or prominent graphics.

#BF5A31 · #E27242 · #FFF5D2

Sunlit Ochre

Offers a soft, radiant feel, suitable for testimonials or light content blocks.

#FFA874 · #FFD2A8 · #FFF5D2

Desert Glow

A cohesive and warm trio for navigation, buttons, or strong design elements.

#E27242 · #BF5A31 · #FFA874

CSS variables

:root {
  --terra-vista-clay-1: #BF5A31;
  --terra-vista-clay-2: #E27242;
  --terra-vista-clay-3: #FFA874;
  --terra-vista-clay-4: #FFD2A8;
  --terra-vista-clay-5: #FFF5D2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terra-vista-clay": {
        1: "#BF5A31",
        2: "#E27242",
        3: "#FFA874",
        4: "#FFD2A8",
        5: "#FFF5D2",
      }
    }
  }
}

Related searches

desert clay color palettewarm ochre colorssunlit terracotta schemerustic canyon tonesnatural sandy oranges

Palette colors

Hex values

Color 1#BF5A31
·
Color 2#E27242
·
Color 3#FFA874
·
Color 4#FFD2A8
·
Color 5#FFF5D2
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.4:1Fail
3.2:1AA18
4.1:1AA18
2
1.4:1Fail
1.7:1Fail
2.2:1Fail
2.9:1Fail
3
2.4:1Fail
1.7:1Fail
1.4:1Fail
1.7:1Fail
4
3.2:1AA18
2.2:1Fail
1.4:1Fail
1.3:1Fail
5
4.1:1AA18
2.9:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Terra Vista Clay

View all earth