Back to palettes

Palette

Pebble Shore

Cool greys and soft whites mirroring the smoothed, washed-out 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 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.

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

Data visualization

#708090#A9A9A9#B0C4DE#DCDCDC#F5F5F5

Palette guide

How to use Pebble Shore

Overview

The Pebble Shore palette offers a refreshing array of cool grays and soft whites, reminiscent of smoothed stones on a serene beach. Anchored by the elegant `#708090` (Slate Gray) and complemented by the airy `#F5F5F5` (WhiteSmoke), this collection is perfectly suited for designers and developers seeking a clean, contemporary, and calming aesthetic. Shades like `#A9A9A9` (DarkGray) and the subtle blue-gray of `#B0C4DE` (LightSteelBlue) introduce depth and a cool undertone, making it versatile for various digital applications. This palette ensures a sophisticated and inviting user experience, with a focus on clarity and understated beauty.

Best used for

  • Contemporary web and app design
  • Cool-toned branding projects
  • Photography and art showcases
  • Clean e-commerce platforms
  • Minimalist architectural rendering
  • User interfaces requiring a calm, focused mood

Suggested color roles

primary

Use `#708090` for strong headers, navigation, or key interactive elements to provide a stable, cool base.

secondary

Apply `#A9A9A9` for secondary information, subheadings, or subtle background variations.

accent

Employ `#B0C4DE` as a soft, cool accent for interactive states, progress bars, or illustrative elements.

background

Utilize `#F5F5F5` or `#DCDCDC` as the main background to ensure a bright, clean canvas.

text

For excellent contrast, use a dark charcoal or black for text on lighter backgrounds like `#F5F5F5` or `#DCDCDC`.

Accessibility notes

  • Ensure `#708090` text on `#F5F5F5` backgrounds meets WCAG contrast standards for readability.
  • Be cautious when pairing `#A9A9A9` with `#DCDCDC` for text, as contrast might be borderline for small fonts.
  • The subtle blue in `#B0C4DE` can enhance text readability on darker grays, but always verify contrast.
  • Avoid using very light grays like `#DCDCDC` or `#F5F5F5` for text on similar light backgrounds.

Recommended combinations

Cool Horizon

Creates a light, expansive feel, perfect for header areas or clean content blocks.

#F5F5F5 · #DCDCDC · #B0C4DE

Stone Depth

Ideal for establishing clear hierarchy, with darker elements standing out against a crisp white.

#708090 · #A9A9A9 · #F5F5F5

Muted Ocean

Use for UI elements where a subtle cool transition from light to dark is desired, like cards or panels.

#B0C4DE · #A9A9A9 · #708090

CSS variables

:root {
  --pebble-shore-1: #708090;
  --pebble-shore-2: #A9A9A9;
  --pebble-shore-3: #B0C4DE;
  --pebble-shore-4: #DCDCDC;
  --pebble-shore-5: #F5F5F5;
}

Tailwind config

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

Related searches

cool grey color schemebeach pebble palettecalm blue grey designminimalist cool tonessubtle UI greys

Palette colors

Hex values

Color 1#708090
·
Color 2#A9A9A9
·
Color 3#B0C4DE
·
Color 4#DCDCDC
·
Color 5#F5F5F5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.3:1Fail
3:1Fail
3.7:1AA18
2
1.7:1Fail
1.3:1Fail
1.7:1Fail
2.2:1Fail
3
2.3:1Fail
1.3:1Fail
1.3:1Fail
1.6:1Fail
4
3:1Fail
1.7:1Fail
1.3:1Fail
1.3:1Fail
5
3.7:1AA18
2.2:1Fail
1.6:1Fail
1.3:1Fail

Similar palettes

More like Pebble Shore

View all Neutral
Pebble Shore Drift
Ancient Temple Serene
Clouded Moon Reflection
Coastal Fog Morning
Coastal Stone Hearth
Foggy Pine Retreat