Back to palettes

Palette

Sapphire Sea Glass

Clear and calming blues, reminiscent of smooth sapphire sea glass tumbled by ocean waves.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000080#0000CD#00BFFF#87CEFA#ADD8E6

Palette guide

How to use Sapphire Sea Glass

Overview

The "Sapphire Sea Glass" palette offers a clear and calming collection of blues, reminiscent of smooth, sapphire-hued sea glass tumbled by ocean waves. This serene array transitions from the deep, anchoring tone of #000080 (Navy) through the rich #0000CD (Medium Blue) and vibrant #00BFFF (Deep Sky Blue), culminating in the airy lightness of #87CEFA (Light Sky Blue) and #ADD8E6 (Light Blue). It’s an ideal choice for designs seeking to evoke tranquility, freshness, and natural beauty, perfect for health, wellness, or marine-themed projects.

Best used for

  • Wellness and spa branding
  • Coastal living or travel websites
  • Eco-friendly product packaging
  • Educational materials for marine biology
  • Healthcare or medical institution interfaces
  • Relaxation app UI design

Suggested color roles

primary

#0000CD (Medium Blue) - A foundational, trustworthy blue, excellent for main navigation, key information, or corporate branding.

secondary

#00BFFF (Deep Sky Blue) - A brighter, more dynamic blue for calls-to-action, interactive elements, or sections requiring more visual energy.

accent

#87CEFA (Light Sky Blue) - A soft, ethereal blue perfect for subtle highlights, background patterns, or decorative elements.

background

#F9FCFF (Very Light Blue-White) - A near-white with a hint of blue, providing a clean, expansive canvas that enhances the coolness of the palette.

text

#000080 (Navy) - The darkest blue in the palette, ensuring excellent readability for body text against lighter backgrounds, maintaining the serene blue theme.

Accessibility notes

  • Ensure sufficient contrast between #87CEFA or #ADD8E6 and background colors if used for text or critical information.
  • Pair darker blues like #000080 with lighter blues like #ADD8E6 for text/background combinations to meet WCAG contrast guidelines.
  • Avoid using only color to differentiate interactive states; supplement with underlines or icons.
  • Consider users with tritanomaly (blue-yellow color blindness) when distinguishing between very similar blue shades.

Recommended combinations

Ocean Depth

#000080 as a deep header or footer, with #ADD8E6 for subheadings, and white background.

#000080 · #ADD8E6 · #0000CD

Tidal Flow

#00BFFF for interactive elements, supported by #87CEFA for secondary text or graphics, against a medium blue.

#00BFFF · #87CEFA · #0000CD

Calm Horizon

Light blue as a soft background, medium blue for content blocks, and navy for strong accents.

#ADD8E6 · #0000CD · #000080

CSS variables

:root {
  --sapphire-sea-glass-1: #000080;
  --sapphire-sea-glass-2: #0000CD;
  --sapphire-sea-glass-3: #00BFFF;
  --sapphire-sea-glass-4: #87CEFA;
  --sapphire-sea-glass-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-sea-glass": {
        1: "#000080",
        2: "#0000CD",
        3: "#00BFFF",
        4: "#87CEFA",
        5: "#ADD8E6",
      }
    }
  }
}

Related searches

calming blue color schemesea glass inspired paletteoceanic blue design colorstranquil web design palettecool blue aesthetic

Palette colors

Hex values

Color 1#000080
·
Color 2#0000CD
·
Color 3#00BFFF
·
Color 4#87CEFA
·
Color 5#ADD8E6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
7.5:1AAA
9.3:1AAA
10.5:1AAA
2
1.4:1Fail
5.3:1AA
6.5:1AA
7.3:1AAA
3
7.5:1AAA
5.3:1AA
1.2:1Fail
1.4:1Fail
4
9.3:1AAA
6.5:1AA
1.2:1Fail
1.1:1Fail
5
10.5:1AAA
7.3:1AAA
1.4:1Fail
1.1:1Fail

Similar palettes

More like Sapphire Sea Glass

View all cool
Deep Ocean Sapphire
Sapphire Tide Pool
Abyssal Blue Descent
Abyssal Current Glide
Aegean Coast Whisper
Aqua Marine Vista