Back to palettes

Palette

Coastal Pottery Sand

Soft, sandy tones evoking artisan pottery crafted from seaside clay and sun-bleached driftwood.

neutralnatural5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Pottery Sand 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 Coastal Pottery Sand.

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

Data visualization

#E8D3C1#C7B4A0#A09689#7E7266#5B4F46

Palette guide

How to use Coastal Pottery Sand

Overview

The Coastal Pottery Sand palette offers a rich collection of warm sandy browns and muted earth tones, evoking artisan pottery crafted from seaside clay and sun-bleached driftwood. Featuring the light #E8D3C1, the versatile #C7B4A0 and #A09689, and grounded by the deep #7E7266 and #5B4F46. This palette is perfect for designs that prioritize natural elegance, warmth, and a textured aesthetic. Developers will find these colors excellent for crafting artisan brand identities, natural product packaging, and inviting digital experiences that feel both organic and sophisticated.

Best used for

  • Artisan food and beverage brands
  • Natural skincare and beauty products
  • Warm minimalist interior design
  • Educational content with a natural feel
  • Rustic web design and blogs
  • Content with earthy textures

Suggested color roles

primary

Utilize #C7B4A0 as a warm, inviting primary color for main sections, headers, or card backgrounds.

secondary

Employ #A09689 for secondary information, navigation, or to add a subtle, grounding mid-tone.

accent

Apply #5B4F46 sparingly for strong text, important icons, or as a deep footer/header color to provide clear contrast and depth.

background

The lightest shade, #E8D3C1, is ideal for expansive backgrounds, offering a soft, natural, and clean canvas.

text

For optimal readability on lighter backgrounds, use #5B4F46 or a dark brown like #40362C to ensure clear text presentation.

Accessibility notes

  • Ensure #5B4F46 text has excellent contrast against #E8D3C1 or #C7B4A0 backgrounds.
  • Avoid using #E8D3C1 or #C7B4A0 for small text on light backgrounds, as contrast may be too low for readability.
  • Always test all text and interactive elements with a WCAG contrast checker for compliance.
  • This palette's softer tones require careful contrast checks, especially for body text.

Recommended combinations

Sand Layers

Excellent for layered content blocks or a soft background with complementary light and mid-sandy tones.

#E8D3C1 · #C7B4A0 · #A09689

Deep Clay

Create a sense of depth and hierarchy in UI elements, moving from a mid-tone to a deeper, grounding shade.

#7E7266 · #5B4F46 · #A09689

Textured Contrast

Use a light background with a strong, grounding text color, balanced by a warm, natural primary shade.

#E8D3C1 · #5B4F46 · #C7B4A0

CSS variables

:root {
  --coastal-pottery-sand-1: #E8D3C1;
  --coastal-pottery-sand-2: #C7B4A0;
  --coastal-pottery-sand-3: #A09689;
  --coastal-pottery-sand-4: #7E7266;
  --coastal-pottery-sand-5: #5B4F46;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-pottery-sand": {
        1: "#E8D3C1",
        2: "#C7B4A0",
        3: "#A09689",
        4: "#7E7266",
        5: "#5B4F46",
      }
    }
  }
}

Related searches

pottery sand palettenatural earth toneswarm coastal brownrustic ceramic colorstextured neutral scheme

Palette colors

Hex values

Color 1#E8D3C1
·
Color 2#C7B4A0
·
Color 3#A09689
·
Color 4#7E7266
·
Color 5#5B4F46
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2:1Fail
3.2:1AA18
5.5:1AA
2
1.4:1Fail
1.4:1Fail
2.3:1Fail
3.9:1AA18
3
2:1Fail
1.4:1Fail
1.6:1Fail
2.7:1Fail
4
3.2:1AA18
2.3:1Fail
1.6:1Fail
1.7:1Fail
5
5.5:1AA
3.9:1AA18
2.7:1Fail
1.7:1Fail

Similar palettes

More like Coastal Pottery Sand

View all neutral