Palette

Mediterranean Clay Roof

Warm terracotta reds and refreshing blues conjure images of sun-drenched Mediterranean villages and their iconic rooftops.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#CD5C5C#B22222#F5DEB3#87CEEB#ADD8E6

Palette guide

How to use Mediterranean Clay Roof

Overview

The Mediterranean Clay Roof palette beautifully combines warm terracotta reds with refreshing blues, conjuring images of sun-drenched Mediterranean villages and their iconic rooftops. This collection features strong reds like #B22222 (firebrick) and #CD5C5C (indian red), balanced by the airy #87CEEB (sky blue) and #ADD8E6 (light blue). The soft, neutral #F5DEB3 (wheat) provides an excellent base, allowing the vibrant and earthy tones to truly stand out. Designers and developers can leverage this palette to create designs that feel traditional yet fresh, evoking a sense of history, warmth, and the clear skies of coastal Europe. It's perfect for projects with a natural and inviting mood.

Best used for

Travel and tourism marketing for European destinations
Architectural visualization and design concepts
Historical preservation or cultural heritage sites
Rustic cafe or restaurant branding
Traditional craft and artisan product websites
Home renovation or decor inspiration

Suggested color roles

primary

Designate #B22222 as the anchor, ideal for strong calls-to-action, main headings, or elements requiring significant visual weight.

secondary

Utilize #CD5C5C for supporting information, secondary buttons, or larger background sections, providing a softer red tone.

accent

Introduce #87CEEB as a refreshing accent for icons, interactive elements, or to break up warm tones with a touch of coolness.

background

Employ #F5DEB3 as a soft, neutral background, offering a warm and inviting canvas for your content.

text

For body text, #B22222 provides a bold and readable option on lighter backgrounds like #F5DEB3, or use a very dark brown (#3A2A1E) for optimal contrast.

Accessibility notes

Ensure sufficient contrast when pairing text with #F5DEB3; #B22222 offers good readability.
Be mindful of color blindness when using red and blue together; provide alternative cues where possible.
Avoid using #CD5C5C for small text on #F5DEB3 without checking contrast ratios.
Use #87CEEB for larger text or graphical elements to ensure visibility against the warm background.

Recommended combinations

Village Scene

Apply #F5DEB3 as a background, #B22222 for strong titles or important text, and #87CEEB for sky-like elements or interactive components.

#F5DEB3 · #B22222 · #87CEEB

Roof Tile

Use #CD5C5C for card backgrounds, #B22222 for borders or key highlights, and #ADD8E6 for icons or subtle accents.

#CD5C5C · #B22222 · #ADD8E6

Coastal Contrast

Utilize #ADD8E6 as a refreshing background, #B22222 for calls-to-action, and #F5DEB3 for supporting text or feature boxes.

#ADD8E6 · #B22222 · #F5DEB3

CSS variables

:root {
  --mediterranean-clay-roof-1: #CD5C5C;
  --mediterranean-clay-roof-2: #B22222;
  --mediterranean-clay-roof-3: #F5DEB3;
  --mediterranean-clay-roof-4: #87CEEB;
  --mediterranean-clay-roof-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mediterranean-clay-roof": {
        1: "#CD5C5C",
        2: "#B22222",
        3: "#F5DEB3",
        4: "#87CEEB",
        5: "#ADD8E6",
      }
    }
  }
}

Hex values

Color 1#CD5C5C

Color 2#B22222

Color 3#F5DEB3

Color 4#87CEEB

Color 5#ADD8E6

Accessibility

Contrast checker

1.7:1Fail

3:1AA18

2.3:1Fail

2.6:1Fail

1.7:1Fail

5.1:1AA

3.8:1AA18

4.4:1AA18

3:1AA18

5.1:1AA

1.3:1Fail

1.2:1Fail

2.3:1Fail

3.8:1AA18

1.3:1Fail

1.1:1Fail

2.6:1Fail

4.4:1AA18

1.2:1Fail

1.1:1Fail

Similar palettes

More like Mediterranean Clay Roof

View all earth

Aegean Cliffside Home

Aegean Village

Mediterranean Clay Harvest

Mediterranean Clay Tile

Mediterranean Terra cotta

Mediterranean Tile Warmth