Back to palettes

Palette

Terracotta Vista Blend

Warm, baked earth tones reminiscent of ancient terracotta pottery and sun-drenched landscapes.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Terracotta Vista Blend 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 Terracotta Vista Blend.

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

Data visualization

#AA6C39#D4936A#E8B49B#7B4D2B#C17F4E

Palette guide

How to use Terracotta Vista Blend

Overview

The Terracotta Vista Blend palette evokes warm, baked earth tones, reminiscent of ancient pottery and sun-drenched desert landscapes. It features the rich #AA6C39 as a strong anchor, complemented by the inviting #D4936A and the softer #E8B49B. A deep, grounding #7B4D2B provides essential contrast and stability, while #C17F4E offers a balanced mid-tone. This palette is ideal for designers and developers aiming to create rustic, warm, and natural experiences, blending the rugged beauty of the desert with the comfort of clay.

Best used for

  • Southwestern or desert-themed branding
  • Artisan craft markets and product lines
  • Historical or cultural museum websites
  • Natural building materials promotion
  • Warm, inviting interior design projects
  • Outdoor adventure gear branding

Suggested color roles

primary

Utilize #AA6C39 as a rich, grounding, main brand color for impactful headings or key visual elements.

secondary

Employ #C17F4E for supporting warmth, secondary headings, or prominent call-to-action buttons.

accent

Apply #D4936A for lighter highlights, decorative details, or as a background for soft UI components.

background

Use #E8B49B as a soft, warm base for main content areas, providing a comforting and natural canvas.

text

Choose #7B4D2B as the deepest, most readable text color for body copy and primary headings, ensuring strong contrast.

Accessibility notes

  • Ensure #7B4D2B provides excellent contrast on #E8B49B for all body text and essential information.
  • When using #AA6C39 for text, ensure it is on a sufficiently light background for readability.
  • Avoid using #E8B49B for small or critical text elements due to its lightness; reserve it for larger accents or backgrounds.
  • Verify contrast ratios for all interactive elements and their various states to meet WCAG accessibility standards.

Recommended combinations

Desert Hues

Create smooth, inviting gradients for headers, hero sections, or background textures that evoke a desert landscape.

#AA6C39 · #D4936A · #E8B49B

Rustic Depth

Form a strong text-on-background combination, with the deep brown on the light base, accented by the primary terracotta.

#7B4D2B · #E8B49B · #AA6C39

Warm Clay

Achieve harmonious UI components, secondary feature sections, or subtle graphical elements that blend seamlessly.

#C17F4E · #AA6C39 · #D4936A

CSS variables

:root {
  --terracotta-vista-blend-1: #AA6C39;
  --terracotta-vista-blend-2: #D4936A;
  --terracotta-vista-blend-3: #E8B49B;
  --terracotta-vista-blend-4: #7B4D2B;
  --terracotta-vista-blend-5: #C17F4E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terracotta-vista-blend": {
        1: "#AA6C39",
        2: "#D4936A",
        3: "#E8B49B",
        4: "#7B4D2B",
        5: "#C17F4E",
      }
    }
  }
}

Related searches

baked earth color palettedesert terracotta shadesrustic brown color schemewarm clay hex codesnatural landscape colors

Palette colors

Hex values

Color 1#AA6C39
·
Color 2#D4936A
·
Color 3#E8B49B
·
Color 4#7B4D2B
·
Color 5#C17F4E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.3:1Fail
1.7:1Fail
1.3:1Fail
2
1.7:1Fail
1.4:1Fail
2.8:1Fail
1.3:1Fail
3
2.3:1Fail
1.4:1Fail
3.9:1AA18
1.8:1Fail
4
1.7:1Fail
2.8:1Fail
3.9:1AA18
2.2:1Fail
5
1.3:1Fail
1.3:1Fail
1.8:1Fail
2.2:1Fail

Similar palettes

More like Terracotta Vista Blend

View all earth