Back to palettes

Palette

Terracotta Rooftop Sunset

The vibrant and earthy hues of terracotta rooftops bathed in a warm sunset glow.

warmenergetic5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Terracotta Rooftop Sunset 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 Rooftop Sunset.

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

Data visualization

#C25B3E#E07D5A#F5A87B#F28E61#8C402E

Palette guide

How to use Terracotta Rooftop Sunset

Overview

The Terracotta Rooftop Sunset palette captures the vibrant and earthy hues of terracotta rooftops bathed in a warm sunset glow. This energetic collection features rich oranges and deep reds, from the inviting #C25B3E and #E07D5A to the luminous #F5A87B and #F28E61. A grounding deep brown, #8C402E, anchors the palette, providing a strong contrast. Designers and developers can leverage these colors to create dynamic, warm, and inviting experiences. It’s perfect for projects that aim to evoke the passionate energy and rustic beauty of a Mediterranean sunset, blending tradition with vibrant appeal.

Best used for

  • Event promotion and lively marketing campaigns
  • Vibrant branding for travel or tourism
  • Creative portfolios and artistic websites
  • E-commerce for high-energy fashion or decor
  • Restaurant and hospitality branding with a warm ambiance
  • Blog themes focused on travel, food, or lifestyle

Suggested color roles

primary

Utilize #C25B3E as a strong, passionate primary color for main headers, hero sections, or impactful calls-to-action.

secondary

Employ #E07D5A for subheadings, secondary buttons, or large content blocks, offering a slightly softer, yet still vibrant, warmth.

accent

Introduce #F5A87B for luminous highlights, interactive elements, or decorative details to add a bright, inviting glow.

background

Apply #F5A87B as a soft, warm background, creating an inviting canvas that allows darker elements to stand out, or use a very light cream.

text

Select #8C402E for primary body text and labels, ensuring strong readability against lighter backgrounds. For headings, #C25B3E offers a bold and cohesive option.

Accessibility notes

  • Ensure sufficient contrast between #8C402E text and lighter backgrounds like #F5A87B or #F28E61 for WCAG AA compliance.
  • Avoid using #F5A87B or #F28E61 for small text or icons on light backgrounds; they are best used as larger background elements or accents.
  • When using #C25B3E or #E07D5A as backgrounds, ensure text or foreground elements are in a highly contrasting color, such as white or #F5A87B.
  • Consider larger font sizes for text in #E07D5A on #F5A87B if used for decorative elements, to improve legibility.

Recommended combinations

Sunset Glow

Ideal for a vibrant hero section: luminous background, strong primary heading, and deep text for impact.

#F5A87B · #C25B3E · #8C402E

Earthy Energy

Creates a dynamic, warm gradient, suitable for feature panels or visual storytelling.

#E07D5A · #F28E61 · #C25B3E

Grounded Vibrancy

Provides a strong, earthy base with vibrant mid-tones and a bright highlight, excellent for footers or rich sections.

#8C402E · #E07D5A · #F5A87B

CSS variables

:root {
  --terracotta-rooftop-sunset-1: #C25B3E;
  --terracotta-rooftop-sunset-2: #E07D5A;
  --terracotta-rooftop-sunset-3: #F5A87B;
  --terracotta-rooftop-sunset-4: #F28E61;
  --terracotta-rooftop-sunset-5: #8C402E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terracotta-rooftop-sunset": {
        1: "#C25B3E",
        2: "#E07D5A",
        3: "#F5A87B",
        4: "#F28E61",
        5: "#8C402E",
      }
    }
  }
}

Related searches

sunset color schemewarm orange palettevibrant terracotta designrustic earth tonesmediterranean sunset colors

Palette colors

Hex values

Color 1#C25B3E
·
Color 2#E07D5A
·
Color 3#F5A87B
·
Color 4#F28E61
·
Color 5#8C402E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.2:1Fail
1.8:1Fail
1.7:1Fail
2
1.5:1Fail
1.5:1Fail
1.2:1Fail
2.5:1Fail
3
2.2:1Fail
1.5:1Fail
1.2:1Fail
3.7:1AA18
4
1.8:1Fail
1.2:1Fail
1.2:1Fail
3.1:1AA18
5
1.7:1Fail
2.5:1Fail
3.7:1AA18
3.1:1AA18

Similar palettes

More like Terracotta Rooftop Sunset

View all warm
Sedona Canyons Fire
Arid Twilight Glow
Coral Sunset Blaze
Crimson Ember Blaze
Crimson Sunset Haze
Desert Ember Glow