Back to palettes

Palette

Pebble Shore Calm

Reflects the subtle, smooth tones of pebbles scattered along a tranquil, peaceful shore.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pebble Shore Calm 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 Pebble Shore Calm.

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

Data visualization

#8A8784#B2AEA7#D5D2CC#6F716F#A39F98

Palette guide

How to use Pebble Shore Calm

Overview

The Pebble Shore Calm palette offers a serene collection of muted, natural grays, perfect for creating tranquil and sophisticated digital experiences. This palette, featuring foundational tones like `#8A8784` and lighter shades such as `#D5D2CC`, evokes the subtle, smooth appearance of pebbles on a peaceful beach. Designers and developers can leverage these versatile neutrals to build clean, minimalist interfaces, ensuring readability and a calming user experience. The deeper `#6F716F` provides necessary contrast, while `#A39F98` acts as a gentle mid-tone, making it ideal for projects requiring understated elegance and a strong sense of calm.

Best used for

  • Minimalist website designs
  • Tranquil mobile app interfaces
  • Nature-inspired branding
  • Elegant editorial layouts
  • Corporate reports and presentations
  • Subtle background textures

Suggested color roles

primary

Use `#8A8784` for primary containers or main content blocks to establish a grounded, calm presence.

secondary

Employ `#A39F98` for secondary information, dividers, or subtle interactive elements, offering a harmonious contrast.

accent

Apply `#6F716F` sparingly for icons, active states, or small calls-to-action to provide a gentle, yet clear, accent.

background

Utilize `#D5D2CC` as a light, clean background base that allows other elements to stand out subtly.

text

For optimal readability, use a dark charcoal or black text on lighter backgrounds like `#D5D2CC` or `#B2AEA7`.

Accessibility notes

  • Ensure sufficient contrast when pairing `#6F716F` or `#8A8784` with lighter text like `#D5D2CC`.
  • Text set in black or dark gray on `#D5D2CC` or `#B2AEA7` will generally provide excellent readability.
  • Avoid using `#B2AEA7` and `#A39F98` for text and background pairings, as their contrast might be insufficient.
  • Consider larger font sizes or bolding for text on mid-tone backgrounds like `#8A8784` if contrast is borderline.

Recommended combinations

Neutral Base

Ideal for creating a soft, layered background with subtle depth in UI elements.

#D5D2CC · #B2AEA7 · #A39F98

Gentle Contrast

Effective for main content areas, where the darker tones define sections against a light background.

#6F716F · #8A8784 · #D5D2CC

Deep & Light

Use for headers or footers, providing a solid anchor with a lighter supporting shade.

#8A8784 · #6F716F · #B2AEA7

CSS variables

:root {
  --pebble-shore-calm-1: #8A8784;
  --pebble-shore-calm-2: #B2AEA7;
  --pebble-shore-calm-3: #D5D2CC;
  --pebble-shore-calm-4: #6F716F;
  --pebble-shore-calm-5: #A39F98;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pebble-shore-calm": {
        1: "#8A8784",
        2: "#B2AEA7",
        3: "#D5D2CC",
        4: "#6F716F",
        5: "#A39F98",
      }
    }
  }
}

Related searches

calm grey palettenatural neutral colorspebble tones designsubtle ui paletteearthy website colors

Palette colors

Hex values

Color 1#8A8784
·
Color 2#B2AEA7
·
Color 3#D5D2CC
·
Color 4#6F716F
·
Color 5#A39F98
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.4:1Fail
1.4:1Fail
1.4:1Fail
2
1.6:1Fail
1.5:1Fail
2.2:1Fail
1.2:1Fail
3
2.4:1Fail
1.5:1Fail
3.3:1AA18
1.7:1Fail
4
1.4:1Fail
2.2:1Fail
3.3:1AA18
1.9:1Fail
5
1.4:1Fail
1.2:1Fail
1.7:1Fail
1.9:1Fail

Similar palettes

More like Pebble Shore Calm

View all neutral
Coastal Pebble Beach
Ancient Grove Hush
Cloud Forest Mist
Cloudy Day Serene
Coastal Driftwood Grey
Coastal Driftwood Grey