Palette

Coastal Stone Pebble

Soft, natural tones echoing the smooth stones found along a serene coastline.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B0C4DE#778899#F5F5DC#8B7355#696969

Palette guide

How to use Coastal Stone Pebble

Overview

The Coastal Stone Pebble palette offers a versatile collection of soft, natural tones, echoing the smooth, weathered stones found along a serene coastline. With the calming blue-gray of #B0C4DE, a balanced neutral #778899, and the warm, sandy #F5F5DC, this palette provides a harmonious base. The grounding #8B7355 introduces a sophisticated brown, while #696969 offers a deep, anchoring gray. This blend is ideal for designers seeking to create a tranquil, minimalist, and subtly elegant aesthetic. It's especially suited for projects that aim to convey stability, organic beauty, and a quiet, contemplative atmosphere, perfect for natural, understated branding.

Best used for

Minimalist branding and packaging
Natural beauty and wellness websites
Architectural and interior design portfolios
Eco-friendly product lines
Artisan craft marketplaces
Professional corporate communications

Suggested color roles

primary

Utilize #B0C4DE as a dominant, calming blue-gray for main sections or branding elements.

secondary

Employ #778899 for secondary content blocks, navigation, or subtle graphical elements, adding depth.

accent

Introduce #8B7355 as a warm, earthy accent for highlights, icons, or decorative touches.

background

Choose #F5F5DC for a light, airy background, or #B0C4DE for a slightly more saturated yet soft canvas.

text

Use #696969 or #778899 for body text and headings for excellent readability against lighter palette colors.

Accessibility notes

The darker #696969 and #778899 provide excellent contrast for text on #F5F5DC and #B0C4DE.
Ensure sufficient contrast when using #F5F5DC for text on any background, as it is extremely light.
Avoid using #B0C4DE for text on #778899 backgrounds; opt for a darker color for text.
Check contrast ratios for all text pairings, especially for large blocks of content to ensure readability.

Recommended combinations

Pebble Shore

Create a sophisticated, deep-to-light gradient for headers, main content, and bright accents in web design.

#696969 · #778899 · #F5F5DC

Coastal Earth

Ideal for clean, minimalist interfaces with a soft blue-gray, a warm brown accent, and a light background.

#B0C4DE · #8B7355 · #F5F5DC

Stone Layers

Use for subtle visual layering, combining mid-tone grays and blues for depth, with a deep anchor for text.

#778899 · #B0C4DE · #696969

CSS variables

:root {
  --coastal-stone-pebble-1: #B0C4DE;
  --coastal-stone-pebble-2: #778899;
  --coastal-stone-pebble-3: #F5F5DC;
  --coastal-stone-pebble-4: #8B7355;
  --coastal-stone-pebble-5: #696969;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-stone-pebble": {
        1: "#B0C4DE",
        2: "#778899",
        3: "#F5F5DC",
        4: "#8B7355",
        5: "#696969",
      }
    }
  }
}

Hex values

Color 1#B0C4DE

Color 2#778899

Color 3#F5F5DC

Color 4#8B7355

Color 5#696969

Accessibility

Contrast checker

2:1Fail

1.6:1Fail

2.5:1Fail

3.1:1AA18

2:1Fail

3.3:1AA18

1.2:1Fail

1.5:1Fail

1.6:1Fail

3.3:1AA18

4.1:1AA18

5:1AA

2.5:1Fail

1.2:1Fail

4.1:1AA18

1.2:1Fail

3.1:1AA18

1.5:1Fail

5:1AA

1.2:1Fail

Similar palettes

More like Coastal Stone Pebble

Coastal Stone Pebble

See it in context.

Ready when you are.

Built with Coastal Stone Pebble.

How to use Coastal Stone Pebble

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Pebble Shore

Coastal Earth

Stone Layers

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coastal Stone Pebble