Back to palettes

Palette

Sea Glass Pebble

Gentle, muted tones reminiscent of smooth sea glass washed ashore on a pebble beach.

neutralcalm5 colors
More neutral 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

#84978F#A9C1B2#C6DCD1#DDEEE4#708090

Palette guide

How to use Sea Glass Pebble

Overview

The 'Sea Glass Pebble' palette (ID: sea-glass-pebble) offers a gentle collection of muted, cool-toned neutrals, reminiscent of smooth, ocean-tumbled stones and driftwood. Featuring shades like the grounding #708090, the soft green-grey #84978F, and the airy #DDEEE4, this palette is perfect for designers and developers aiming for a calm, organic, and sophisticated aesthetic. These colors provide a versatile foundation for creating interfaces and branding that feel natural, understated, and serene, with enough contrast to ensure readability while maintaining a cohesive, soft visual appeal.

Best used for

  • Sustainable and eco-friendly brand identities
  • Nature-inspired web and app interfaces
  • Minimalist interior design concepts
  • Organic food and wellness product packaging
  • Artisanal craft and handmade goods websites
  • Calming digital content and photography backdrops

Suggested color roles

primary

Use #708090 for strong headings, primary calls-to-action, or foundational UI elements to provide a grounding, sophisticated anchor.

secondary

Apply #84978F for subheadings, secondary content blocks, or supportive graphics, offering a softer, organic contrast.

accent

Incorporate #A9C1B2 for subtle highlights, interactive states, or delicate illustrations, adding a fresh, muted green touch.

background

Utilize #DDEEE4 as the primary background color for a clean, airy canvas, ensuring excellent readability for darker text.

text

For body text, #708090 provides optimal contrast against #DDEEE4 and other lighter shades, ensuring clear readability.

Accessibility notes

  • Ensure sufficient contrast between text in #708090 and backgrounds like #DDEEE4 or #C6DCD1 for optimal readability.
  • Avoid using mid-tones like #A9C1B2 for small text on similar light backgrounds; reserve for larger titles or accents.
  • Verify contrast ratios for interactive elements to meet WCAG guidelines, especially with lighter shades.
  • Consider increasing font weight for text using #84978F on a #C6DCD1 background to improve legibility.

Recommended combinations

Earthy Base

A light, airy background with a deep, grounding text color and a muted green-grey for secondary elements.

#DDEEE4 · #708090 · #84978F

Soft Layers

Ideal for layered UI components, using a light green-grey background, a slightly darker green for cards, and deep grey for headings.

#C6DCD1 · #A9C1B2 · #708090

Pebble Highlights

Use the muted green-grey for a primary content block, the lightest shade for text, and a brighter green as an accent.

#84978F · #DDEEE4 · #A9C1B2

CSS variables

:root {
  --sea-glass-pebble-1: #84978F;
  --sea-glass-pebble-2: #A9C1B2;
  --sea-glass-pebble-3: #C6DCD1;
  --sea-glass-pebble-4: #DDEEE4;
  --sea-glass-pebble-5: #708090;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sea-glass-pebble": {
        1: "#84978F",
        2: "#A9C1B2",
        3: "#C6DCD1",
        4: "#DDEEE4",
        5: "#708090",
      }
    }
  }
}

Related searches

muted green grey palettecalm pebble colorsneutral sea glass themeorganic design colorsearthy cool tones

Palette colors

Hex values

Color 1#84978F
·
Color 2#A9C1B2
·
Color 3#C6DCD1
·
Color 4#DDEEE4
·
Color 5#708090
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.1:1Fail
2.6:1Fail
1.3:1Fail
2
1.6:1Fail
1.3:1Fail
1.6:1Fail
2.1:1Fail
3
2.1:1Fail
1.3:1Fail
1.2:1Fail
2.8:1Fail
4
2.6:1Fail
1.6:1Fail
1.2:1Fail
3.4:1AA18
5
1.3:1Fail
2.1:1Fail
2.8:1Fail
3.4:1AA18

Similar palettes

More like Sea Glass Pebble

View all neutral
Coastal Shell Treasure
Coastal Dune Serenity
Coastal Linen Breeze
Coastal Sands Aura
Coastal Stone Haze
Cotton Cloud Morning