Palette

Marine Glass Shard

Reflects the tranquil dance of light through tumbled glass shards found along the quiet shoreline.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#87CEEB#B0E0E6#6A5ACD#483D8B#20B2AA

Palette guide

How to use Marine Glass Shard

Overview

The Marine Glass Shard palette reflects the tranquil dance of light through tumbled glass shards found along the quiet shoreline. This cool and serene collection includes light sky blue #87CEEB, pale blue #B0E0E6, medium slate blue #6A5ACD, dark slate blue #483D8B, and light sea green #20B2AA. It's an excellent choice for designers and developers aiming to create refreshing, calm, and modern digital experiences. The palette evokes feelings of serenity, clarity, and natural beauty, making it versatile for wellness, creative, or eco-conscious branding.

Best used for

Wellness and meditation apps and websites
Creative portfolios and artistic showcases
Modern art installations and digital displays
Serene home goods and decor branding
Eco-conscious brands and sustainability initiatives
Refreshing digital experiences and interfaces

Suggested color roles

primary

Utilize #483D8B as a deep, grounding primary for strong branding, main structural elements, or to convey sophistication.

secondary

Employ #6A5ACD for supporting elements, subheadings, or to add a layer of elegant depth.

accent

Apply #20B2AA as a refreshing accent for interactive elements, highlights, or to introduce a vibrant pop.

background

Use #B0E0E6 as a light, ethereal, and clean canvas that enhances the serene quality of the palette.

text

For optimal readability on light backgrounds, use #483D8B or black. White text provides excellent contrast on #483D8B or #6A5ACD.

Accessibility notes

Ensure #483D8B text on #B0E0E6 background meets WCAG contrast standards for clear readability.
Avoid using #87CEEB on #B0E0E6 for small body text due to low contrast; reserve for decorative or large display elements.
The deep blues (#483D8B, #6A5ACD) offer good contrast for white text, making them suitable for headings and key information.
The refreshing #20B2AA works well for interactive elements and accents where visual distinction is important.

Recommended combinations

Sea Glass Glow

Perfect for light, airy UI, subtle gradients, and evoking a sense of calm and clarity.

#87CEEB · #B0E0E6 · #20B2AA

Deep Shard

Ideal for sophisticated branding, contrasting elements, and creating visual depth with a refreshing accent.

#483D8B · #6A5ACD · #20B2AA

Tranquil Depths

Suitable for layered backgrounds, calm visuals, and conveying a sense of serene, underwater exploration.

#B0E0E6 · #6A5ACD · #483D8B

CSS variables

:root {
  --marine-glass-shard-1: #87CEEB;
  --marine-glass-shard-2: #B0E0E6;
  --marine-glass-shard-3: #6A5ACD;
  --marine-glass-shard-4: #483D8B;
  --marine-glass-shard-5: #20B2AA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "marine-glass-shard": {
        1: "#87CEEB",
        2: "#B0E0E6",
        3: "#6A5ACD",
        4: "#483D8B",
        5: "#20B2AA",
      }
    }
  }
}

Hex values

Color 1#87CEEB

Color 2#B0E0E6

Color 3#6A5ACD

Color 4#483D8B

Color 5#20B2AA

Accessibility

Contrast checker

1.2:1Fail

3:1AA18

5.2:1AA

1.5:1Fail

1.2:1Fail

3.7:1AA18

6.3:1AA

1.8:1Fail

3:1AA18

3.7:1AA18

1.7:1Fail

2:1Fail

5.2:1AA

6.3:1AA

1.7:1Fail

3.5:1AA18

1.5:1Fail

1.8:1Fail

2:1Fail

3.5:1AA18

Similar palettes

More like Marine Glass Shard

View all cool

Cerulean Coast Dream

Ocean Wave Foam

Abyssal Current Glide

Aegean Coast Whisper

Aqua Marine Vista

Azure Coast Dream