Back to palettes

Palette

Mediterranean Clay House

Sun-drenched hues of stucco and clay, reflecting the warmth of a Mediterranean home.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mediterranean Clay House 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 Mediterranean Clay House.

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

Data visualization

#F7E5D9#F2D0B6#E0A37D#C77D5E#9C5C42

Palette guide

How to use Mediterranean Clay House

Overview

The Mediterranean Clay House palette captures the sun-drenched hues of stucco and clay, reflecting the inherent warmth and natural beauty of a Mediterranean home. This inviting collection ranges from the soft #F7E5D9 (off-white) and #F2D0B6 (pale peach) to the richer #E0A37D (light terracotta) and #C77D5E (terracotta), culminating in the deep, grounding #9C5C42 (dark brown). Designers and developers can leverage this palette to create spaces and interfaces that feel cozy, authentic, and rooted in natural aesthetics. It's ideal for projects that aim to evoke comfort, tradition, and a welcoming atmosphere, embodying a natural and serene mood.

Best used for

  • Architectural rendering and interior design projects
  • Home decor and furnishing brands
  • Real estate websites (especially for homes with character)
  • Natural beauty and cosmetic packaging
  • Artisanal craft websites and branding
  • Lifestyle blogs focused on slow living or natural aesthetics

Suggested color roles

primary

Utilize #C77D5E as a prominent color for key sections, major headings, or important calls-to-action, providing a warm, inviting anchor.

secondary

Employ #E0A37D for supporting elements, card backgrounds, or subheadings, offering a softer yet still rich tone.

accent

Introduce #9C5C42 sparingly for grounding details, strong borders, or subtle decorative elements to add depth and sophistication.

background

Use #F7E5D9 for a clean, airy background, mimicking sun-washed stucco walls and providing a light base.

text

For body text, #9C5C42 offers excellent readability and a harmonious feel on lighter backgrounds, or use a very dark brown (#3A2A1E) for maximum clarity.

Accessibility notes

  • Ensure good contrast for text on #F7E5D9; #9C5C42 works well, but lighter colors may not.
  • Avoid using #F2D0B6 or #E0A37D for small text unless contrasted with a very dark background.
  • The contrast between #C77D5E and #F7E5D9 is good for headings but check for body text.
  • Consider larger font sizes or bolding for text in mid-tone colors like #E0A37D to enhance readability.

Recommended combinations

Stucco Wall

Ideal for clean layouts with #F7E5D9 as background, #9C5C42 for body text, and #C77D5E for prominent headings or navigation.

#F7E5D9 · #9C5C42 · #C77D5E

Warm Interior

Use #F2D0B6 for content panels, #E0A37D for borders or dividers, and #C77D5E for interactive elements or icons.

#F2D0B6 · #E0A37D · #C77D5E

Earthy Depth

Apply #F7E5D9 as a light base, #C77D5E for key buttons or calls-to-action, and #9C5C42 for important links or footer text.

#F7E5D9 · #C77D5E · #9C5C42

CSS variables

:root {
  --mediterranean-clay-house-1: #F7E5D9;
  --mediterranean-clay-house-2: #F2D0B6;
  --mediterranean-clay-house-3: #E0A37D;
  --mediterranean-clay-house-4: #C77D5E;
  --mediterranean-clay-house-5: #9C5C42;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mediterranean-clay-house": {
        1: "#F7E5D9",
        2: "#F2D0B6",
        3: "#E0A37D",
        4: "#C77D5E",
        5: "#9C5C42",
      }
    }
  }
}

Related searches

mediterranean house colorsclay stucco palettewarm natural hues designterracotta home aestheticrustic architecture colors

Palette colors

Hex values

Color 1#F7E5D9
·
Color 2#F2D0B6
·
Color 3#E0A37D
·
Color 4#C77D5E
·
Color 5#9C5C42
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.8:1Fail
2.6:1Fail
4.3:1AA18
2
1.2:1Fail
1.5:1Fail
2.2:1Fail
3.6:1AA18
3
1.8:1Fail
1.5:1Fail
1.5:1Fail
2.4:1Fail
4
2.6:1Fail
2.2:1Fail
1.5:1Fail
1.6:1Fail
5
4.3:1AA18
3.6:1AA18
2.4:1Fail
1.6:1Fail

Similar palettes

More like Mediterranean Clay House

View all warm
Glazed Terracotta Pots
Mediterranean Courtyard Sun
Terracotta Rooftop Dawn
Tuscan Terra Clay
Baked Clay Pottery
Bohemian Earth Craft