Palette

Terracotta Crafters Clay

A grounding blend of warm browns and rustic clays, celebrating handcrafted pottery.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#CD853F#BC8F8F#D2B48C#DEB887

Palette guide

How to use Terracotta Crafters Clay

Overview

The Terracotta Crafters Clay palette offers a grounding collection of warm browns and rustic clay tones, perfect for projects emphasizing natural, handmade aesthetics. Developers and designers can utilize the deep `#8B4513` for strong foundations, complemented by the rich `#CD853F` and softer `#D2B48C` for depth. The gentle `#BC8F8F` provides a subtle hint of rose, while `#DEB887` adds a light, sun-baked warmth. This palette is ideal for branding, web design, or physical spaces that aim to evoke the authentic charm of handcrafted pottery and earthy textures.

Best used for

Artisan craft websites
Pottery studio branding
Rustic home decor blogs
Natural product packaging
E-commerce for handmade goods
Sustainable fashion branding

Suggested color roles

primary

#8B4513 - A deep, rich saddle brown, excellent for strong headings, primary buttons, or foundational design elements, conveying solidity.

secondary

#CD853F - A vibrant medium brown, perfect for subheadings, prominent accents, or backgrounds that need to feel warm and inviting.

accent

#BC8F8F - A soft, rosy beige, ideal for subtle highlights, decorative patterns, or UI elements requiring a gentle, elegant touch.

background

#D2B48C - A light, sandy beige, suitable for main content backgrounds, offering a clean, warm canvas without being overwhelming.

text

#8B4513 - This deep brown provides excellent readability for body text against lighter backgrounds. Consider a near-white for text on `#8B4513`.

Accessibility notes

Ensure `#8B4513` text on `#D2B48C` or `#DEB887` backgrounds meets contrast standards.
Avoid using `#D2B48C` or `#DEB887` for small text on light backgrounds due to low contrast.
Pair `#CD853F` with lighter text colors for better readability, especially in smaller sizes.
Use sufficient padding around text colored with `#BC8F8F` on similar light tones to improve legibility.

Recommended combinations

Earthen Foundation

For robust headers and content, providing a strong, natural anchor with supporting warmth.

#8B4513 · #CD853F · #D2B48C

Clay & Rose

Ideal for softer sections, blending warm clay with a delicate rosy accent and a light background.

#CD853F · #BC8F8F · #DEB887

Rustic Depth

Creates a sophisticated, rustic feel, using a deep brown with subtle rosy and light sandy accents.

#8B4513 · #BC8F8F · #DEB887

CSS variables

:root {
  --terracotta-crafters-clay-1: #8B4513;
  --terracotta-crafters-clay-2: #CD853F;
  --terracotta-crafters-clay-3: #BC8F8F;
  --terracotta-crafters-clay-4: #D2B48C;
  --terracotta-crafters-clay-5: #DEB887;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terracotta-crafters-clay": {
        1: "#8B4513",
        2: "#CD853F",
        3: "#BC8F8F",
        4: "#D2B48C",
        5: "#DEB887",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#CD853F

Color 3#BC8F8F

Color 4#D2B48C

Color 5#DEB887

Accessibility

Contrast checker

2.4:1Fail

2.5:1Fail

3.6:1AA18

3.8:1AA18

2.4:1Fail

1.1:1Fail

1.5:1Fail

1.6:1Fail

2.5:1Fail

1.1:1Fail

1.4:1Fail

1.5:1Fail

3.6:1AA18

1.5:1Fail

1.4:1Fail

1.1:1Fail

3.8:1AA18

1.6:1Fail

1.5:1Fail

1.1:1Fail

Similar palettes

More like Terracotta Crafters Clay

Terracotta Crafters Clay

See it in context.

Ready when you are.

Built with Terracotta Crafters Clay.

How to use Terracotta Crafters Clay

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Earthen Foundation

Clay & Rose

Rustic Depth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Terracotta Crafters Clay