Back to palettes

Palette

Pebble Beach Stone

Cool, muted greys and blues reflect the smooth, worn stones and misty air of a quiet pebble beach.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pebble Beach Stone 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 Beach Stone.

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

Data visualization

#A9A9A9#808080#696969#708090#C0C0C0

Palette guide

How to use Pebble Beach Stone

Overview

The Pebble Beach Stone palette captures the cool, muted grays and subtle blue-greys found on a quiet, windswept beach. With grounding tones like #808080 and #696969, complemented by the distinctive #708090 and the lighter #C0C0C0, this collection is ideal for designs seeking a natural, minimalist, and serene aesthetic. Designers and developers can leverage these harmonious hues to create calming user interfaces, earthy branding, or sophisticated architectural visualizations. The palette's subdued nature allows for focus on texture and form, while the hint of blue-grey adds a unique, atmospheric quality. It's perfect for conveying tranquility, strength, and an organic feel.

Best used for

  • Coastal and nature-inspired branding
  • Spa and wellness industry design
  • Minimalist website and app interfaces
  • Architectural renders and material palettes
  • Outdoor gear and apparel marketing
  • Environmental and conservation projects

Suggested color roles

primary

Use #808080 as a grounding, mid-tone base for main content areas or larger sections, providing stability.

secondary

Employ #A9A9A9 for supporting elements, subheadings, or lighter backgrounds, offering a softer contrast.

accent

Apply #696969 for strong definition, important textual elements, or subtle shadows, ensuring clarity.

background

Utilize #C0C0C0 as a soft, natural backdrop, or #A9A9A9 for a slightly deeper, more present base.

text

For body text, #696969 or #808080 on lighter backgrounds ensures optimal readability and a natural feel.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using #A9A9A9 on #C0C0C0; use darker grays for body text.
  • Reserve #696969 for critical text and interactive elements to meet WCAG AA contrast standards.
  • The blue-grey #708090 might require specific contrast testing when used for text on lighter grays.
  • Provide clear visual cues for interactive elements, as the muted nature of the palette requires explicit feedback.

Recommended combinations

Misty Shore

Ideal for creating atmospheric backgrounds, subtle gradients, or layered elements that evoke a foggy coastal scene.

#C0C0C0 · #A9A9A9 · #708090

Stone Depth

Effective for establishing strong hierarchy, such as dark headings or primary buttons, providing a solid anchor.

#696969 · #808080 · #A9A9A9

Cool Harmony

Perfect for subtle branding elements, data visualizations, or sections where a cool, serene color flow is desired.

#708090 · #A9A9A9 · #C0C0C0

CSS variables

:root {
  --pebble-beach-stone-1: #A9A9A9;
  --pebble-beach-stone-2: #808080;
  --pebble-beach-stone-3: #696969;
  --pebble-beach-stone-4: #708090;
  --pebble-beach-stone-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pebble-beach-stone": {
        1: "#A9A9A9",
        2: "#808080",
        3: "#696969",
        4: "#708090",
        5: "#C0C0C0",
      }
    }
  }
}

Related searches

natural stone palettecool grey blue colorsminimalist coastal designserene pebble tonesmuted beach hues

Palette colors

Hex values

Color 1#A9A9A9
·
Color 2#808080
·
Color 3#696969
·
Color 4#708090
·
Color 5#C0C0C0
·

Accessibility

Contrast checker

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

Similar palettes

More like Pebble Beach Stone

View all neutral
River Stone Whisper
Riverbend Stone
Stone Garden Path
Ancient Roman Stone
Ancient Rune Stone
Ancient Temple Stones