Palette

Sunbaked Terracotta Roofs

Evoking the warmth of sun-baked rooftops and ancient ceramic tiles under a golden Mediterranean sun.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sunbaked Terracotta Roofs 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 Sunbaked Terracotta Roofs.

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

Data visualization

#CC7722#DAA520#E0B589#FAD6A5#A0522D

Palette guide

How to use Sunbaked Terracotta Roofs

Overview

The Sunbaked Terracotta Roofs palette evokes the rustic charm of Mediterranean architecture, blending warm earthy tones with golden highlights. Designers and developers can leverage this palette to create inviting, natural aesthetics. Its core comprises a rich terracotta orange, #CC7722, complemented by a sunny gold, #DAA520, and a deeper, grounding russet, #A0522D. Lighter shades like #E0B589 and #FAD6A5 provide excellent bases for readability and visual breathing room. This collection is perfect for projects aiming for a sophisticated yet natural feel, reminiscent of sun-drenched landscapes and artisan craftsmanship.

Best used for

Rustic branding and identity design
Interior design themes (Tuscan, Mediterranean)
Websites for artisan goods or craft breweries
Autumnal marketing campaigns and seasonal decor
Travel blogs or tourism sites focusing on historic destinations
Architectural visualization and rendering

Suggested color roles

primary

Use #CC7722 as the main brand color, embodying warmth and traditional appeal.

secondary

Apply #DAA520 for accents, calls-to-action, or secondary visual elements to add a touch of golden luminosity.

accent

Reserve #A0522D for strong contrasts, important headlines, or grounding elements that require depth and definition.

background

Utilize #FAD6A5 for clean, warm backgrounds, offering excellent legibility for darker text.

text

For body text, a deep charcoal like #A0522D or a classic black provides optimal readability on lighter backgrounds.

Accessibility notes

Ensure sufficient contrast between text and background, especially when pairing mid-tones like #DAA520.
Use #A0522D for text on #FAD6A5 or #E0B589 for excellent readability.
Avoid placing light text on #DAA520 or #E0B589 without careful contrast checking.
Consider using a slightly darker shade for borders or interactive elements if the background is #FAD6A5.

Recommended combinations

Warm Gradient

Ideal for hero sections, banners, or visual elements requiring a smooth, inviting transition.

#CC7722 · #DAA520 · #E0B589

Earthy Contrast

Effective for creating clear hierarchy in layouts, with a strong base and warm highlights.

#A0522D · #FAD6A5 · #CC7722

Subtle Warmth

Perfect for backgrounds and secondary elements where a soft, approachable warmth is desired.

#E0B589 · #FAD6A5 · #DAA520

CSS variables

:root {
  --sunbaked-terracotta-roofs-1: #CC7722;
  --sunbaked-terracotta-roofs-2: #DAA520;
  --sunbaked-terracotta-roofs-3: #E0B589;
  --sunbaked-terracotta-roofs-4: #FAD6A5;
  --sunbaked-terracotta-roofs-5: #A0522D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunbaked-terracotta-roofs": {
        1: "#CC7722",
        2: "#DAA520",
        3: "#E0B589",
        4: "#FAD6A5",
        5: "#A0522D",
      }
    }
  }
}

Hex values

Color 1#CC7722

Color 2#DAA520

Color 3#E0B589

Color 4#FAD6A5

Color 5#A0522D

Accessibility

Contrast checker

1.5:1Fail

1.8:1Fail

2.4:1Fail

1.7:1Fail

1.5:1Fail

1.2:1Fail

1.6:1Fail

2.5:1Fail

1.8:1Fail

1.2:1Fail

1.4:1Fail

3:1Fail

2.4:1Fail

1.6:1Fail

1.4:1Fail

4.1:1AA18

1.7:1Fail

2.5:1Fail

3:1Fail

4.1:1AA18

Similar palettes

More like Sunbaked Terracotta Roofs

View all warm

Sun Drenched Tuscan

Terracotta Roof Tiles

Tuscan Villa Charm

Earthen Spice Bake

Kiln Fired Earth

Mediterranean Coastal Sun