Back to palettes

Palette

Soft Clay Hearth

Gentle and grounding tones inspired by natural unglazed clay, ready for shaping.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Soft Clay Hearth 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 Soft Clay Hearth.

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

Data visualization

#D48C62#E8B99E#F2DCDA#A76A58#C9A08D

Palette guide

How to use Soft Clay Hearth

Overview

The "Soft Clay Hearth" palette delivers a heartwarming collection of gentle, earthy tones, inspired by unglazed pottery and the cozy warmth of a hearth. Featuring inviting hues like the rich #D48C62, soft #E8B99E, delicate #F2DCDA, deep #A76A58, and warm #C9A08D, this palette is perfect for designs that evoke comfort, rustic charm, and natural authenticity. Designers and developers can leverage these warm, grounding colors to create welcoming digital experiences, artisanal branding, or print materials that resonate with coziness, tradition, and a handcrafted feel. It’s an excellent choice for projects aiming for a gentle, yet robust, earthy connection.

Best used for

  • Rustic home decor and furniture branding
  • Artisan food products and bakeries
  • Cozy cafe or restaurant interior design
  • Crafts and DIY project websites
  • Traditional pottery and ceramic studios
  • Autumnal seasonal marketing campaigns

Suggested color roles

primary

Utilize #F2DCDA as a soft, warm background, reminiscent of sun-dried clay or a cozy wall.

secondary

Employ #E8B99E for secondary content blocks, adding a subtle, inviting warmth.

accent

Use #D48C62 or #A76A58 for strong accents, such as calls-to-action or important headers, adding depth and focus.

background

The lightest shade, #F2DCDA, provides a gentle, inviting backdrop that feels natural and serene.

text

For optimal readability, use a deep brown or black text. #A76A58 is suitable for headlines on lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast for text; darker shades like #A76A58 work well for text on light backgrounds like #F2DCDA.
  • Avoid using lighter shades like #E8B99E for small body text, as contrast may be insufficient.
  • Always test color combinations with WCAG contrast tools to meet accessibility standards (AA or AAA).
  • Consider a slightly darker brown (e.g., #5C3A2D) for body text to ensure maximum readability across different screen types.

Recommended combinations

Warm Glow

Creates a soft, inviting gradient for backgrounds or subtle UI elements, evoking gentle warmth.

#F2DCDA · #E8B99E · #C9A08D

Rustic Depth

Provides a clear contrast, with darker earth tones defining structure against a light, cozy base.

#F2DCDA · #D48C62 · #A76A58

Earthen Blend

Excellent for illustrations, textures, or branding that emphasizes the natural, handcrafted feel of pottery.

#E8B99E · #C9A08D · #D48C62

CSS variables

:root {
  --soft-clay-hearth-1: #D48C62;
  --soft-clay-hearth-2: #E8B99E;
  --soft-clay-hearth-3: #F2DCDA;
  --soft-clay-hearth-4: #A76A58;
  --soft-clay-hearth-5: #C9A08D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "soft-clay-hearth": {
        1: "#D48C62",
        2: "#E8B99E",
        3: "#F2DCDA",
        4: "#A76A58",
        5: "#C9A08D",
      }
    }
  }
}

Related searches

soft clay color schemerustic earthy palettewarm pottery colorscozy natural designterracotta inspired palette

Palette colors

Hex values

Color 1#D48C62
·
Color 2#E8B99E
·
Color 3#F2DCDA
·
Color 4#A76A58
·
Color 5#C9A08D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.1:1Fail
1.6:1Fail
1.2:1Fail
2
1.5:1Fail
1.4:1Fail
2.4:1Fail
1.3:1Fail
3
2.1:1Fail
1.4:1Fail
3.3:1AA18
1.8:1Fail
4
1.6:1Fail
2.4:1Fail
3.3:1AA18
1.8:1Fail
5
1.2:1Fail
1.3:1Fail
1.8:1Fail
1.8:1Fail

Similar palettes

More like Soft Clay Hearth

View all earth