Back to palettes

Palette

Ocean Mist Pebbles

Soft, muted tones of pebbles found along a peaceful, misty ocean shore.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A9C3C8#7E9FA4#5A7B82#3D585E#25393E

Palette guide

How to use Ocean Mist Pebbles

Overview

The Ocean Mist Pebbles palette captures the soft, muted tones of pebbles found along a peaceful, misty ocean shore. This collection features a harmonious gradient from the deep, grounding #25393E to the light, airy #A9C3C8, with balanced mid-tones like #7E9FA4 and #5A7B82. Designers can leverage this palette to evoke a sense of calm, natural texture, and understated elegance. Developers will find its cohesive nature ideal for building interfaces that are soothing to the eyes, providing a sophisticated yet approachable aesthetic. It's perfect for projects seeking a tranquil, earthy, and refined visual experience.

Best used for

  • Minimalist and clean brand identities
  • Serene home goods e-commerce
  • Spa and relaxation app interfaces
  • Architectural and interior design portfolios
  • Nature-inspired photography websites
  • Sustainable and artisanal product packaging

Suggested color roles

primary

Use #5A7B82 for main content areas or key brand elements, offering a balanced, muted blue-grey.

secondary

Apply #3D585E for foundational elements or strong contrasts, providing depth and stability.

accent

Highlight with #A9C3C8 for subtle interactive elements or delicate design details, adding an airy touch.

background

Employ #7E9FA4 for a calming, mid-tone background, or #A9C3C8 for a very light, open base.

text

On darker shades like #25393E and #3D585E, use white or a very light grey. On lighter shades, a dark charcoal or black is recommended.

Accessibility notes

  • White text provides good contrast against #25393E, #3D585E, and #5A7B82.
  • Ensure dark text (e.g., black or #25393E) on #A9C3C8 meets WCAG AA contrast requirements.
  • Avoid using #7E9FA4 text on #5A7B82 without careful contrast checking.
  • Always use a contrast checker to verify compliance for all text and interactive elements.

Recommended combinations

Pebble Depths

Creates a grounded, sophisticated backdrop, ideal for hero sections or elegant branding.

#25393E · #3D585E · #5A7B82

Misty Shore

Excellent for soft gradients or layered UI elements, evoking a gentle, ethereal quality.

#A9C3C8 · #7E9FA4 · #5A7B82

Calm Contrast

Provides a strong yet calm visual hierarchy, suitable for primary content and subtle accents.

#3D585E · #A9C3C8 · #7E9FA4

CSS variables

:root {
  --ocean-mist-pebbles-1: #A9C3C8;
  --ocean-mist-pebbles-2: #7E9FA4;
  --ocean-mist-pebbles-3: #5A7B82;
  --ocean-mist-pebbles-4: #3D585E;
  --ocean-mist-pebbles-5: #25393E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-mist-pebbles": {
        1: "#A9C3C8",
        2: "#7E9FA4",
        3: "#5A7B82",
        4: "#3D585E",
        5: "#25393E",
      }
    }
  }
}

Related searches

muted blue grey paletteocean pebbles colorsserene mist palettecalm earthy tonessophisticated cool grey

Palette colors

Hex values

Color 1#A9C3C8
·
Color 2#7E9FA4
·
Color 3#5A7B82
·
Color 4#3D585E
·
Color 5#25393E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.5:1Fail
4.1:1AA18
6.5:1AA
2
1.5:1Fail
1.6:1Fail
2.7:1Fail
4.3:1AA18
3
2.5:1Fail
1.6:1Fail
1.7:1Fail
2.6:1Fail
4
4.1:1AA18
2.7:1Fail
1.7:1Fail
1.6:1Fail
5
6.5:1AA
4.3:1AA18
2.6:1Fail
1.6:1Fail

Similar palettes

More like Ocean Mist Pebbles

View all cool
Azure Coast Dream
Coastal Breeze
Coastal Serenity Shores
Gentle Tide Pool
Misty Coastal Cliffs
Morning Fog Harbor