Palette

Minimal Pebble Shore

Gentle and understated, reflecting the subtle beauty and quiet textures of a natural pebble shore.

NeutralMinimal5 colors

More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5C6670#7E8A95#A0ACB6#C2CED8#E4EBF0

Palette guide

How to use Minimal Pebble Shore

Overview

The Minimal Pebble Shore palette evokes the serene beauty of a natural coastline with its gentle, understated grey-blue tones. This collection features a deep, grounding #5C6670, moving through mid-tones like #7E8A95 and #A0ACB6, to the soft, airy #C2CED8 and #E4EBF0. Ideal for designs seeking a calm, sophisticated, and natural aesthetic, this palette is excellent for wellness brands, serene digital interfaces, or home decor concepts. Its subtle variations allow for depth without overwhelming, providing designers with a versatile range for creating harmonious and tranquil visual experiences. The cool undertones bring a sense of clarity and peace.

Best used for

Wellness and spa branding
Nature-inspired digital interfaces
Eco-conscious product packaging
Serene home interior design
Calm corporate websites
Educational platforms with a gentle feel

Suggested color roles

primary

#7E8A95 - A balanced, calming blue-grey, perfect for main content blocks or prominent UI elements, providing a soft yet clear presence.

secondary

#A0ACB6 - A lighter, airy grey-blue, suitable for supporting information, subtle dividers, or backgrounds that need a gentle lift.

accent

#5C6670 - The deepest shade, effective for strong calls to action, important headings, or navigation elements, offering a grounded anchor.

background

#E4EBF0 - A very light, almost off-white blue-grey, creating a clean, open canvas that promotes tranquility and readability.

text

#5C6670 - A dark enough blue-grey for main body text, especially on light backgrounds like #E4EBF0 or #C2CED8, ensuring good legibility.

Accessibility notes

Ensure #5C6670 text has sufficient contrast against lighter backgrounds like #E4EBF0 and #C2CED8.
Avoid using #A0ACB6 text on #C2CED8 background for smaller fonts due to potential low contrast.
For interactive elements, ensure hover states provide clear visual feedback beyond just color change, especially when using similar shades.
When using lighter tones for text, like #C2CED8, ensure it's on a significantly darker background such as #5C6670.

Recommended combinations

Shoreline Contrast

High-contrast pairing for titles and body text on a clean, light page.

#5C6670 · #E4EBF0 · #7E8A95

Coastal Gradient

Smooth transitions for background elements, data visualizations, or subtle branding.

#7E8A95 · #A0ACB6 · #C2CED8

Pebble Base

A light background with a mid-tone primary and a strong dark accent for a balanced, natural feel.

#E4EBF0 · #A0ACB6 · #5C6670

CSS variables

:root {
  --minimal-pebble-shore-1: #5C6670;
  --minimal-pebble-shore-2: #7E8A95;
  --minimal-pebble-shore-3: #A0ACB6;
  --minimal-pebble-shore-4: #C2CED8;
  --minimal-pebble-shore-5: #E4EBF0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "minimal-pebble-shore": {
        1: "#5C6670",
        2: "#7E8A95",
        3: "#A0ACB6",
        4: "#C2CED8",
        5: "#E4EBF0",
      }
    }
  }
}

Hex values

Color 1#5C6670

Color 2#7E8A95

Color 3#A0ACB6

Color 4#C2CED8

Color 5#E4EBF0

Accessibility

Contrast checker

1.7:1Fail

2.5:1Fail

3.7:1AA18

4.9:1AA

1.7:1Fail

1.5:1Fail

2.2:1Fail

2.9:1Fail

2.5:1Fail

1.5:1Fail

1.4:1Fail

1.9:1Fail

3.7:1AA18

2.2:1Fail

1.4:1Fail

1.3:1Fail

4.9:1AA

2.9:1Fail

1.9:1Fail

1.3:1Fail

Similar palettes

More like Minimal Pebble Shore

View all Neutral

Zen Stone Garden

Industrial Grunge Fade

Modern Loft

Zen Sand Garden

Cityscape Window Glint

Coastal Linen Sands