Palette

Clay Pottery Warmth

Inviting shades of warm terracotta and light sandy tones, a comforting earthen glow.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Clay Pottery 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 Clay Pottery Warmth.

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

Data visualization

#6F4E37#9D6B4E#C88B67#E0A786#F8D5BD

Palette guide

How to use Clay Pottery Warmth

Overview

The Clay Pottery Warmth palette offers an inviting spectrum of warm terracotta and light sandy tones, creating a comforting earthen glow. From the deep, grounding #6F4E37 to the soft, luminous #F8D5BD, this collection provides a harmonious gradient that evokes natural beauty and artisanal quality. Designers can utilize these hex codes to build interfaces that feel authentic, cozy, and inherently welcoming. Developers will find this palette excellent for establishing visual depth and clear hierarchy, allowing for seamless integration across various design elements, ensuring a consistent and warm user experience across web and mobile platforms.

Best used for

Sustainable fashion brands
Cozy interior design portfolios
Artisan food and beverage websites
Natural wellness product packaging
Blog themes with a rustic aesthetic
E-commerce sites for handmade goods

Suggested color roles

primary

#6F4E37 serves as a robust, grounding primary, ideal for foundational elements, strong headings, or navigation.

secondary

#9D6B4E provides a warm, balanced secondary, excellent for content blocks, featurettes, or interactive components.

accent

#C88B67 offers a brighter, inviting accent, perfect for call-to-actions, icons, or subtle highlights.

background

#F8D5BD creates a soft, luminous off-white background, providing excellent readability for darker text and maintaining warmth.

text

For dark text on light backgrounds, #6F4E37 or a deep charcoal works well. For light text on dark backgrounds, #F8D5BD is highly recommended.

Accessibility notes

Ensure #6F4E37 text on #F8D5BD background meets WCAG AA standards for body text.
Avoid using #E0A786 text on #F8D5BD backgrounds due to very low contrast, making it difficult to read.
When using #C88B67 for interactive elements, verify its contrast against surrounding colors, especially lighter ones.
The progression of similar warm tones means careful contrast checking is vital for distinguishing text and interactive elements.

Recommended combinations

Earthen Base

Ideal for a website's core structure, with #6F4E37 for navigation, #9D6B4E for content, and #F8D5BD for backgrounds and text.

#6F4E37 · #9D6B4E · #F8D5BD

Warm Layers

Perfect for creating depth in UI cards or layered sections, offering a smooth, inviting transition.

#9D6B4E · #C88B67 · #E0A786

Soft Contrast

Use #F8D5BD as a clean canvas, with #6F4E37 for prominent text and #C88B67 for subtle accents or links.

#F8D5BD · #6F4E37 · #C88B67

CSS variables

:root {
  --clay-pottery-warmth-1: #6F4E37;
  --clay-pottery-warmth-2: #9D6B4E;
  --clay-pottery-warmth-3: #C88B67;
  --clay-pottery-warmth-4: #E0A786;
  --clay-pottery-warmth-5: #F8D5BD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "clay-pottery-warmth": {
        1: "#6F4E37",
        2: "#9D6B4E",
        3: "#C88B67",
        4: "#E0A786",
        5: "#F8D5BD",
      }
    }
  }
}

Hex values

Color 1#6F4E37

Color 2#9D6B4E

Color 3#C88B67

Color 4#E0A786

Color 5#F8D5BD

Accessibility

Contrast checker

1.6:1Fail

2.6:1Fail

3.6:1AA18

5.4:1AA

1.6:1Fail

2.2:1Fail

3.3:1AA18

2.6:1Fail

1.6:1Fail

1.4:1Fail

2.1:1Fail

3.6:1AA18

2.2:1Fail

1.4:1Fail

1.5:1Fail

5.4:1AA

3.3:1AA18

2.1:1Fail

1.5:1Fail

Similar palettes

More like Clay Pottery Warmth

Clay Pottery Warmth

See it in context.

Ready when you are.

Built with Clay Pottery Warmth.

How to use Clay Pottery Warmth

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Earthen Base

Warm Layers

Soft Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Clay Pottery Warmth