Back to palettes

Palette

Sea Glass Collection

Soft, frosted blues and greens reminiscent of ancient sea glass washed ashore by gentle waves.

CoolCalm5 colors
More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sea Glass Collection 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 Sea Glass Collection.

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

Data visualization

#4682B4#87CEEB#B0E0E6#ADD8E6#F0F8FF

Palette guide

How to use Sea Glass Collection

Overview

The 'Sea Glass Collection' palette (ID: sea-glass-collection) offers a refreshing array of cool blues, reminiscent of ocean waves and clear skies. This palette transitions beautifully from the deep, anchoring #4682B4 to the ethereal #F0F8FF, providing a versatile range for designers and developers. The lighter blues like #87CEEB, #B0E0E6, and #ADD8E6 evoke a sense of calm and clarity, making it ideal for clean, professional, and tranquil digital experiences. Utilize these shades to create depth, highlight key information, and maintain a cohesive, cool-toned aesthetic.

Best used for

  • Aquatic or marine-themed branding
  • Medical and wellness application interfaces
  • Travel and tourism websites focusing on coastal destinations
  • Clean, professional corporate design
  • Educational platforms with a calming visual appeal
  • Relaxation and mindfulness apps

Suggested color roles

primary

Use #4682B4 for strong headings, primary calls-to-action, or foundational UI elements to establish a deep, reliable presence.

secondary

Apply #87CEEB for subheadings, secondary information blocks, or supportive graphics, offering a brighter yet harmonious blue.

accent

Incorporate #ADD8E6 for subtle highlights, interactive states, or delicate icons, adding a touch of gentle sparkle.

background

Utilize #F0F8FF as the primary background color for a clean, airy canvas, ensuring excellent readability for darker text.

text

For body text, #4682B4 or a dark charcoal (e.g., #333333) provides optimal contrast against #F0F8FF and lighter blues.

Accessibility notes

  • Ensure sufficient contrast when using lighter blues like #ADD8E6 on #F0F8FF backgrounds; reserve for larger text or accents.
  • The deep #4682B4 provides excellent contrast for text on #F0F8FF and #B0E0E6 backgrounds.
  • Verify contrast ratios for interactive elements to meet WCAG standards, especially with mid-range blues.
  • Consider using a bold font weight for text in #87CEEB when placed on a #B0E0E6 background for improved readability.

Recommended combinations

Deep Ocean

Ideal for a strong brand presence: deep blue for text/elements, light background, and a medium blue accent.

#4682B4 · #F0F8FF · #87CEEB

Sky & Sea

Great for layered backgrounds or UI components, moving from a light background to slightly darker elements with a dark accent.

#B0E0E6 · #ADD8E6 · #4682B4

Calm Interface

Use the lightest color for primary background, a medium blue for cards or sections, and the darkest for key text.

#F0F8FF · #87CEEB · #4682B4

CSS variables

:root {
  --sea-glass-collection-1: #4682B4;
  --sea-glass-collection-2: #87CEEB;
  --sea-glass-collection-3: #B0E0E6;
  --sea-glass-collection-4: #ADD8E6;
  --sea-glass-collection-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sea-glass-collection": {
        1: "#4682B4",
        2: "#87CEEB",
        3: "#B0E0E6",
        4: "#ADD8E6",
        5: "#F0F8FF",
      }
    }
  }
}

Related searches

ocean blue palettecool water colorstranquil blue schemebeach house design colorscalm UI colors

Palette colors

Hex values

Color 1#4682B4
·
Color 2#87CEEB
·
Color 3#B0E0E6
·
Color 4#ADD8E6
·
Color 5#F0F8FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.4:1Fail
2.9:1Fail
2.7:1Fail
3.8:1AA18
2
2.4:1Fail
1.2:1Fail
1.1:1Fail
1.6:1Fail
3
2.9:1Fail
1.2:1Fail
1.1:1Fail
1.3:1Fail
4
2.7:1Fail
1.1:1Fail
1.1:1Fail
1.4:1Fail
5
3.8:1AA18
1.6:1Fail
1.3:1Fail
1.4:1Fail

Similar palettes

More like Sea Glass Collection

View all Cool
Alpine Lake Dawn
Aqua Shore Breeze
Coastal Pebble Wash
Coastal Sand Whisper
Glacier Lake Depths
Moonlit Ocean Glow