Palette

Terra Cotta Sunset

The warm, rich glow of a desert sunset reflecting on ancient earthen structures.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Terra Cotta 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 Terra Cotta Sunset.

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

Data visualization

#6D2E14#B75203#D9882E#E5C3A6#8B6F4E

Palette guide

How to use Terra Cotta Sunset

Overview

The Terra Cotta Sunset palette evokes the dramatic, rich glow of a desert sunset reflecting on ancient earthen structures. This collection features deep, robust browns and vibrant, fiery oranges, from the profound #6D2E14 to the bright #D9882E. The warm #B75203 adds a striking intensity, while the soft #E5C3A6 provides a gentle, dusty contrast. A grounding #8B6F4E ties the palette together with its muted, earthy presence. It’s an exceptional choice for designs that aim to convey strength, natural beauty, and a sense of timeless adventure. This palette is particularly effective for projects requiring a bold, rustic, and deeply evocative aesthetic.

Best used for

Adventure travel branding
Southwestern or desert-themed decor
Artisan coffee or craft beer packaging
Masculine product lines (grooming, outdoor gear)
Event invitations with a bold, natural feel
Websites for cultural heritage or exploration

Suggested color roles

primary

Use #B75203 as a dominant color for main headings or key design elements, providing vibrant, inviting energy.

secondary

Apply #D9882E for supporting content or background textures, offering a softer, sun-kissed warmth.

accent

Employ #6D2E14 for impactful calls-to-action or important details, adding deep contrast and grounding the design.

background

Utilize #E5C3A6 for light, airy backgrounds, creating a soft, expansive canvas that allows other colors to shine.

text

For body text, #6D2E14 ensures excellent readability on lighter backgrounds, grounding the design with its profound depth.

Accessibility notes

Ensure #6D2E14 text has strong contrast against #E5C3A6 backgrounds for optimal readability.
Avoid using #B75203 on #D9882E for small text due to potential low contrast.
Lighter shades like #E5C3A6 are best reserved for backgrounds or large decorative elements.
Prioritize darker hues like #6D2E14 and #8B6F4E for critical information to meet accessibility standards.

Recommended combinations

Desert Fire

A bold and dynamic combination, perfect for designs that need to make a strong, adventurous statement.

#B75203 · #6D2E14 · #E5C3A6

Earthen Glow

Captures a warm, inviting feel, ideal for conveying natural beauty, warmth, and rustic charm.

#D9882E · #B75203 · #8B6F4E

Twilight Sands

Highlights the palette's softer and deeper tones, suitable for designs requiring a muted, sophisticated, and natural look.

#E5C3A6 · #8B6F4E · #6D2E14

CSS variables

:root {
  --terra-cotta-sunset-1: #6D2E14;
  --terra-cotta-sunset-2: #B75203;
  --terra-cotta-sunset-3: #D9882E;
  --terra-cotta-sunset-4: #E5C3A6;
  --terra-cotta-sunset-5: #8B6F4E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terra-cotta-sunset": {
        1: "#6D2E14",
        2: "#B75203",
        3: "#D9882E",
        4: "#E5C3A6",
        5: "#8B6F4E",
      }
    }
  }
}

Hex values

Color 1#6D2E14

Color 2#B75203

Color 3#D9882E

Color 4#E5C3A6

Color 5#8B6F4E

Accessibility

Contrast checker

2.1:1Fail

3.7:1AA18

6.2:1AA

2.2:1Fail

2.1:1Fail

1.8:1Fail

3:1AA18

1.1:1Fail

3.7:1AA18

1.8:1Fail

1.7:1Fail

6.2:1AA

3:1AA18

1.7:1Fail

2.8:1Fail

2.2:1Fail

1.1:1Fail

1.7:1Fail

2.8:1Fail

Similar palettes

More like Terra Cotta Sunset

Terra Cotta Sunset

See it in context.

Ready when you are.

Built with Terra Cotta Sunset.

How to use Terra Cotta Sunset

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Desert Fire

Earthen Glow

Twilight Sands

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Terra Cotta Sunset