Back to palettes

Palette

Ocean Glass Shards

Sparkling blues and greens inspired by sea glass polished by the ocean, calm and refreshing.

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

#00CED1#4682B4#87CEEB#B0E0E6#F0FFFF

Palette guide

How to use Ocean Glass Shards

Overview

The Ocean Glass Shards palette offers a refreshing spectrum of cool blues and aquas, evoking the serene clarity of sea glass polished by the ocean. Anchored by the vibrant #00CED1 and the strong #4682B4, it flows into lighter, airy tones like #87CEEB, #B0E0E6, and the near-white #F0FFFF. This palette is perfect for designers aiming to create clean, crisp, and calming digital or physical experiences. Its distinct shades allow for clear hierarchy in UI design, while the harmonious progression ensures visual cohesion. Ideal for projects that demand a fresh, aquatic, and deeply tranquil aesthetic.

Best used for

  • Marine conservation websites
  • Spa and wellness branding
  • Clean technology interfaces
  • Aquatic sports apparel design
  • Educational content on oceanography
  • Minimalist web design

Suggested color roles

primary

Use #00CED1 for impactful calls-to-action or prominent branding, offering a bright, inviting focal point.

secondary

Apply #4682B4 for navigation, subheadings, or key information, providing a stable, deep blue contrast.

accent

Highlight with #87CEEB for subtle interactive elements or decorative touches, adding a refreshing pop.

background

Employ #F0FFFF for pristine, light backgrounds, creating an expansive and clean canvas.

text

For best readability, use #4682B4 for headings and a dark charcoal like #222222 for body text against the lighter background colors.

Accessibility notes

  • Ensure sufficient contrast between #4682B4 text and #F0FFFF or #B0E0E6 backgrounds.
  • #00CED1 provides good contrast with #F0FFFF but should be checked for smaller text sizes.
  • Avoid placing light colors like #B0E0E6 on #87CEEB for text due to potential low contrast.
  • Always use a contrast checker to verify WCAG AA compliance for all text and interactive elements.

Recommended combinations

Deep Ocean

Creates a classic, refreshing blue theme, ideal for hero sections or strong branding.

#00CED1 · #4682B4 · #F0FFFF

Sky & Water

Excellent for soft gradients, backgrounds, or layered elements, evoking open skies and clear water.

#87CEEB · #B0E0E6 · #F0FFFF

Aqua Accent

Stronger contrast for calls-to-action and primary information, maintaining a bright, aquatic feel.

#4682B4 · #00CED1 · #87CEEB

CSS variables

:root {
  --ocean-glass-shards-1: #00CED1;
  --ocean-glass-shards-2: #4682B4;
  --ocean-glass-shards-3: #87CEEB;
  --ocean-glass-shards-4: #B0E0E6;
  --ocean-glass-shards-5: #F0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-glass-shards": {
        1: "#00CED1",
        2: "#4682B4",
        3: "#87CEEB",
        4: "#B0E0E6",
        5: "#F0FFFF",
      }
    }
  }
}

Related searches

vibrant aqua blue palettecool ocean color schemeserene water colorsclean blue green paletterefreshing aquatic design

Palette colors

Hex values

Color 1#00CED1
·
Color 2#4682B4
·
Color 3#87CEEB
·
Color 4#B0E0E6
·
Color 5#F0FFFF
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
1.1:1Fail
1.4:1Fail
1.9:1Fail
2
2.1:1Fail
2.4:1Fail
2.9:1Fail
4:1AA18
3
1.1:1Fail
2.4:1Fail
1.2:1Fail
1.7:1Fail
4
1.4:1Fail
2.9:1Fail
1.2:1Fail
1.4:1Fail
5
1.9:1Fail
4:1AA18
1.7:1Fail
1.4:1Fail

Similar palettes

More like Ocean Glass Shards

View all cool
Aqua Ocean Dream
Azure Coast Dream
Azure Reef Shimmer
Azure Tide Pool
Cerulean Horizon Dive
Cerulean Shoreline Whisper