Palette

Coastal Pebble Beach

Muted greys, soft blues, and creamy whites reminiscent of smooth stones and driftwood along a quiet shoreline.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F5D6D#7F8C9B#B2C1CC#E0E7EB#F2F5F7

Palette guide

How to use Coastal Pebble Beach

Overview

The Coastal Pebble Beach palette offers a serene collection of muted greys and soft blues, reminiscent of smooth stones and driftwood along a quiet shoreline. Ranging from the near-white #F2F5F7 to the deep blue-grey #4F5D6D, with versatile mid-tones like #E0E7EB, #B2C1CC, and #7F8C9B. This palette is perfect for designs that aim for a calm, natural, and minimalist aesthetic. Developers will find these colors excellent for crafting eco-tourism branding, sophisticated web interfaces, and inviting digital experiences that evoke peace and the organic beauty of nature.

Best used for

Eco-tourism and nature-focused websites
Minimalist architecture and design studios
Sustainable brands and products
Serene digital publications and blogs
Natural stone and material companies
Calm and professional web applications

Suggested color roles

primary

Utilize #7F8C9B as a strong, versatile mid-tone blue-grey for main content areas, navigation, or prominent UI elements.

secondary

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

accent

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

background

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

text

For optimal readability on light backgrounds, use #4F5D6D or a deep charcoal like #333333 to ensure clear text presentation.

Accessibility notes

Ensure #4F5D6D text has excellent contrast against #F2F5F7 or #E0E7EB backgrounds.
Check contrast for #7F8C9B text on #F2F5F7; it should be sufficient but verify WCAG compliance.
Avoid using #E0E7EB or #B2C1CC for small text on #F2F5F7, as contrast may be too low.
Use a WCAG contrast checker for all text and interactive elements to ensure compliance.

Recommended combinations

Pebble Layers

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

#F2F5F7 · #E0E7EB · #B2C1CC

Deep Shore

Create a sense of depth and hierarchy in UI elements, moving from a mid-tone to a deeper, grounding shade.

#7F8C9B · #4F5D6D · #B2C1CC

Natural Flow

Use a light background with a strong, grounding text color, balanced by a refreshing blue-grey accent.

#F2F5F7 · #7F8C9B · #E0E7EB

CSS variables

:root {
  --coastal-pebble-beach-1: #4F5D6D;
  --coastal-pebble-beach-2: #7F8C9B;
  --coastal-pebble-beach-3: #B2C1CC;
  --coastal-pebble-beach-4: #E0E7EB;
  --coastal-pebble-beach-5: #F2F5F7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-pebble-beach": {
        1: "#4F5D6D",
        2: "#7F8C9B",
        3: "#B2C1CC",
        4: "#E0E7EB",
        5: "#F2F5F7",
      }
    }
  }
}

Hex values

Color 1#4F5D6D

Color 2#7F8C9B

Color 3#B2C1CC

Color 4#E0E7EB

Color 5#F2F5F7

Accessibility

Contrast checker

2:1Fail

3.7:1AA18

5.4:1AA

6.1:1AA

2:1Fail

1.9:1Fail

2.7:1Fail

3.1:1AA18