Back to palettes

Palette

Terracotta Vessel Tone

Gentle browns and soft pinkish tones, like the natural hues of an unfired clay pot.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8D695D#A38072#BB9A8F#D6BDB6#EBE2DE

Palette guide

How to use Terracotta Vessel Tone

Overview

The Terracotta Vessel Tone palette offers a sophisticated range of gentle browns and soft pinkish tones, mirroring the natural, unfired hues of clay pottery. With the grounding presence of #8D695D and the delicate #A38072, it builds a subtle harmony. Lighter shades like #BB9A8F and #D6BDB6 provide soft transitions, culminating in the airy #EBE2DE. This palette is perfect for designers and developers looking to create minimalist, organic, and serene experiences, emphasizing understated elegance and natural textures.

Best used for

  • Minimalist branding and identity
  • Spa and wellness websites or print materials
  • Ceramics and pottery studio showcases
  • Natural skincare and beauty packaging
  • Sophisticated, earthy interior design
  • Wedding stationery with subtle elegance

Suggested color roles

primary

Utilize #8D695D as a grounding, sophisticated brand color for headings or key elements, conveying stability.

secondary

Employ #A38072 for supporting elements, subheadings, or subtle accents to maintain a harmonious flow.

accent

Apply #BB9A8F for delicate highlights, soft UI details, or as a background for secondary information sections.

background

Use #EBE2DE as a clean, airy base for main content areas, providing a breathable and elegant canvas.

text

Choose #8D695D for main body text and primary headings, ensuring clear readability against lighter backgrounds, or a deep charcoal for added contrast.

Accessibility notes

  • Ensure #8D695D provides sufficient contrast on #EBE2DE for body text to meet WCAG readability standards.
  • Lighter shades like #D6BDB6 and #EBE2DE should primarily be used for backgrounds or large graphical elements, not small text.
  • Avoid using #BB9A8F for essential text due to its low contrast, reserving it for decorative purposes.
  • Test readability across various screen sizes and lighting conditions to ensure consistent user experience.

Recommended combinations

Soft Neutral

Create subtle, layered backgrounds or soft UI elements that provide depth without overwhelming the design.

#EBE2DE · #D6BDB6 · #BB9A8F

Earthy Depth

Form a strong text-on-background combination, with the darker shades providing excellent readability on the light base.

#8D695D · #A38072 · #EBE2DE

Clay Harmony

Design harmonious UI components, secondary sections, or subtle graphical elements that blend seamlessly.

#A38072 · #BB9A8F · #D6BDB6

CSS variables

:root {
  --terracotta-vessel-tone-1: #8D695D;
  --terracotta-vessel-tone-2: #A38072;
  --terracotta-vessel-tone-3: #BB9A8F;
  --terracotta-vessel-tone-4: #D6BDB6;
  --terracotta-vessel-tone-5: #EBE2DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terracotta-vessel-tone": {
        1: "#8D695D",
        2: "#A38072",
        3: "#BB9A8F",
        4: "#D6BDB6",
        5: "#EBE2DE",
      }
    }
  }
}

Related searches

clay inspired color paletteneutral brown shadessubtle earthy tonesorganic design colorsminimalist terracotta

Palette colors

Hex values

Color 1#8D695D
·
Color 2#A38072
·
Color 3#BB9A8F
·
Color 4#D6BDB6
·
Color 5#EBE2DE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.9:1Fail
2.7:1Fail
3.8:1AA18
2
1.4:1Fail
1.4:1Fail
2:1Fail
2.8:1Fail
3
1.9:1Fail
1.4:1Fail
1.5:1Fail
2:1Fail
4
2.7:1Fail
2:1Fail
1.5:1Fail
1.4:1Fail
5
3.8:1AA18
2.8:1Fail
2:1Fail
1.4:1Fail

Similar palettes

More like Terracotta Vessel Tone

View all earth