Back to palettes

Palette

Mediterranean Courtyard Sun

Warm earth tones and clear blues, capturing the sun-drenched ambiance of a tranquil Mediterranean courtyard.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mediterranean Courtyard Sun 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 Courtyard Sun.

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

Data visualization

#ADD8E6#D2B48C#A0522D#8B4513#F0F8FF

Palette guide

How to use Mediterranean Courtyard Sun

Overview

The Mediterranean Courtyard Sun palette masterfully blends clear blues with rich, warm earth tones, capturing the tranquil, sun-drenched ambiance of a classic Mediterranean setting. With a refreshing light blue (#ADD8E6) reminiscent of clear skies, and grounding terracotta shades like #D2B48C, #A0522D, and deep #8B4513, complemented by a soft, near-white base (#F0F8FF), this palette offers versatility. Designers can create inviting, natural aesthetics, while developers will appreciate the clear distinction between colors for defining sections, interactive elements, and text, ensuring readability across varied components.

Best used for

  • Rustic or natural brand identities
  • Home decor and interior design websites
  • Artisan product showcases (pottery, textiles)
  • Travel blogs focusing on European destinations
  • Restaurant or cafe branding with an earthy feel
  • Outdoor living space design concepts

Suggested color roles

primary

A rich, inviting terracotta, #A0522D is perfect for main headings, call-to-action buttons, or significant brand accents that demand attention.

secondary

A softer tan, #D2B48C is excellent for supporting text, navigation elements, or secondary information panels, offering warmth and readability.

accent

A crisp sky blue, #ADD8E6 is ideal for interactive elements, highlights, or to introduce a refreshing visual break and sense of openness.

background

A gentle, airy near-white, #F0F8FF provides a clean, luminous canvas, allowing the warmer tones to truly shine.

text

Use a deep brown like #8B4513 for body text on light backgrounds to ensure legibility and maintain the palette's natural feel.

Accessibility notes

  • Ensure #ADD8E6 used as text has sufficient contrast against #F0F8FF; generally, it's better for accents.
  • #A0522D and #8B4513 offer excellent contrast for text on #F0F8FF and #ADD8E6.
  • Be mindful when pairing #D2B48C with #F0F8FF for small text, as contrast might be borderline.
  • Use a tool to check WCAG compliance for text colors, especially on interactive elements.

Recommended combinations

Earth & Sky

Grounding dark brown for text on a white background, with a refreshing blue for interactive elements or highlights.

#A0522D · #F0F8FF · #ADD8E6

Terracotta Warmth

Create depth with #8B4513 as primary, #D2B48C for secondary elements, all on a soft #F0F8FF background.

#D2B48C · #8B4513 · #F0F8FF

Courtyard Refresh

A cool blue accent with warm browns for content, perfect for sections needing a vibrant touch against earthy tones.

#ADD8E6 · #A0522D · #D2B48C

CSS variables

:root {
  --mediterranean-courtyard-sun-1: #ADD8E6;
  --mediterranean-courtyard-sun-2: #D2B48C;
  --mediterranean-courtyard-sun-3: #A0522D;
  --mediterranean-courtyard-sun-4: #8B4513;
  --mediterranean-courtyard-sun-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mediterranean-courtyard-sun": {
        1: "#ADD8E6",
        2: "#D2B48C",
        3: "#A0522D",
        4: "#8B4513",
        5: "#F0F8FF",
      }
    }
  }
}

Related searches

mediterranean color schemesterracotta and blue palettenatural earth tone colorssun-drenched design paletterustic courtyard colors

Palette colors

Hex values

Color 1#ADD8E6
·
Color 2#D2B48C
·
Color 3#A0522D
·
Color 4#8B4513
·
Color 5#F0F8FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
3.7:1AA18
4.6:1AA
1.4:1Fail
2
1.3:1Fail
2.8:1Fail
3.6:1AA18
1.8:1Fail
3
3.7:1AA18
2.8:1Fail
1.3:1Fail
5.2:1AA
4
4.6:1AA
3.6:1AA18
1.3:1Fail
6.6:1AA
5
1.4:1Fail
1.8:1Fail
5.2:1AA
6.6:1AA

Similar palettes

More like Mediterranean Courtyard Sun

View all warm
Terracotta Village Charm
Sun-Drenched Terracotta
Terra Cotta Bloom
Amber Wheat Harvest
Autumn Leaf Crisp
Autumn Leaf Quilt