Palette

Clay Pot Harmony

Warm, baked earth tones reminiscent of sun-warmed clay pots in a rustic garden setting.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Clay Pot Harmony 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 Pot Harmony.

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

Data visualization

#CB7D4C#E49363#F6AE81#FFC79A#A6693F

Palette guide

How to use Clay Pot Harmony

Overview

The Clay Pot Harmony palette radiates warmth and gentle energy, capturing the essence of sun-baked earth and rustic pottery. Its spectrum of beautiful terracotta oranges, from the deeper #A6693F to the softest #FFC79A, creates a consistently inviting and harmonious feel. This palette is perfect for designers aiming to convey comfort, organic beauty, and a touch of artisanal charm. Developers will find these hex codes blend seamlessly, allowing for fluid transitions and a cohesive visual experience across web and mobile interfaces. The progression from rich to light offers ample opportunity for depth and emphasis without harsh contrasts.

Best used for

Wellness or spa branding
Cozy cafe or bakery websites
Handicraft and artisan marketplaces
Bohemian-style fashion e-commerce
Autumnal event promotions
Natural product packaging designs

Suggested color roles

primary

#A6693F serves as a warm, grounding primary, ideal for main headings, navigation, or strong brand elements.

secondary

#CB7D4C provides a vibrant, inviting secondary, excellent for content blocks, call-to-action buttons, or feature areas.

accent

#E49363 offers a brighter, accessible accent, perfect for highlighting key information or interactive components.

background

#FFC79A creates a soft, luminous background that allows other colors to pop while maintaining warmth.

text

For dark text on light backgrounds, #A6693F or a deep brown works well. For light text on darker backgrounds, #FFC79A provides excellent readability.

Accessibility notes

Be cautious when using #F6AE81 text on #FFC79A backgrounds; contrast may be insufficient for readability.
Ensure #CB7D4C text on #FFC79A background meets WCAG AA standards for body text.
Utilize #A6693F for text on lighter backgrounds like #FFC79A to ensure strong contrast and legibility.
The overall warmth of the palette means that certain color blindness types might perceive less distinction between adjacent shades; rely on size and placement for emphasis.

Recommended combinations

Warm Foundation

Ideal for a website's main layout, using #A6693F for structure, #CB7D4C for content, and #FFC79A for backgrounds and legible text.

#A6693F · #CB7D4C · #FFC79A

Gentle Gradient

Perfect for creating subtle visual hierarchies or layered card designs, offering a smooth, warm transition.

#CB7D4C · #E49363 · #F6AE81

Highlight & Base

Use #FFC79A as a light base, with #A6693F for prominent text and #E49363 for interactive elements or highlights.

#FFC79A · #A6693F · #E49363

CSS variables

:root {
  --clay-pot-harmony-1: #CB7D4C;
  --clay-pot-harmony-2: #E49363;
  --clay-pot-harmony-3: #F6AE81;
  --clay-pot-harmony-4: #FFC79A;
  --clay-pot-harmony-5: #A6693F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "clay-pot-harmony": {
        1: "#CB7D4C",
        2: "#E49363",
        3: "#F6AE81",
        4: "#FFC79A",
        5: "#A6693F",
      }
    }
  }
}

Hex values

Color 1#CB7D4C

Color 2#E49363

Color 3#F6AE81

Color 4#FFC79A

Color 5#A6693F

Accessibility

Contrast checker

1.3:1Fail

1.7:1Fail

2.1:1Fail

1.4:1Fail

1.3:1Fail

1.6:1Fail

1.8:1Fail

1.7:1Fail

1.3:1Fail

1.2:1Fail

2.4:1Fail

2.1:1Fail

1.6:1Fail

1.2:1Fail

2.9:1Fail

1.4:1Fail

1.8:1Fail

2.4:1Fail

2.9:1Fail

Similar palettes

More like Clay Pot Harmony

Clay Pot Harmony

See it in context.

Ready when you are.

Built with Clay Pot Harmony.

How to use Clay Pot Harmony

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Warm Foundation

Gentle Gradient

Highlight & Base

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Clay Pot Harmony