Back to palettes

Palette

Ocean Glass Shard

Fragmented blues and greens reflecting the cool, translucent hues of sea glass found on the shore.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#9DD7D2#7AC3C1#57AEAF#349A9E#12868D

Palette guide

How to use Ocean Glass Shard

Overview

The Ocean Glass Shard palette captures the serene beauty of sea-tumbled glass with its cool, aquatic blues and greens. This collection, featuring vibrant #9DD7D2, balanced #7AC3C1, and the deeper #12868D, offers a refreshing and tranquil aesthetic for various design projects. Designers can leverage its harmonious gradient to evoke calmness, while developers will appreciate the clear differentiation for UI elements. The mid-tones like #57AEAF and #349A9E provide excellent versatility for backgrounds or secondary elements, ensuring a cohesive and sophisticated visual experience. Ideal for projects seeking a natural, soothing, and subtly vibrant touch.

Best used for

  • Coastal-themed websites and branding
  • Spa and wellness app interfaces
  • Eco-friendly product packaging
  • Interior design concepts for bathrooms or relaxation spaces
  • Educational materials on marine life
  • Sustainable fashion branding

Suggested color roles

primary

Use #349A9E for dominant brand elements or key calls-to-action, providing a strong yet calming presence.

secondary

Apply #7AC3C1 for supporting graphics, navigation menus, or subheadings, offering a lighter, harmonious contrast.

accent

Highlight with #12868D for interactive elements, hover states, or important icons, ensuring visibility and depth.

background

Employ #9DD7D2 for clean, expansive backgrounds, creating a light and airy foundation.

text

For primary text, consider a dark charcoal like #333333 for readability against lighter shades, or use #12868D for headings on light backgrounds.

Accessibility notes

  • Ensure sufficient contrast between #12868D text and lighter backgrounds like #9DD7D2.
  • Avoid using #9DD7D2 directly for small text on #7AC3C1, as contrast might be insufficient for WCAG AA.
  • Test all text and interactive element color combinations using a contrast checker.
  • Consider using a darker neutral text color like black or very dark grey for maximum readability on all lighter palette colors.

Recommended combinations

Ocean Depths

Ideal for creating a sense of depth and tranquility, suitable for hero sections or brand identity.

#12868D · #349A9E · #9DD7D2

Seafoam Gradient

Excellent for soft gradients or layered UI elements, evoking a gentle, natural flow.

#9DD7D2 · #7AC3C1 · #57AEAF

Vibrant Aqua

Stronger contrast for calls-to-action and primary information, maintaining a cool, fresh feel.

#57AEAF · #349A9E · #12868D

CSS variables

:root {
  --ocean-glass-shard-1: #9DD7D2;
  --ocean-glass-shard-2: #7AC3C1;
  --ocean-glass-shard-3: #57AEAF;
  --ocean-glass-shard-4: #349A9E;
  --ocean-glass-shard-5: #12868D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-glass-shard": {
        1: "#9DD7D2",
        2: "#7AC3C1",
        3: "#57AEAF",
        4: "#349A9E",
        5: "#12868D",
      }
    }
  }
}

Related searches

cool aqua color palettesea glass inspired colorstranquil blue green paletteserene ocean shadesnatural water colors

Palette colors

Hex values

Color 1#9DD7D2
·
Color 2#7AC3C1
·
Color 3#57AEAF
·
Color 4#349A9E
·
Color 5#12868D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.6:1Fail
2.1:1Fail
2.7:1Fail
2
1.3:1Fail
1.3:1Fail
1.7:1Fail
2.2:1Fail
3
1.6:1Fail
1.3:1Fail
1.3:1Fail
1.7:1Fail
4
2.1:1Fail
1.7:1Fail
1.3:1Fail
1.3:1Fail
5
2.7:1Fail
2.2:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Ocean Glass Shard

View all cool
Aqua Ocean Dream
Azure Reef Shimmer
Azure Tide Pool
Cerulean Coastline Calm
Cerulean Horizon Dive
Coastal Seafoam Whisper