Palette

Pastel Ocean Pebbles

Smooth, delicate pastels inspired by soft, rounded pebbles found on a peaceful, cool ocean shore.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pastel Ocean Pebbles 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 Pastel Ocean Pebbles.

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

Data visualization

#E6F3F7#D1E7F0#B8DCE6#A3CEDB#DCE9F1

Palette guide

How to use Pastel Ocean Pebbles

Overview

The Pastel Ocean Pebbles palette is a serene collection of smooth, delicate pastels, inspired by the cool, rounded pebbles found on a peaceful ocean shore. This harmonious array features a very light seafoam (#E6F3F7), a soft sky blue (#D1E7F0), a tranquil muted blue (#B8DCE6), a slightly deeper ocean blue (#A3CEDB), and a gentle grayish-blue (#DCE9F1). Designers can leverage these calming hues to create sophisticated, tranquil, and clean visuals. Developers will find this palette excellent for crafting minimalist user interfaces, corporate branding that needs a soft touch, or any digital presence aiming for a peaceful, professional, and refreshing aesthetic.

Best used for

Minimalist website designs
Corporate branding with a soft touch
Wellness or spa retreat visuals
Nautical-themed lifestyle products
Clean and modern UI/UX
Environmental or conservation initiatives

Suggested color roles

primary

#A3CEDB - A stable and calming ocean blue, ideal for primary brand elements or important calls-to-action.

secondary

#B8DCE6 - A tranquil muted blue, perfect for supporting sections, headers, or subtle graphical elements.

accent

#D1E7F0 - A soft sky blue, useful for highlighting secondary information or adding a gentle visual break.

background

#E6F3F7 - A very light seafoam, providing a clean, airy, and expansive canvas for content.

text

A deep charcoal or dark navy is highly recommended for optimal readability against these light, cool backgrounds.

Accessibility notes

Ensure strong contrast for text, especially when using the lightest colors like #E6F3F7 and #DCE9F1 as backgrounds.
The palette has subtle differences; avoid using adjacent colors for text and background without contrast checking.
For interactive elements, ensure sufficient contrast against the background to clearly indicate their functionality.
Consider using #A3CEDB or #B8DCE6 as background for text-heavy sections to improve readability over lighter shades.

Recommended combinations

Coastal Breeze

Ideal for serene branding, clean website layouts, or refreshing digital content.

#A3CEDB · #E6F3F7 · #D1E7F0

Deep Pebble

Creates a sophisticated, calming feel, suitable for corporate or high-end minimalist designs.

#B8DCE6 · #DCE9F1 · #A3CEDB

Misty Shore

Excellent for light, airy backgrounds, subtle accents, or a gentle, expansive visual presence.

#E6F3F7 · #DCE9F1 · #D1E7F0

CSS variables

:root {
  --pastel-ocean-pebbles-1: #E6F3F7;
  --pastel-ocean-pebbles-2: #D1E7F0;
  --pastel-ocean-pebbles-3: #B8DCE6;
  --pastel-ocean-pebbles-4: #A3CEDB;
  --pastel-ocean-pebbles-5: #DCE9F1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pastel-ocean-pebbles": {
        1: "#E6F3F7",
        2: "#D1E7F0",
        3: "#B8DCE6",
        4: "#A3CEDB",
        5: "#DCE9F1",
      }
    }
  }
}

Hex values

Color 1#E6F3F7

Color 2#D1E7F0

Color 3#B8DCE6

Color 4#A3CEDB

Color 5#DCE9F1

Accessibility

Contrast checker

1.1:1Fail

1.3:1Fail

1.5:1Fail

1.1:1Fail

1.3:1Fail

1:1Fail

1.3:1Fail

1.1:1Fail

1.2:1Fail

1.5:1Fail

1.3:1Fail

1.2:1Fail

1.4:1Fail

1.1:1Fail

1:1Fail

1.2:1Fail

1.4:1Fail

Similar palettes

More like Pastel Ocean Pebbles

Pastel Ocean Pebbles

See it in context.

Ready when you are.

Built with Pastel Ocean Pebbles.

How to use Pastel Ocean Pebbles

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Coastal Breeze

Deep Pebble

Misty Shore

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Pastel Ocean Pebbles