Back to palettes

Palette

Terracotta Roof Tiles

Earthy oranges and browns reminiscent of sun-baked roof tiles on a Mediterranean villa.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B0653D#D37B55#E79B77#F1B295#D2691E

Palette guide

How to use Terracotta Roof Tiles

Overview

The Terracotta Roof Tiles palette captures the sun-baked, rustic charm of Mediterranean architecture. Featuring a gradient of warm, earthy oranges and browns, from the deep #B0653D to the lighter #F1B295, it evokes images of sun-drenched villas. The vibrant #D2691E adds a touch of classic terracotta intensity. Designers and developers can use this palette to create inviting, natural, and sophisticated digital or physical spaces. Its harmonious blend of tones is perfect for projects that require a sense of history, warmth, and the timeless appeal of southern European landscapes.

Best used for

  • Architectural and real estate websites
  • Travel agencies promoting Mediterranean destinations
  • Traditional home decor e-commerce sites
  • Brand identity for artisan food or wine products
  • Rustic event invitations or marketing
  • Cultural heritage preservation websites

Suggested color roles

primary

Utilize #B0653D as a strong, grounding primary color for main headers, navigation, or key interactive elements.

secondary

Employ #D37B55 for subheadings, feature panels, or to add a slightly brighter, inviting warmth to content areas.

accent

Introduce #D2691E for impactful calls-to-action, highlights, or decorative elements to add a classic terracotta pop.

background

Apply #F1B295 as a soft, warm background, providing a clean yet inviting canvas for content.

text

Choose #B0653D for primary body text and labels, ensuring excellent readability against lighter backgrounds. For headings, #D2691E offers a rich, authoritative feel.

Accessibility notes

  • Ensure sufficient contrast between #B0653D text and light backgrounds like #F1B295 or #E79B77 for WCAG AA compliance.
  • Avoid using #D37B55 for small text on very light backgrounds; opt for darker shades for better legibility.
  • When using #D2691E as a background, ensure text or foreground elements are in a highly contrasting color, such as near-white.
  • Consider larger font sizes for text in #E79B77 on #D37B55 to improve readability, especially for decorative text.

Recommended combinations

Sunny Read

Perfect for content readability: light background, strong header, and a classic terracotta accent.

#F1B295 · #B0653D · #D2691E

Tile Gradient

Creates a harmonious gradient effect, ideal for layered designs or visual storytelling.

#D37B55 · #E79B77 · #B0653D

Mediterranean Pop

Emphasizes key features with a vibrant highlight against a warm, muted background and grounded text.

#D2691E · #F1B295 · #B0653D

CSS variables

:root {
  --terracotta-roof-tiles-1: #B0653D;
  --terracotta-roof-tiles-2: #D37B55;
  --terracotta-roof-tiles-3: #E79B77;
  --terracotta-roof-tiles-4: #F1B295;
  --terracotta-roof-tiles-5: #D2691E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terracotta-roof-tiles": {
        1: "#B0653D",
        2: "#D37B55",
        3: "#E79B77",
        4: "#F1B295",
        5: "#D2691E",
      }
    }
  }
}

Related searches

mediterranean roof tile colorsrustic orange palettesun-baked terracotta schemewarm earthy architecture colorsterracotta brown hex

Palette colors

Hex values

Color 1#B0653D
·
Color 2#D37B55
·
Color 3#E79B77
·
Color 4#F1B295
·
Color 5#D2691E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2:1Fail
2.4:1Fail
1.2:1Fail
2
1.4:1Fail
1.4:1Fail
1.7:1Fail
1.2:1Fail
3
2:1Fail
1.4:1Fail
1.2:1Fail
1.6:1Fail
4
2.4:1Fail
1.7:1Fail
1.2:1Fail
2:1Fail
5
1.2:1Fail
1.2:1Fail
1.6:1Fail
2:1Fail

Similar palettes

More like Terracotta Roof Tiles

View all warm
Rustic Tuscan Sunset
Sun Drenched Tuscan
Sun-Drenched Terracotta
Sunbaked Terracotta Roofs
Autumn Cider
Autumn Leaf Rustle