Back to palettes

Palette

Coastal Pebble Wash

A tranquil blend of ocean-worn pebbles and the soft, cool mist of a serene, windswept coastline.

CoolCalm5 colors
More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A2B2B8#7E8D91#5A6A6F#CED1CD#D7E0E3

Palette guide

How to use Coastal Pebble Wash

Overview

The Coastal Pebble Wash palette offers a tranquil blend of ocean-worn pebbles and the soft, cool mist of a serene, windswept coastline. Featuring muted blue-greys like #D7E0E3 and #CED1CD, complemented by deeper, grounding tones such as #A2B2B8, #7E8D91, and #5A6A6F. This palette is perfect for designs that aim for a calm, natural, and understated aesthetic. Developers will find these colors excellent for crafting eco-conscious branding, serene web interfaces, and inviting digital experiences that evoke peace and the organic beauty of nature.

Best used for

  • Eco-conscious and sustainable brands
  • Relaxed lifestyle blogs and websites
  • Natural material product showcases
  • Serene digital art and photography
  • Calm and professional web applications
  • Interior design with natural elements

Suggested color roles

primary

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

secondary

Employ #7E8D91 for secondary information, subheadings, or as a slightly darker background for distinct content blocks.

accent

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

background

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

text

For optimal readability on light backgrounds, use #5A6A6F or a dark charcoal like #3A4A4F to ensure clear text presentation.

Accessibility notes

  • Ensure #5A6A6F text has sufficient contrast against #D7E0E3 or #CED1CD backgrounds.
  • Check contrast for #A2B2B8 text on #D7E0E3; it should be sufficient but verify WCAG compliance.
  • Avoid using #CED1CD for small text on #D7E0E3, as contrast may be too low.
  • Use a WCAG contrast checker for all text and interactive elements to ensure compliance.

Recommended combinations

Washed Layers

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

#D7E0E3 · #CED1CD · #A2B2B8

Deep Current

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

#7E8D91 · #5A6A6F · #A2B2B8

Serene Blend

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

#D7E0E3 · #7E8D91 · #CED1CD

CSS variables

:root {
  --coastal-pebble-wash-1: #A2B2B8;
  --coastal-pebble-wash-2: #7E8D91;
  --coastal-pebble-wash-3: #5A6A6F;
  --coastal-pebble-wash-4: #CED1CD;
  --coastal-pebble-wash-5: #D7E0E3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-pebble-wash": {
        1: "#A2B2B8",
        2: "#7E8D91",
        3: "#5A6A6F",
        4: "#CED1CD",
        5: "#D7E0E3",
      }
    }
  }
}

Related searches

pebble wash palette tranquil grey blueserene coastal huesmuted earthy tonescalm natural scheme

Palette colors

Hex values

Color 1#A2B2B8
·
Color 2#7E8D91
·
Color 3#5A6A6F
·
Color 4#CED1CD
·
Color 5#D7E0E3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
1.4:1Fail
1.6:1Fail
2
1.6:1Fail
1.6:1Fail
2.2:1Fail
2.6:1Fail
3
2.6:1Fail
1.6:1Fail
3.7:1AA18
4.2:1AA18
4
1.4:1Fail
2.2:1Fail
3.7:1AA18
1.1:1Fail
5
1.6:1Fail
2.6:1Fail
4.2:1AA18
1.1:1Fail

Similar palettes

More like Coastal Pebble Wash

View all Cool
Coastal Sand Whisper
Enchanted Riverbed
Misty Coastal Inlet
Misty Mountain Peaks
Muted Ocean Depth
Raindrop Serenity