Back to palettes

Palette

Terracotta Roots

Grounded and organic, inspired by the varied shades of natural terracotta clay and ancient pottery.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#9C6C52#B9876C#D8A585#E5C3AB#7F5539

Palette guide

How to use Terracotta Roots

Overview

The Terracotta Roots palette is grounded and organic, inspired by the varied shades of natural terracotta clay and ancient pottery. This collection features a harmonious blend of warm browns and muted oranges, from the rich #9C6C52 to the lighter #E5C3AB. The deep #7F5539 provides a strong anchor, while #B9876C and #D8A585 offer gentle, earthy transitions. Designers and developers can leverage this palette to create designs that feel authentic, comforting, and deeply connected to nature and artisanal craftsmanship. It's ideal for projects seeking a subtle yet profound sense of warmth and natural elegance.

Best used for

  • Natural product packaging and branding
  • Sustainable and eco-friendly brand identities
  • Artisanal craft websites and e-commerce
  • Earthy web design for blogs or portfolios
  • Interior design for rustic or minimalist spaces
  • Wellness and holistic living platforms

Suggested color roles

primary

Utilize #9C6C52 as a foundational warm brown for main headers, key graphics, or calls-to-action, conveying authenticity and stability.

secondary

Employ #B9876C for subheadings, secondary buttons, or large content blocks, offering a soft, inviting continuity.

accent

Introduce #D8A585 for subtle highlights, interactive states, or decorative elements, adding a gentle, warm glow.

background

Apply #E5C3AB as a very light, warm background, creating a clean yet earthy canvas that allows darker elements to stand out.

text

Select #7F5539 for primary body text and labels, ensuring strong readability against lighter backgrounds. For headings, #9C6C52 offers a rich, grounded option.

Accessibility notes

  • Ensure sufficient contrast between #7F5539 text and very light backgrounds like #E5C3AB or #D8A585 for WCAG AA compliance.
  • Avoid using #B9876C or #D8A585 for small text or icons on light backgrounds; they are best used as larger background elements.
  • When using #9C6C52 as a background, ensure text or foreground elements are in a highly contrasting color, such as #E5C3AB or white.
  • Consider larger font sizes for text in #B9876C on #D8A585 if used for decorative elements, to improve legibility.

Recommended combinations

Organic Read

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

#E5C3AB · #9C6C52 · #7F5539

Natural Layers

Creates a soft, harmonious gradient effect, suitable for layered designs or subtle visual interest.

#B9876C · #D8A585 · #9C6C52

Grounded Depth

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

#7F5539 · #B9876C · #E5C3AB

CSS variables

:root {
  --terracotta-roots-1: #9C6C52;
  --terracotta-roots-2: #B9876C;
  --terracotta-roots-3: #D8A585;
  --terracotta-roots-4: #E5C3AB;
  --terracotta-roots-5: #7F5539;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terracotta-roots": {
        1: "#9C6C52",
        2: "#B9876C",
        3: "#D8A585",
        4: "#E5C3AB",
        5: "#7F5539",
      }
    }
  }
}

Related searches

natural clay color paletteorganic color scheme designrustic brown and beigewarm earthy web designterracotta roots aesthetic

Palette colors

Hex values

Color 1#9C6C52
·
Color 2#B9876C
·
Color 3#D8A585
·
Color 4#E5C3AB
·
Color 5#7F5539
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
2.7:1Fail
1.4:1Fail
2
1.4:1Fail
1.4:1Fail
1.9:1Fail
2.1:1Fail
3
2.1:1Fail
1.4:1Fail
1.3:1Fail
3:1Fail
4
2.7:1Fail
1.9:1Fail
1.3:1Fail
3.9:1AA18
5
1.4:1Fail
2.1:1Fail
3:1Fail
3.9:1AA18

Similar palettes

More like Terracotta Roots

View all earth
Adobe Sunset
Ancient Clay Vessel
Artisan Pottery Wheel
Cinnamon Bark
Earthy Clay Pots
Farmhouse Charm