Palette

Terra Cotta Dreams

Warm, earthy oranges and browns mimic the rustic charm of terracotta and sun-drenched landscapes.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#CC7D55#C6896E#D1A176#AA6E4F#E3BF8D

Palette guide

How to use Terra Cotta Dreams

Overview

The Terra Cotta Dreams palette evokes the serene beauty of sun-drenched landscapes and rustic charm. Featuring warm, earthy oranges and browns, it's perfect for projects seeking a natural, inviting feel. Key colors like #CC7D55 and #AA6E4F offer a grounded yet vibrant foundation, complemented by softer tones such as #E3BF8D and #C6896E. This palette is ideal for creating designs that feel organic, handcrafted, and deeply connected to nature. Its gentle warmth ensures a comforting and approachable aesthetic, making it versatile for various design applications from digital interfaces to physical products. Explore the inviting depth of #D1A176 to truly capture that rustic elegance.

Best used for

Bohemian interior design themes
Artisanal food and beverage branding
Eco-friendly product packaging
Nature-inspired digital illustrations
Rustic wedding invitations and decor
Websites for wellness or handcrafted goods

Suggested color roles

primary

Use #CC7D55 as a dominant brand color for headers or main content blocks, radiating warmth and approachability.

secondary

Apply #C6896E for supporting elements like secondary navigation, subheadings, or background textures to maintain softness.

accent

Highlight important calls-to-action or key details with #AA6E4F, providing a rich, earthy contrast.

background

Utilize #E3BF8D for light, airy backgrounds, creating a gentle canvas that allows other colors to stand out.

text

For body text, use #AA6E4F or a dark charcoal to ensure readability, especially on lighter backgrounds like #E3BF8D.

Accessibility notes

Ensure #AA6E4F text has sufficient contrast against #E3BF8D backgrounds for readability.
Avoid using #C6896E on #CC7D55 for small text elements due to potential low contrast ratios.
Reserve #E3BF8D for backgrounds or large decorative elements, as it may lack contrast for text on white.
Prioritize darker colors like #AA6E4F for critical information to enhance legibility.

Recommended combinations

Warm Earth

Ideal for a balanced, grounded feel, pairing a warm primary with a deeper accent and soft background.

#CC7D55 · #AA6E4F · #E3BF8D

Rustic Glow

Creates a sun-baked, natural aesthetic, suitable for evoking a sense of heritage or warmth.

#D1A176 · #C6896E · #AA6E4F

Soft Sands

A lighter, more ethereal combination, perfect for gentle branding or delicate visual storytelling.

#E3BF8D · #C6896E · #CC7D55

CSS variables

:root {
  --terra-cotta-dreams-1: #CC7D55;
  --terra-cotta-dreams-2: #C6896E;
  --terra-cotta-dreams-3: #D1A176;
  --terra-cotta-dreams-4: #AA6E4F;
  --terra-cotta-dreams-5: #E3BF8D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terra-cotta-dreams": {
        1: "#CC7D55",
        2: "#C6896E",
        3: "#D1A176",
        4: "#AA6E4F",
        5: "#E3BF8D",
      }
    }
  }
}

Hex values

Color 1#CC7D55

Color 2#C6896E

Color 3#D1A176

Color 4#AA6E4F

Color 5#E3BF8D

Accessibility

Contrast checker

1.1:1Fail

1.4:1Fail

1.3:1Fail

1.8:1Fail

1.1:1Fail

1.3:1Fail

1.4:1Fail

1.7:1Fail

1.4:1Fail

1.3:1Fail

1.8:1Fail

1.3:1Fail

1.4:1Fail

1.8:1Fail

2.4:1Fail

1.8:1Fail

1.7:1Fail

1.3:1Fail

2.4:1Fail

Similar palettes

More like Terra Cotta Dreams

Terra Cotta Dreams

See it in context.

Ready when you are.

Built with Terra Cotta Dreams.

How to use Terra Cotta Dreams

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Warm Earth

Rustic Glow

Soft Sands

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Terra Cotta Dreams