Back to palettes

Palette

Seaglass Pebble Beach

Soft, muted blues and greens blend together, reminiscent of smooth seaglass pebbles found on a serene beach.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seaglass Pebble Beach 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 Seaglass Pebble Beach.

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

Data visualization

#778899#ADD8E6#B0E0E6#98FB98#AFEEEE

Palette guide

How to use Seaglass Pebble Beach

Overview

The Seaglass Pebble Beach palette captures the essence of smooth seaglass pebbles on a serene beach, blending soft, muted blues and greens. With hues like the grounding #778899, the airy #AFEEEE, and refreshing tones such as #B0E0E6 and #98FB98, this scheme is inherently calm and natural. Designers can utilize this palette to evoke a sense of tranquility, eco-friendliness, and a subtle, sophisticated aesthetic. Developers will find these harmonious colors excellent for creating serene and inviting user interfaces that prioritize readability and a soothing user experience. It is perfectly suited for brands focused on wellness, coastal living, or any domain requiring a gentle, organic, and peaceful visual identity.

Best used for

  • Coastal lifestyle brands and decor
  • Eco-friendly initiatives and sustainable products
  • Spa and relaxation websites and apps
  • Children's educational content and toys
  • Natural product packaging and branding
  • Tranquil interfaces for mindfulness applications

Suggested color roles

primary

Use #778899 as a grounding slate grey-blue for main headings, navigation, or strong brand elements, conveying stability.

secondary

Apply #B0E0E6 for supporting content, subheadings, or background accents, adding a light, airy blue.

accent

Employ #98FB98 for refreshing highlights, interactive states, or calls to action, providing a subtle pop of mint.

background

Utilize #AFEEEE as a light aqua background, providing a soft, smooth, and expansive base for content.

text

For optimal readability, use #778899 or a deep charcoal on light backgrounds like #AFEEEE.

Accessibility notes

  • The contrast of #778899 on #AFEEEE is good for most text sizes.
  • Use #B0E0E6 for larger text or headings on #AFEEEE, as its contrast might be low for small body text.
  • Avoid using #ADD8E6 or #98FB98 for small text on #AFEEEE due to insufficient contrast.
  • Ensure interactive elements in lighter tones have clear visual cues beyond color alone for accessibility.

Recommended combinations

Pebble Contrast

Creates a clean, readable design with dark grey-blue text on a light aqua background, accented by a refreshing mint.

#AFEEEE · #778899 · #98FB98

Seaglass Blend

Ideal for subtle layering or background elements, mimicking the varied, smooth tones of seaglass.

#ADD8E6 · #B0E0E6 · #AFEEEE

Beach Finds

Combines the grounding grey-blue with a refreshing green and light blue for a balanced, natural aesthetic.

#778899 · #98FB98 · #B0E0E6

CSS variables

:root {
  --seaglass-pebble-beach-1: #778899;
  --seaglass-pebble-beach-2: #ADD8E6;
  --seaglass-pebble-beach-3: #B0E0E6;
  --seaglass-pebble-beach-4: #98FB98;
  --seaglass-pebble-beach-5: #AFEEEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seaglass-pebble-beach": {
        1: "#778899",
        2: "#ADD8E6",
        3: "#B0E0E6",
        4: "#98FB98",
        5: "#AFEEEE",
      }
    }
  }
}

Related searches

seaglass color palettemuted beach tonesserene coastal greenscalm blue grey schemenatural pebble colors

Palette colors

Hex values

Color 1#778899
·
Color 2#ADD8E6
·
Color 3#B0E0E6
·
Color 4#98FB98
·
Color 5#AFEEEE
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.4:1Fail
2.5:1Fail
2.9:1Fail
2.8:1Fail
2
2.4:1Fail
1.1:1Fail
1.2:1Fail
1.2:1Fail
3
2.5:1Fail
1.1:1Fail
1.1:1Fail
1.1:1Fail
4
2.9:1Fail
1.2:1Fail
1.1:1Fail
1:1Fail
5
2.8:1Fail
1.2:1Fail
1.1:1Fail
1:1Fail

Similar palettes

More like Seaglass Pebble Beach

View all cool
Coastal Morning Haze
Aegean Coastline Calm
Aegean Horizon
Aegean Isle Horizon
Aegean Sea Serene
Alpine Morning Mist