Palette

Ocean Glass Shard

A cool gradient from light sky to deep navy, like translucent sea glass fragments.

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

#B0E0E6#87CEEB#6495ED#4169E1#191970

Palette guide

How to use Ocean Glass Shard

Overview

The Ocean Glass Shard palette presents a cool gradient from light sky to deep navy, reminiscent of translucent sea glass fragments. This cohesive spectrum includes the delicate #B0E0E6 (Pale Turquoise), the refreshing #87CEEB (Sky Blue), the classic #6495ED (Cornflower Blue), the bold #4169E1 (Royal Blue), and the profound #191970 (Midnight Blue). Designers and developers can leverage this palette to create serene, sophisticated, and clean digital experiences. It’s an excellent choice for projects that require a sense of tranquility, clarity, and depth, making it versatile for corporate, educational, or thematic designs that aim for a polished and harmonious blue aesthetic.

Best used for

Modern corporate websites
Educational platforms for marine sciences
Sustainable product branding
Minimalist app interfaces
Architectural and design portfolios
Serene digital art and illustrations

Suggested color roles

primary

#191970 serves as a strong, grounding primary color for backgrounds or main branding, conveying stability.

secondary

Use #4169E1 or #6495ED for subheadings, navigation, or to add visual weight and structure.

accent

#87CEEB provides a bright, refreshing accent, ideal for calls to action, interactive elements, or subtle highlights.

background

#B0E0E6 offers a light, airy background for content. #191970 provides a dramatic, deep canvas.

text

For dark backgrounds like #191970, white or a very light gray is essential. On #B0E0E6, a deep blue like #191970 ensures readability.

Accessibility notes

Ensure adequate contrast for text on dark backgrounds; white is crucial for #191970 and #4169E1.
Avoid using #B0E0E6 or #87CEEB for small text on similarly light backgrounds like each other, as contrast will be low.
When using #B0E0E6 as a background, ensure text in darker blues like #191970 meets AA/AAA contrast ratios.
Provide clear visual indicators for interactive elements beyond color, especially for mid-range blues.

Recommended combinations

Deep Sea Glass

Creates a profound depth, suitable for hero sections or sophisticated data displays.

#191970 · #6495ED · #B0E0E6

Shard Gradient

Ideal for dynamic backgrounds or layered UI elements that transition smoothly.

#87CEEB · #4169E1 · #191970

Clear Waters

Perfect for light-themed designs, using the darkest blue for legible text on light backgrounds.

#B0E0E6 · #87CEEB · #191970

CSS variables

:root {
  --ocean-glass-shard-2-1: #B0E0E6;
  --ocean-glass-shard-2-2: #87CEEB;
  --ocean-glass-shard-2-3: #6495ED;
  --ocean-glass-shard-2-4: #4169E1;
  --ocean-glass-shard-2-5: #191970;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-glass-shard-2": {
        1: "#B0E0E6",
        2: "#87CEEB",
        3: "#6495ED",
        4: "#4169E1",
        5: "#191970",
      }
    }
  }
}

Hex values

Color 1#B0E0E6

Color 2#87CEEB

Color 3#6495ED

Color 4#4169E1

Color 5#191970

Accessibility

Contrast checker

1.2:1Fail

2.1:1Fail

3.4:1AA18

10.4:1AAA

1.2:1Fail

1.7:1Fail

2.8:1Fail

8.5:1AAA

2.1:1Fail

1.7:1Fail

1.6:1Fail

5:1AA

3.4:1AA18

2.8:1Fail

1.6:1Fail

3.1:1AA18

10.4:1AAA

8.5:1AAA

5:1AA

3.1:1AA18

Similar palettes

More like Ocean Glass Shard

Abyssal Current Glide