Palette

Pebble Shore Drift

Subtle, soothing grays and whites evoke the tranquil, muted tones of pebbles on a calm shore.

NeutralCalm5 colors

More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#708090#A9A9A9#D3D3D3#E8E8E8#F5F5F5

Palette guide

How to use Pebble Shore Drift

Overview

The Pebble Shore Drift palette captures the soothing essence of a tranquil beach with its range of soft grays and near-whites. Featuring cool tones like `#708090` (Slate Gray) and the subtle lightness of `#F5F5F5` (WhiteSmoke), this palette is perfect for designers and developers aiming for a clean, minimalist aesthetic. The mid-tones such as `#A9A9A9` (DarkGray) and `#D3D3D3` (LightGray) offer versatility for various UI elements, ensuring a harmonious and understated visual experience. This collection is excellent for creating interfaces that feel spacious, modern, and serenely composed, much like the smooth, weathered stones on a calm shore.

Best used for

Clean and minimalist web design
Elegant corporate branding
Photography portfolios
Modern mobile application themes
Interior design visualization
Subtle background and texture elements

Suggested color roles

primary

Use `#708090` for strong headings, primary buttons, or significant UI elements to provide depth.

secondary

Apply `#A9A9A9` for secondary text, dividers, or background elements that need a gentle presence.

accent

While subtle, `#D3D3D3` can act as a soft accent for hover states or very light borders, maintaining the calm mood.

background

Utilize `#F5F5F5` or `#E8E8E8` as the main background color for a light, airy, and expansive feel.

text

A deep charcoal or black is recommended for text on lighter backgrounds like `#F5F5F5` or `#E8E8E8` for optimal legibility.

Accessibility notes

Ensure sufficient contrast between `#708090` text and light backgrounds like `#F5F5F5` for readability.
Avoid pairing `#D3D3D3` or `#E8E8E8` for text on `#F5F5F5` backgrounds due to low contrast.
Use a contrast checker when combining `#A9A9A9` with `#E8E8E8` for smaller text elements.
For interactive elements, ensure hover/active states maintain good contrast against their surrounding colors.

Recommended combinations

Soft Foundation

Excellent for creating a clean, layered base for content areas and spacious layouts.

#F5F5F5 · #E8E8E8 · #D3D3D3

Deep Contrast

Ideal for defining sections or prominent text against a very light background, providing clear hierarchy.

#708090 · #A9A9A9 · #F5F5F5

Mid-Tone Harmony

Perfect for subtle gradients, dividers, or background patterns that require a gentle visual shift.

#A9A9A9 · #D3D3D3 · #E8E8E8

CSS variables

:root {
  --pebble-shore-drift-1: #708090;
  --pebble-shore-drift-2: #A9A9A9;
  --pebble-shore-drift-3: #D3D3D3;
  --pebble-shore-drift-4: #E8E8E8;
  --pebble-shore-drift-5: #F5F5F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pebble-shore-drift": {
        1: "#708090",
        2: "#A9A9A9",
        3: "#D3D3D3",
        4: "#E8E8E8",
        5: "#F5F5F5",
      }
    }
  }
}

Hex values

Color 1#708090

Color 2#A9A9A9

Color 3#D3D3D3

Color 4#E8E8E8

Color 5#F5F5F5

Accessibility

Contrast checker

1.7:1Fail

2.7:1Fail

3.3:1AA18

3.7:1AA18

1.7:1Fail

1.6:1Fail

1.9:1Fail

2.2:1Fail

2.7:1Fail

1.6:1Fail

1.2:1Fail

1.4:1Fail

3.3:1AA18

1.9:1Fail

1.2:1Fail

1.1:1Fail

3.7:1AA18

2.2:1Fail

1.4:1Fail

1.1:1Fail

Similar palettes

More like Pebble Shore Drift

View all Neutral

Pebble Shore

Ancient Temple Serene

Clouded Moon Reflection

Coastal Fog Morning

Coastal Stone Hearth

Foggy Pine Retreat