Back to palettes

Palette

Terracotta Vineyard

The warm, sun-baked tones of Mediterranean roof tiles mingling with vibrant vineyard greens.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A84D3A#C2624F#6B8E23#8B4513#D2B48C

Palette guide

How to use Terracotta Vineyard

Overview

The Terracotta Vineyard palette captures the essence of Mediterranean landscapes, blending the warm, sun-baked tones of roof tiles with vibrant vineyard greens. It features the rich terracotta of #A84D3A and a lighter #C2624F, harmonized by the lively #6B8E23. A deep #8B4513 provides earthy grounding, while the sandy #D2B48C offers a soft, natural base. This palette is perfect for designers and developers aiming to evoke a rustic, natural, and inviting atmosphere, reminiscent of wine country and organic living.

Best used for

  • Winery branding and labels
  • Farm-to-table restaurant design
  • Agricultural or organic product packaging
  • Rustic wedding invitations or decor
  • Gardening and landscaping websites
  • Ecotourism and nature retreat promotions

Suggested color roles

primary

Utilize #A84D3A as a rich, warm, foundational brand color for key headings or prominent visual elements.

secondary

Employ #6B8E23 as a fresh contrasting color for natural elements, icons, or secondary calls-to-action.

accent

Apply #C2624F for lighter terracotta accents, decorative details, or subtle interactive elements.

background

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

text

Choose #8B4513 for deep, grounding text, especially for body copy and prominent headings, ensuring strong contrast.

Accessibility notes

  • Ensure #8B4513 provides excellent contrast on #D2B48C for all body text and essential information.
  • When using #A84D3A or #6B8E23 for text, ensure it is on a sufficiently light background for readability.
  • Avoid using #C2624F for small or critical text elements due to its lightness; reserve it for larger accents.
  • Verify that text against #6B8E23 has sufficient contrast, potentially using white or a very light cream for optimal readability.

Recommended combinations

Vineyard Harmony

Create balanced branding elements, natural-themed layouts, or feature sections that blend warmth and freshness.

#A84D3A · #6B8E23 · #D2B48C

Rustic Contrast

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

#8B4513 · #D2B48C · #A84D3A

Warm Earth

Achieve subtle color layering for secondary UI elements, background textures, or decorative graphical components.

#C2624F · #A84D3A · #D2B48C

CSS variables

:root {
  --terracotta-vineyard-1: #A84D3A;
  --terracotta-vineyard-2: #C2624F;
  --terracotta-vineyard-3: #6B8E23;
  --terracotta-vineyard-4: #8B4513;
  --terracotta-vineyard-5: #D2B48C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terracotta-vineyard": {
        1: "#A84D3A",
        2: "#C2624F",
        3: "#6B8E23",
        4: "#8B4513",
        5: "#D2B48C",
      }
    }
  }
}

Related searches

vineyard color paletteterracotta and green colorsearthy rustic designwine country aestheticnatural warm tones

Palette colors

Hex values

Color 1#A84D3A
·
Color 2#C2624F
·
Color 3#6B8E23
·
Color 4#8B4513
·
Color 5#D2B48C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.5:1Fail
1.3:1Fail
2.8:1Fail
2
1.4:1Fail
1.1:1Fail
1.7:1Fail
2.1:1Fail
3
1.5:1Fail
1.1:1Fail
1.9:1Fail
1.9:1Fail
4
1.3:1Fail
1.7:1Fail
1.9:1Fail
3.6:1AA18
5
2.8:1Fail
2.1:1Fail
1.9:1Fail
3.6:1AA18

Similar palettes

More like Terracotta Vineyard

View all earth