Back to palettes

Palette

Seaglass Shard Gaze

Soft, weathered tones echoing the serene beauty of frosted glass pieces found along a tranquil shore.

PastelCalm5 colors
More Pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seaglass Shard Gaze 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 Shard Gaze.

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

Data visualization

#87C1BB#A0D1CB#B8E0DA#6EAEAC#559C99

Palette guide

How to use Seaglass Shard Gaze

Overview

The Seaglass Shard Gaze palette offers a serene and refreshing aesthetic, perfect for designs seeking a tranquil yet sophisticated feel. Dominated by soft blue-greens, this collection evokes the calm beauty of weathered glass found on a quiet shore. Key shades include the primary teal #87C1BB, a lighter, airy #A0D1CB, and the deeper, grounding #559C99. This palette is incredibly versatile for creating clean, inviting user interfaces or branding that speaks to natural elegance and subtle charm. Designers and developers can leverage its harmonious tones to build experiences that feel both modern and timeless, ensuring a cohesive and calming visual journey.

Best used for

  • Spa and wellness branding
  • Eco-friendly product packaging
  • Minimalist website designs
  • Coastal-themed interior decor
  • Healthcare and relaxation apps
  • Sustainable fashion lines

Suggested color roles

primary

Use #87C1BB as the main brand color for headings, primary buttons, or significant graphic elements to establish a calm and inviting presence.

secondary

Employ #A0D1CB for supporting elements like subheadings, secondary buttons, or background sections where a lighter, harmonious tone is desired.

accent

Apply #559C99 to highlight key calls to action, important icons, or interactive states, offering a subtle yet effective contrast.

background

Utilize #B8E0DA as a clean, airy background color for pages or content blocks, providing ample whitespace and a fresh feel.

text

For optimal readability, use a dark charcoal like #333333 or #2A2A2A against the lighter backgrounds, ensuring clear legibility across all content.

Accessibility notes

  • Ensure sufficient contrast between #559C99 (accent) and #B8E0DA (background) if used for text, aiming for WCAG AA compliance.
  • Lighter shades such as #B8E0DA should always be paired with dark text for readability, especially for body content.
  • Avoid using #A0D1CB and #87C1BB side-by-side for critical information if color differentiation is the sole indicator.
  • Test all interactive elements, like buttons or links, to ensure their color contrasts meet accessibility standards for users with visual impairments.

Recommended combinations

Calm Base

Ideal for creating soft, layered backgrounds and subtle content divisions in web layouts or print materials.

#B8E0DA · #A0D1CB · #87C1BB

Accent Pop

Perfect for light page backgrounds, main content sections, and distinct calls to action or interactive elements.

#B8E0DA · #87C1BB · #559C99

Depth & Detail

Use for headers, secondary informational blocks, or graphical details that require a slightly deeper, more saturated presence.

#6EAEAC · #A0D1CB · #559C99

CSS variables

:root {
  --seaglass-shard-gaze-1: #87C1BB;
  --seaglass-shard-gaze-2: #A0D1CB;
  --seaglass-shard-gaze-3: #B8E0DA;
  --seaglass-shard-gaze-4: #6EAEAC;
  --seaglass-shard-gaze-5: #559C99;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seaglass-shard-gaze": {
        1: "#87C1BB",
        2: "#A0D1CB",
        3: "#B8E0DA",
        4: "#6EAEAC",
        5: "#559C99",
      }
    }
  }
}

Related searches

seaglass color schemetranquil blue green palettepastel coastal colorsserene UI palettefrosted glass colors

Palette colors

Hex values

Color 1#87C1BB
·
Color 2#A0D1CB
·
Color 3#B8E0DA
·
Color 4#6EAEAC
·
Color 5#559C99
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.4:1Fail
1.2:1Fail
1.6:1Fail
2
1.2:1Fail
1.2:1Fail
1.5:1Fail
1.9:1Fail
3
1.4:1Fail
1.2:1Fail
1.8:1Fail
2.2:1Fail
4
1.2:1Fail
1.5:1Fail
1.8:1Fail
1.3:1Fail
5
1.6:1Fail
1.9:1Fail
2.2:1Fail
1.3:1Fail

Similar palettes

More like Seaglass Shard Gaze

View all Pastel
Ethereal Sea Foam
Aqua Blossom Dream
Blossom Blush Breeze
Cloud Veil Dream
Coastal Dawn Pastel
Frosted Window