Back to palettes

Palette

Seaside Pebble Drift

Soft, muted greys and blues evoking the gentle erosion of pebbles on a serene, untouched seashore.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seaside Pebble Drift 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 Seaside Pebble Drift.

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

Data visualization

#98A0A8#B0B8C0#CED8E0#E8ECF0#7C848C

Palette guide

How to use Seaside Pebble Drift

Overview

The Seaside Pebble Drift palette is a refined, neutral color collection inspired by the subtle variations of weathered stones on a serene beach. Featuring soft greys and muted tones like #98A0A8 (Cadet Grey), #B0B8C0 (Light Slate Grey), and the very light #E8ECF0 (Whisper White), it offers a sophisticated foundation for understated designs. The slightly deeper #7C848C (Dark Grey-Blue) provides excellent contrast and depth. This palette is ideal for designers and developers aiming for a calm, elegant, and timeless aesthetic, suitable for professional branding, minimalist user interfaces, or sophisticated editorial layouts. It evokes a sense of natural tranquility and quiet strength, perfect for projects requiring subtle sophistication and a grounding presence.

Best used for

  • Minimalist web design
  • Professional corporate branding
  • Elegant editorial layouts
  • Architectural or interior design presentations
  • High-end product packaging
  • Sophisticated app interfaces

Suggested color roles

primary

#98A0A8 for foundational elements and large sections, providing a stable, calm base.

secondary

#B0B8C0 for supporting backgrounds, card elements, or subtle navigation components.

accent

#7C848C to add depth and provide contrast for important text or interactive elements, ensuring clarity.

background

#E8ECF0 as a clean, airy canvas that allows other elements to breathe and stand out subtly.

text

A dark charcoal or near-black for body text, ensuring optimal readability against the light background tones.

Accessibility notes

  • Ensure sufficient contrast for all text, especially smaller fonts, against lighter background shades like #E8ECF0.
  • Use #7C848C for critical interactive elements to provide a clear visual target and contrast.
  • Avoid relying solely on subtle shade differences between #98A0A8 and #B0B8C0 for conveying information.
  • Check contrast ratios for any overlaid text or icons to meet WCAG guidelines, particularly for AA or AAA.

Recommended combinations

Stone & Sky

Perfect for creating a clean, layered look in web backgrounds or subtle UI elements.

#E8ECF0 · #B0B8C0 · #98A0A8

Depth & Detail

Ideal for text-heavy sections where #E8ECF0 is background, #7C848C for headings, and #B0B8C0 for separators.

#E8ECF0 · #7C848C · #B0B8C0

Pebble Layers

Excellent for infographic elements or data visualization, showing subtle variations and hierarchy.

#7C848C · #98A0A8 · #CED8E0

CSS variables

:root {
  --seaside-pebble-drift-1: #98A0A8;
  --seaside-pebble-drift-2: #B0B8C0;
  --seaside-pebble-drift-3: #CED8E0;
  --seaside-pebble-drift-4: #E8ECF0;
  --seaside-pebble-drift-5: #7C848C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seaside-pebble-drift": {
        1: "#98A0A8",
        2: "#B0B8C0",
        3: "#CED8E0",
        4: "#E8ECF0",
        5: "#7C848C",
      }
    }
  }
}

Related searches

neutral grey palettecalm stone colorspebble inspired designminimalist grey schemecoastal neutral tones

Palette colors

Hex values

Color 1#98A0A8
·
Color 2#B0B8C0
·
Color 3#CED8E0
·
Color 4#E8ECF0
·
Color 5#7C848C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
2.2:1Fail
1.4:1Fail
2
1.3:1Fail
1.4:1Fail
1.7:1Fail
1.9:1Fail
3
1.8:1Fail
1.4:1Fail
1.2:1Fail
2.6:1Fail
4
2.2:1Fail
1.7:1Fail
1.2:1Fail
3.2:1AA18
5
1.4:1Fail
1.9:1Fail
2.6:1Fail
3.2:1AA18

Similar palettes

More like Seaside Pebble Drift

View all neutral
Coastal Driftwood Hues
Seashell Pearl Glow
Coastal Driftwood Grey
Coastal Dune Haze
Coastal Pebble Beach
Coastal Stone Pebble