Palette

Sunbaked Terracotta

Warm and grounding, inspired by sun-drenched clay pottery and earthy desert landscapes.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E74C3C#C0392B#D35400#A93226#F1C40F

Palette guide

How to use Sunbaked Terracotta

Overview

The Sunbaked Terracotta palette is a vibrant and grounding collection, inspired by sun-drenched clay pottery and expansive desert landscapes. It features a bold terracotta red, #E74C3C, a deeper counterpart, #C0392B, and a striking burnt orange, #D35400. A rich, dark red, #A93226, provides strong contrast, while a sunny yellow, #F1C40F, offers a bright, energetic pop. This palette is ideal for designers and developers seeking to convey warmth, energy, and a connection to natural, earthy elements, making it versatile for both digital and print applications.

Best used for

Bold and energetic branding for startups
Desert-inspired fashion or interior design
Websites for cultural events or artisanal food products
Packaging that needs to convey warmth and natural ingredients
Educational materials on geology or ancient cultures
Modern rustic digital interfaces

Suggested color roles

primary

Use #E74C3C as the dominant color for its vibrant and warm presence, suitable for main headings or brand elements.

secondary

Apply #D35400 for complementary sections, buttons, or to add depth to visual hierarchies.

accent

Incorporate #F1C40F sparingly for high-impact accents, calls-to-action, or to draw attention to key information.

background

While the palette is rich, a neutral off-white or very light beige from outside the palette is recommended for primary backgrounds, with #F1C40F useful for subtle highlights.

text

For optimal readability, use #A93226 or a dark charcoal on lighter backgrounds, ensuring strong contrast against the vibrant hues.

Accessibility notes

Ensure high contrast when placing text on any of the vibrant colors; use #A93226 or black for text on #F1C40F.
Avoid using #E74C3C or #D35400 for small text on similarly warm backgrounds due to potential readability issues.
Utilize #F1C40F as a background for dark text where a bright, accessible contrast is needed.
Always check WCAG guidelines for color combinations, especially with these saturated tones.

Recommended combinations

Desert Sunset

Creates an energetic gradient, perfect for banners, headers, or impactful visual storytelling.

#E74C3C · #D35400 · #F1C40F

Earthy Depth

Provides a strong, grounded sequence for sections or elements requiring a sense of stability and richness.

#A93226 · #C0392B · #E74C3C

Vibrant Contrast

Ideal for highlighting key information, interactive elements, or creating dynamic visual points of interest.

#F1C40F · #A93226 · #D35400

CSS variables

:root {
  --sunbaked-terracotta-1: #E74C3C;
  --sunbaked-terracotta-2: #C0392B;
  --sunbaked-terracotta-3: #D35400;
  --sunbaked-terracotta-4: #A93226;
  --sunbaked-terracotta-5: #F1C40F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunbaked-terracotta": {
        1: "#E74C3C",
        2: "#C0392B",
        3: "#D35400",
        4: "#A93226",
        5: "#F1C40F",
      }
    }
  }
}

Hex values

Color 1#E74C3C

Color 2#C0392B

Color 3#D35400

Color 4#A93226

Color 5#F1C40F

Accessibility

Contrast checker

1.4:1Fail

1.1:1Fail

1.7:1Fail

2.3:1Fail

1.4:1Fail

1.3:1Fail

1.2:1Fail

3.3:1AA18

1.1:1Fail

1.3:1Fail

1.6:1Fail

2.5:1Fail