Back to palettes

Palette

Coastal Pebble Smooth

A serene collection of grays and muted blues, reminiscent of smooth, water-worn pebbles on a quiet shore.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Pebble Smooth 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 Coastal Pebble Smooth.

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

Data visualization

#D3D3D3#A9A9A9#778899#5F6A7D#36454F

Palette guide

How to use Coastal Pebble Smooth

Overview

The Coastal Pebble Smooth palette offers a serene collection of grays and muted blues, reminiscent of smooth, water-worn pebbles on a quiet shore. Ranging from the light #D3D3D3 to the deep charcoal blue of #36454F, with versatile mid-tones like #A9A9A9, #778899, and #5F6A7D. This palette is perfect for designs that prioritize minimalism, sophistication, and a calm, grounded aesthetic. Developers will find these colors excellent for crafting high-end tech interfaces, luxury branding, and elegant digital experiences that convey strength and understated beauty.

Best used for

  • High-end technology and software interfaces
  • Minimalist brand identities and logos
  • Modern interior design and architecture showcases
  • Luxury product packaging and websites
  • Sophisticated editorial layouts
  • Calm and professional web applications

Suggested color roles

primary

Utilize #778899 as a prominent, versatile blue-grey for main sections, headers, or significant UI elements.

secondary

Employ #A9A9A9 for secondary information, subheadings, or as a lighter background for distinct content blocks.

accent

Apply #36454F sparingly for impactful calls-to-action, important icons, or as a deep footer/header color to provide strong grounding.

background

The lightest shade, #D3D3D3, is ideal for primary backgrounds, providing a clean, neutral, and expansive canvas.

text

For optimal readability on light backgrounds, use #36454F or a true black like #000000 to ensure clear text presentation.

Accessibility notes

  • Ensure #36454F text has excellent contrast against #D3D3D3 or #A9A9A9 backgrounds.
  • Check contrast for #778899 text on #D3D3D3; it should be sufficient but verify WCAG compliance.
  • Avoid using #D3D3D3 or #A9A9A9 for small text on very light backgrounds, as contrast may be too low.
  • Use a WCAG contrast checker for all text and interactive elements to ensure compliance.

Recommended combinations

Smooth Depth

Excellent for layered content blocks or a soft background with complementary light and mid-grey tones.

#D3D3D3 · #A9A9A9 · #778899

Minimal Contrast

Create clear hero sections: a light background, deep text/logo, and a mid-tone for supporting information.

#D3D3D3 · #36454F · #5F6A7D

Elegant Layers

Ideal for UI elements that require a subtle progression of shades, adding sophistication and visual interest.

#A9A9A9 · #5F6A7D · #778899

CSS variables

:root {
  --coastal-pebble-smooth-1: #D3D3D3;
  --coastal-pebble-smooth-2: #A9A9A9;
  --coastal-pebble-smooth-3: #778899;
  --coastal-pebble-smooth-4: #5F6A7D;
  --coastal-pebble-smooth-5: #36454F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-pebble-smooth": {
        1: "#D3D3D3",
        2: "#A9A9A9",
        3: "#778899",
        4: "#5F6A7D",
        5: "#36454F",
      }
    }
  }
}

Related searches

smooth grey paletteminimalist blue greycalm stone colorssophisticated neutral schememodern pebble tones

Palette colors

Hex values

Color 1#D3D3D3
·
Color 2#A9A9A9
·
Color 3#778899
·
Color 4#5F6A7D
·
Color 5#36454F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.4:1Fail
3.6:1AA18
6.6:1AA
2
1.6:1Fail
1.5:1Fail
2.3:1Fail
4.2:1AA18
3
2.4:1Fail
1.5:1Fail
1.5:1Fail
2.7:1Fail
4
3.6:1AA18
2.3:1Fail
1.5:1Fail
1.8:1Fail
5
6.6:1AA
4.2:1AA18
2.7:1Fail
1.8:1Fail

Similar palettes

More like Coastal Pebble Smooth

View all neutral
Pebble Path Serenity
Calm Lakeside Stone
Calm Stone Pathway
Fjord Cliff Hearth
Moonlit Canyon Stone
Pebble Beach Stone