Palette

Mediterranean Tile Warmth

Inspired by the sun-drenched terracotta roofs and earthy tones of Mediterranean landscapes.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mediterranean Tile Warmth 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 Tile Warmth.

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

Data visualization

#B22222#A0522D#CD853F#D2B48C#DAA520

Palette guide

How to use Mediterranean Tile Warmth

Overview

The "Mediterranean Tile Warmth" palette (ID: mediterranean-tile-warmth) captures the rich, sun-baked essence of traditional Mediterranean architecture and landscapes. It features deep, robust hues like #B22222 (Firebrick) and #A0522D (Sienna), reminiscent of terracotta roofs and aged wood. Lighter, warm tones such as #CD853F (Peru), #D2B48C (Tan), and #DAA520 (Goldenrod) evoke sun-drenched stone and golden fields. This palette is ideal for designers aiming to create a rustic, inviting, and enduring aesthetic, perfect for conveying heritage, comfort, and natural beauty in various design contexts, from web interfaces to interior branding.

Best used for

Traditional restaurant branding
E-commerce for artisanal goods
Historic preservation projects
Interior design mood boards
Garden and landscape design websites
Cultural heritage promotions

Suggested color roles

primary

Use #B22222 (Firebrick) as a strong, foundational color for prominent headings, brand logos, or key interactive elements, signifying warmth and tradition.

secondary

Employ #A0522D (Sienna) for subheadings, navigation, or background sections, providing depth and an earthy, sophisticated feel.

accent

Apply #DAA520 (Goldenrod) sparingly for call-to-action buttons, alerts, or key highlights to add a vibrant, sunlit pop.

background

Utilize #D2B48C (Tan) as a soft, neutral base for main content areas, offering excellent readability and a natural, airy feel.

text

For primary body text, use #B22222 (Firebrick) or a deep brown/black on light backgrounds like #D2B48C. For headings on darker backgrounds, #D2B48C works well.

Accessibility notes

Ensure #B22222 or a dark brown has strong contrast against #D2B48C for all body text (WCAG AA standard).
#CD853F and #DAA520 should be used with caution for small text on #D2B48C due to potential low contrast; reserve for larger elements.
For interactive elements, always verify contrast ratios, especially when pairing mid-tones like #A0522D with lighter backgrounds to ensure usability.
Consider using a dark shade like #B22222 for essential information on lighter backgrounds to meet accessibility standards effectively.

Recommended combinations

Terracotta Roots

Ideal for establishing a strong, earthy brand identity or for creating a rustic, grounded visual theme in print or digital.

#B22222 · #A0522D · #D2B48C

Sunlit Stone

Perfect for highlighting warm accents, engaging banners, or elements that require a bright, inviting glow and natural feel.

#DAA520 · #CD853F · #D2B48C

Rustic Harmony

Suitable for subtle patterns, secondary content blocks, or UI elements that need a balanced, organic, and traditional appearance.

#A0522D · #D2B48C · #B22222

CSS variables

:root {
  --mediterranean-tile-warmth-1: #B22222;
  --mediterranean-tile-warmth-2: #A0522D;
  --mediterranean-tile-warmth-3: #CD853F;
  --mediterranean-tile-warmth-4: #D2B48C;
  --mediterranean-tile-warmth-5: #DAA520;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mediterranean-tile-warmth": {
        1: "#B22222",
        2: "#A0522D",
        3: "#CD853F",
        4: "#D2B48C",
        5: "#DAA520",
      }
    }
  }
}

Hex values

Color 1#B22222

Color 2#A0522D

Color 3#CD853F

Color 4#D2B48C

Color 5#DAA520

Accessibility

Contrast checker

1.2:1Fail

2.2:1Fail

3.4:1AA18

3:1Fail

1.2:1Fail

1.9:1Fail

2.8:1Fail

2.5:1Fail

2.2:1Fail

1.9:1Fail

1.5:1Fail

1.3:1Fail

3.4:1AA18

2.8:1Fail

1.5:1Fail

1.1:1Fail

3:1Fail

2.5:1Fail

1.3:1Fail

1.1:1Fail

Similar palettes

More like Mediterranean Tile Warmth

Artisan Pottery Wheel

Bohemian Rhapsody Folk

Bohemian Textile Thread