Back to palettes

Palette

Coastal Clay Pebble

Soft, earthy neutrals inspired by the smooth, worn stones found on a tranquil clay coast.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Clay Pebble 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 Clay Pebble.

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

Data visualization

#C2BCB3#A8A399#8E8A80#757066#5C574D

Palette guide

How to use Coastal Clay Pebble

Overview

The Coastal Clay Pebble palette features soft, earthy neutrals inspired by the smooth, worn stones found on a tranquil clay coast. This monochrome-like collection ranges from the light, muted #C2BCB3 to the deep, grounding #5C574D, evoking calm, nature, and understated elegance. Designers can leverage these hex codes for minimalist branding, sophisticated digital interfaces, or print materials requiring an authentic, timeless aesthetic. Developers will find these harmonious tones excellent for building clean and unobtrusive user experiences, with #A8A399 providing a versatile mid-tone and #757066 offering a deeper, natural grey-brown accent.

Best used for

  • minimalist interior design
  • artisanal craft websites
  • eco-friendly product packaging
  • architectural portfolios
  • natural history museums
  • zen and mindfulness apps

Suggested color roles

primary

#8E8A80 - A balanced, earthy grey-brown, excellent for main headings, primary navigation, or prominent natural brand elements.

secondary

#A8A399 - A lighter, supportive stone grey, perfect for subheadings, background panels, or supportive graphics.

accent

#5C574D - The deepest, darkest grey-brown, ideal for strong accents, important links, or focal points that require high contrast and depth.

background

#C2BCB3 - The lightest, muted beige-grey, providing a clean, calm, and expansive canvas.

text

#757066 - This deep grey-brown offers excellent readability for body text against the lighter backgrounds like #C2BCB3 or #A8A399.

Accessibility notes

  • Text in #757066 or #5C574D on backgrounds like #C2BCB3 or #A8A399 should meet WCAG AA contrast standards.
  • Avoid using lighter shades like #A8A399 for small text on the lightest background #C2BCB3 due to potential low contrast.
  • Ensure interactive elements have clear visual feedback beyond just color, especially for mid-tone greys.
  • Always verify contrast ratios for all text and interactive elements, particularly for critical information.

Recommended combinations

Stone Layers

For creating subtle background textures or layered card designs, evoking natural stone.

#C2BCB3 · #A8A399 · #8E8A80

Pebble Depth

Ideal for professional layouts, using the deeper grey-browns for headlines and lighter tones for content.

#757066 · #5C574D · #C2BCB3

Natural Harmony

For content blocks or subtle dividers, maintaining a rich and harmonious visual flow with natural depth.

#A8A399 · #8E8A80 · #757066

CSS variables

:root {
  --coastal-clay-pebble-1: #C2BCB3;
  --coastal-clay-pebble-2: #A8A399;
  --coastal-clay-pebble-3: #8E8A80;
  --coastal-clay-pebble-4: #757066;
  --coastal-clay-pebble-5: #5C574D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-clay-pebble": {
        1: "#C2BCB3",
        2: "#A8A399",
        3: "#8E8A80",
        4: "#757066",
        5: "#5C574D",
      }
    }
  }
}

Related searches

coastal pebble paletteearthy neutral colorsstone grey UInatural beige brandingcalm minimalist scheme

Palette colors

Hex values

Color 1#C2BCB3
·
Color 2#A8A399
·
Color 3#8E8A80
·
Color 4#757066
·
Color 5#5C574D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
2.6:1Fail
3.8:1AA18
2
1.3:1Fail
1.4:1Fail
2:1Fail
2.9:1Fail
3
1.8:1Fail
1.4:1Fail
1.4:1Fail
2.1:1Fail
4
2.6:1Fail
2:1Fail
1.4:1Fail
1.5:1Fail
5
3.8:1AA18
2.9:1Fail
2.1:1Fail
1.5:1Fail

Similar palettes

More like Coastal Clay Pebble

View all neutral
Coastal Shell Treasure
Coastal Driftwood Grey
Coastal Dune Breeze
Coastal Dune Grass
Coastal Pebble Beach
Coastal Shell Treasure