Palette

Ocean Glass Shards

Delicate shades mirroring worn sea glass washed ashore by calm ocean waves.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ocean Glass Shards 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 Glass Shards.

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

Data visualization

#456268#7B8F8B#B8CFB3#C7EDF0#9ADAE4

Palette guide

How to use Ocean Glass Shards

Overview

The Ocean Glass Shards palette presents a serene collection of muted blues and greens, reminiscent of sea glass gently worn by ocean waves. From the deep, grounding #456268 to the airy #C7EDF0 and the refreshing #9ADAE4, this palette offers a sophisticated tranquility. The softer mid-tones like #7B8F8B and #B8CFB3 provide excellent versatility for creating layered designs. Designers can use this palette to evoke a sense of calm and understated elegance, while developers will find its cohesive nature ideal for building interfaces that are both aesthetically pleasing and easy on the eyes, perfect for reflective or peaceful digital experiences.

Best used for

Meditation and mindfulness apps
Eco-conscious brand identities
Serene website backgrounds
Sustainable packaging designs
Wellness and spa marketing materials
Nature photography portfolios

Suggested color roles

primary

Use #456268 for strong foundational elements or navigation, providing a deep, stable anchor.

secondary

Apply #7B8F8B for supporting content areas or subtle branding, maintaining the muted, natural feel.

accent

Highlight with #9ADAE4 for interactive elements or important calls-to-action, offering a gentle pop of color.

background

Employ #C7EDF0 for light, airy backgrounds, creating a spacious and calm environment.

text

For readability, use #456268 for headings and a dark charcoal like #333333 for body text against the lighter palette colors.

Accessibility notes

Ensure #456268 text on #C7EDF0 offers sufficient contrast for readability.
The lighter colors like #B8CFB3 and #C7EDF0 will require a dark text color for accessibility.
Avoid placing #B8CFB3 text on #7B8F8B without checking contrast carefully.
For small text, always pair with the darkest color in the palette or a true black/dark grey.

Recommended combinations

Misty Depths

Creates a tranquil, layered effect, ideal for hero sections or brand storytelling.

#456268 · #7B8F8B · #C7EDF0

Soft Aqua

Perfect for light, airy interfaces or backgrounds where a gentle, refreshing feel is desired.

#C7EDF0 · #9ADAE4 · #B8CFB3

Earthy Calm

Provides a grounding, natural combination, suitable for secondary elements or subtle accents.

#7B8F8B · #456268 · #B8CFB3

CSS variables

:root {
  --ocean-glass-shards-3-1: #456268;
  --ocean-glass-shards-3-2: #7B8F8B;
  --ocean-glass-shards-3-3: #B8CFB3;
  --ocean-glass-shards-3-4: #C7EDF0;
  --ocean-glass-shards-3-5: #9ADAE4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-glass-shards-3": {
        1: "#456268",
        2: "#7B8F8B",
        3: "#B8CFB3",
        4: "#C7EDF0",
        5: "#9ADAE4",
      }
    }
  }
}

Hex values

Color 1#456268

Color 2#7B8F8B

Color 3#B8CFB3

Color 4#C7EDF0

Color 5#9ADAE4

Accessibility

Contrast checker

1.9:1Fail

3.9:1AA18

5.3:1AA

4.2:1AA18

1.9:1Fail

2.1:1Fail

2.7:1Fail

2.2:1Fail

3.9:1AA18

2.1:1Fail

1.3:1Fail

1.1:1Fail

5.3:1AA

2.7:1Fail

1.3:1Fail

1.2:1Fail

4.2:1AA18

2.2:1Fail

1.1:1Fail

1.2:1Fail

Similar palettes

More like Ocean Glass Shards

View all cool

Coastal Seaglass Gems

Ocean Glass Shard

Sapphire Coast Dreams

Abyssal Current Glide

Aegean Coast Serenity

Aegean Coast Whisper