Palette

Terracotta Pot Warmth

Earthy, rustic tones reflecting the handcrafted beauty and warmth of an ancient clay pot.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B26A44#D48E6B#E8B99E#8C5331#6A3F23

Palette guide

How to use Terracotta Pot Warmth

Overview

The Terracotta Pot Warmth palette embodies the earthy, rustic elegance of an ancient clay pot, offering a rich spectrum of natural browns and warm oranges. Key colors include the inviting #B26A44 and the softer #D48E6B, reflecting handcrafted beauty and a grounded aesthetic. This palette is ideal for designers and developers seeking to evoke a sense of heritage, authenticity, and natural comfort. With lighter tones like #E8B99E providing gentle backgrounds and deeper hues like #8C5331 and #6A3F23 anchoring the composition, it's versatile for creating experiences that feel both timeless and welcoming.

Best used for

Artisan craft and pottery websites
Heritage brand identity and storytelling
Natural beauty or organic product packaging
Interior design for rustic or traditional spaces
Educational content on ancient history or archaeology
E-commerce platforms for handcrafted goods

Suggested color roles

primary

Use #B26A44 as a robust, welcoming primary color for headers, main calls-to-action, or key graphical elements.

secondary

Apply #D48E6B for subheadings, secondary buttons, or large content blocks to maintain a soft, earthy continuity.

accent

Introduce #E8B99E for subtle highlights, interactive states, or decorative flourishes, offering a gentle, almost glowing touch.

background

Employ #E8B99E as a soft, warm background to create an inviting canvas that allows darker elements to stand out.

text

Select #6A3F23 for primary body text and labels, ensuring optimal readability against lighter palette colors. For headings, #8C5331 offers a strong, grounded option.

Accessibility notes

Ensure sufficient contrast between #6A3F23 text and the light background #E8B99E for WCAG AA compliance.
Avoid using #D48E6B for small text or icons on a #E8B99E background, as contrast may be insufficient; opt for #8C5331.
When using #B26A44 as a background, ensure foreground elements or text have a strong, contrasting color like near-white.
Consider larger font sizes for text in #8C5331 on #D48E6B to improve readability, especially for decorative elements.

Recommended combinations

Soft Contrast

Ideal for clean, readable content areas with a light background, a warm heading, and a deep text color.

#E8B99E · #B26A44 · #6A3F23

Rustic Layers

Creates a rich, multi-dimensional feel suitable for feature sections or visual storytelling.

#D48E6B · #8C5331 · #B26A44

Grounded Warmth

Provides a strong base with a warm mid-tone and a soft highlight, excellent for footers or impactful branding.

#6A3F23 · #D48E6B · #E8B99E

CSS variables

:root {
  --terracotta-pot-warmth-1: #B26A44;
  --terracotta-pot-warmth-2: #D48E6B;
  --terracotta-pot-warmth-3: #E8B99E;
  --terracotta-pot-warmth-4: #8C5331;
  --terracotta-pot-warmth-5: #6A3F23;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terracotta-pot-warmth": {
        1: "#B26A44",
        2: "#D48E6B",
        3: "#E8B99E",
        4: "#8C5331",
        5: "#6A3F23",
      }
    }
  }
}

Hex values

Color 1#B26A44

Color 2#D48E6B

Color 3#E8B99E

Color 4#8C5331

Color 5#6A3F23

Accessibility

Contrast checker

1.6:1Fail

2.4:1Fail

1.5:1Fail

2.1:1Fail

1.6:1Fail

1.5:1Fail

2.3:1Fail

3.4:1AA18

2.4:1Fail

1.5:1Fail

3.5:1AA18

5.1:1AA

1.5:1Fail

2.3:1Fail

3.5:1AA18

1.4:1Fail

2.1:1Fail

3.4:1AA18

5.1:1AA

1.4:1Fail

Similar palettes

More like Terracotta Pot Warmth

Terracotta Pot Warmth

See it in context.

Ready when you are.

Built with Terracotta Pot Warmth.

How to use Terracotta Pot Warmth

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Soft Contrast

Rustic Layers

Grounded Warmth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Terracotta Pot Warmth