Palette

Terracotta Village Charm

Evoking the sun-baked charm of a Mediterranean village, with warm terracotta, crisp white, and natural olive hues.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A23E48#D8572A#F3A712#EFEBD8#5F7367

Palette guide

How to use Terracotta Village Charm

Overview

The Terracotta Village Charm palette vividly evokes the sun-baked allure of a Mediterranean village. It features the rich, warm terracotta of #D8572A, complemented by the deeper #A23E48. A cheerful #F3A712 adds a touch of sun-drenched vibrancy, while the crisp, near-white #EFEBD8 provides a fresh contrast. The grounding #5F7367, an olive green, completes this natural ensemble. This palette is excellent for designers and developers aiming to convey a rustic, vibrant, and inviting atmosphere, blending old-world charm with natural warmth.

Best used for

Mediterranean restaurant branding
Travel agencies (European destinations)
Handcrafted goods and artisan markets
Summer fashion or lifestyle blogs
Websites for quaint bed-and-breakfasts
Organic food packaging and branding

Suggested color roles

primary

Use #D8572A as a vibrant, welcoming brand color for impactful headings or key calls-to-action.

secondary

Employ #A23E48 for rich accents, historical elements, or to add depth to secondary sections.

accent

Apply #F3A712 for bright highlights, small interactive elements, or to draw attention to key features.

background

Utilize #EFEBD8 as a crisp, clean base for main content areas, providing a fresh and inviting canvas.

text

Choose #5F7367 for natural, grounding body text and headings, ensuring excellent readability against lighter backgrounds.

Accessibility notes

Ensure #5F7367 provides good contrast on #EFEBD8 for all body text and essential information.
When using #D8572A or #A23E48 for text, ensure it is on a sufficiently light background (like #EFEBD8).
Avoid using #F3A712 for small or critical text due to its brightness; it's best for accents or large elements.
Check color combinations for users with color vision deficiencies, especially with the red and green hues.

Recommended combinations

Vibrant Mediterranean

Create lively headers and primary UI elements, balancing warmth with a crisp, clean background.

#D8572A · #F3A712 · #EFEBD8

Rustic Earth

Achieve balanced layouts with a natural feel, using the deep red and olive green against the light background.

#A23E48 · #5F7367 · #EFEBD8

Village Accents

Highlight calls-to-action or feature sections, using the vibrant orange and yellow with grounding green.

#D8572A · #5F7367 · #F3A712

CSS variables

:root {
  --terracotta-village-charm-1: #A23E48;
  --terracotta-village-charm-2: #D8572A;
  --terracotta-village-charm-3: #F3A712;
  --terracotta-village-charm-4: #EFEBD8;
  --terracotta-village-charm-5: #5F7367;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terracotta-village-charm": {
        1: "#A23E48",
        2: "#D8572A",
        3: "#F3A712",
        4: "#EFEBD8",
        5: "#5F7367",
      }
    }
  }
}

Hex values

Color 1#A23E48

Color 2#D8572A

Color 3#F3A712

Color 4#EFEBD8

Color 5#5F7367

Accessibility

Contrast checker

1.6:1Fail

3.1:1AA18

5.3:1AA

1.2:1Fail

1.6:1Fail

1.9:1Fail

3.3:1AA18

1.3:1Fail

3.1:1AA18

1.9:1Fail

1.7:1Fail

2.5:1Fail

5.3:1AA

3.3:1AA18

1.7:1Fail

4.2:1AA18

1.2:1Fail

1.3:1Fail

2.5:1Fail

4.2:1AA18

Similar palettes

More like Terracotta Village Charm

View all warm

Mediterranean Courtyard Sun

Sun-Drenched Terracotta

Sunbaked Terra Village

Terra Cotta Bloom

Amber Wheat Harvest

Autumn Leaf Crisp