Back to palettes

Palette

Desert Clay Vista

Inspired by sun-baked canyons and rustic terracotta, a palette of natural warmth.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#A0522D#CD853F#D2B48C#F5DEB3

Palette guide

How to use Desert Clay Vista

Overview

The Desert Clay Vista palette is inspired by sun-baked canyons and rustic terracotta, offering a collection of natural warmth. This earthy scheme features the deep #8B4513 and #A0522D, complemented by the vibrant #CD853F and the lighter #D2B48C. The inclusion of the airy #F5DEB3 adds a balancing, sun-kissed element. Designers and developers can utilize these colors to evoke a sense of authenticity, expansive landscapes, and organic charm. It's an excellent choice for projects requiring a rustic, inviting, and genuinely earthy visual experience that connects to the serene beauty of desert vistas.

Best used for

  • Rustic home decor brands
  • Southwestern-themed events
  • Adventure travel websites
  • Natural beauty and wellness products
  • Earthy lifestyle blogs
  • Handcrafted artisan products

Suggested color roles

primary

#CD853F - A rich, warm orange-brown, excellent for main content areas, bold headings, or dominant graphic elements, conveying warmth and energy.

secondary

#A0522D - A deep, earthy red-brown, providing a strong, grounding presence for navigation, footers, or important textual content.

accent

#8B4513 - A very deep, robust brown, perfect for subtle highlights, interactive states, or decorative flourishes that add visual depth.

background

#F5DEB3 - A very light, creamy beige, serving as a clean, spacious backdrop that enhances readability and the natural feel.

text

#8B4513 - A deep, robust brown, offering excellent readability for body text against lighter backgrounds, or use black for maximum contrast.

Accessibility notes

  • Ensure sufficient contrast between #8B4513 text and #F5DEB3 backgrounds for WCAG AA compliance.
  • Avoid using #CD853F or #D2B48C for small text on similar background shades, as contrast may be insufficient.
  • For critical information, pair the darkest color #8B4513 with the lightest background #F5DEB3.
  • Consider using pure black or a very dark charcoal for body text on very light backgrounds for optimal legibility.

Recommended combinations

Canyon Contrast

High-contrast pairing for headlines and clean backgrounds, evoking raw earth and light.

#8B4513 · #F5DEB3 · #A0522D

Terracotta Blend

A warm, inviting blend for layered UI elements or subtle branding accents, reflecting sun-baked clay.

#A0522D · #CD853F · #D2B48C

Vista Layers

A versatile trio for extensive layouts, providing depth and natural warmth across sections.

#A0522D · #D2B48C · #F5DEB3

CSS variables

:root {
  --desert-clay-vista-1: #8B4513;
  --desert-clay-vista-2: #A0522D;
  --desert-clay-vista-3: #CD853F;
  --desert-clay-vista-4: #D2B48C;
  --desert-clay-vista-5: #F5DEB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-clay-vista": {
        1: "#8B4513",
        2: "#A0522D",
        3: "#CD853F",
        4: "#D2B48C",
        5: "#F5DEB3",
      }
    }
  }
}

Related searches

earthy tan brown palettenatural desert colorsrustic terracotta schemesouthwest vista hueswarm clay beige

Palette colors

Hex values

Color 1#8B4513
·
Color 2#A0522D
·
Color 3#CD853F
·
Color 4#D2B48C
·
Color 5#F5DEB3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.4:1Fail
3.6:1AA18
5.4:1AA
2
1.3:1Fail
1.9:1Fail
2.8:1Fail
4.3:1AA18
3
2.4:1Fail
1.9:1Fail
1.5:1Fail
2.3:1Fail
4
3.6:1AA18
2.8:1Fail
1.5:1Fail
1.5:1Fail
5
5.4:1AA
4.3:1AA18
2.3:1Fail
1.5:1Fail

Similar palettes

More like Desert Clay Vista

View all earth