Back to palettes

Palette

Sea Glass Pebble

Gentle, frosted blues and muted greys, echoing the smoothed fragments of sea glass found on a quiet shore.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sea Glass Pebble 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 Sea Glass Pebble.

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

Data visualization

#8BABD8#ADD8E6#C7DBEE#E0FFFF#D8D8D8

Palette guide

How to use Sea Glass Pebble

Overview

The 'Sea Glass Pebble' palette (ID: sea-glass-pebble-2) offers a delicate blend of frosted blues and muted greys, reminiscent of smooth, ocean-worn stones. This collection, featuring calming shades like #8BABD8, #ADD8E6, and the airy #E0FFFF, paired with a soft neutral #D8D8D8, is perfect for conveying a sense of serenity and understated elegance. Designers and developers can leverage these hues to create gentle, inviting interfaces, build tranquil brand identities, or design content that evokes quiet reflection and natural beauty. The subtle variations provide depth without overwhelming.

Best used for

  • Baby and children's product branding
  • Health and wellness app interfaces
  • Serene personal blog or portfolio sites
  • Coastal-themed home decor visualizations
  • Gentle art or photography projects
  • Mindfulness and meditation content

Suggested color roles

primary

Use #8BABD8 as a soft, dominant blue for main content areas or primary calls-to-action, setting a tranquil tone.

secondary

Incorporate #D8D8D8 for supportive backgrounds, card elements, or muted dividers, providing a stable, neutral base.

accent

Apply #ADD8E6 for gentle highlights, interactive states, or delicate illustrations, adding a touch of subtle coolness.

background

Utilize #E0FFFF as the lightest background color, offering an ethereal and expansive canvas for other elements.

text

For optimal readability, use a dark grey or charcoal (e.g., #4A4A4A) for text against these light pastel shades.

Accessibility notes

  • Ensure high contrast for text by using dark colors (e.g., black or dark grey) on lighter palette shades like #E0FFFF and #D8D8D8.
  • Avoid using #C7DBEE or #ADD8E6 for small text on #E0FFFF backgrounds due to potential low contrast; reserve for larger titles.
  • Verify contrast ratios for interactive elements, especially when using lighter blues for hover or active states.
  • Consider larger font sizes or bolder weights for text in #8BABD8 on a #D8D8D8 background to enhance readability.

Recommended combinations

Quiet Calm

A very light background with a muted blue primary and a soft grey secondary, ideal for a peaceful aesthetic.

#E0FFFF · #8BABD8 · #D8D8D8

Frosted Layers

Great for layering UI components, using grey as a base, and the blues for cards, headers, or subtle accents.

#D8D8D8 · #C7DBEE · #ADD8E6

Pebble Harmony

Use the muted blue for a content block, the lightest for text, and the brighter blue for subtle interactive elements.

#8BABD8 · #E0FFFF · #ADD8E6

CSS variables

:root {
  --sea-glass-pebble-2-1: #8BABD8;
  --sea-glass-pebble-2-2: #ADD8E6;
  --sea-glass-pebble-2-3: #C7DBEE;
  --sea-glass-pebble-2-4: #E0FFFF;
  --sea-glass-pebble-2-5: #D8D8D8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sea-glass-pebble-2": {
        1: "#8BABD8",
        2: "#ADD8E6",
        3: "#C7DBEE",
        4: "#E0FFFF",
        5: "#D8D8D8",
      }
    }
  }
}

Related searches

soft blue grey palettecalm pebble colorsgentle ocean thememuted coastal designtranquil UI colors

Palette colors

Hex values

Color 1#8BABD8
·
Color 2#ADD8E6
·
Color 3#C7DBEE
·
Color 4#E0FFFF
·
Color 5#D8D8D8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.7:1Fail
2.2:1Fail
1.7:1Fail
2
1.5:1Fail
1.1:1Fail
1.4:1Fail
1.1:1Fail
3
1.7:1Fail
1.1:1Fail
1.3:1Fail
1:1Fail
4
2.2:1Fail
1.4:1Fail
1.3:1Fail
1.4:1Fail
5
1.7:1Fail
1.1:1Fail
1:1Fail
1.4:1Fail

Similar palettes

More like Sea Glass Pebble

View all pastel
Gentle Sea Glass
Misty Morning Dew
Pastel Ocean Pebbles
Sea Glass Treasure
Seaside Pastel Skies
Sky Shroud