Palette

Ocean Depths Glimmer

A mysterious journey from the darkest navy to shimmering light blue, reflecting the ocean's vastness.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ocean Depths Glimmer 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 Depths Glimmer.

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

Data visualization

#000080#191970#00BFFF#87CEFA#F0F8FF

Palette guide

How to use Ocean Depths Glimmer

Overview

The Ocean Depths Glimmer palette offers a captivating journey from profound navy to ethereal light blue, ideal for evoking mystery and tranquility. With deep hues like #000080 (Navy) and #191970 (Midnight Blue) providing a strong foundation, designers can build immersive experiences. The vibrant #00BFFF (Deep Sky Blue) serves as a dazzling highlight, complemented by the softer #87CEFA (Light Sky Blue) and the near-white #F0F8FF (Alice Blue). This palette is perfect for projects requiring a sense of depth, serenity, and a touch of aquatic sparkle, guiding users through a visually rich narrative. It’s particularly effective in digital interfaces or branding that aims for a sophisticated, calm, yet dynamic feel.

Best used for

Luxury marine brand websites
Sci-fi game interfaces
Night-themed digital art
Spa or wellness app designs
Coastal resort branding
Educational content about marine biology

Suggested color roles

primary

Use #000080 as a dominant background or primary branding color for a strong, authoritative presence.

secondary

Apply #191970 for secondary elements, navigation, or subtle shading to maintain depth.

accent

#00BFFF is excellent for interactive elements, calls to action, or highlights that demand attention.

background

#F0F8FF provides a clean, airy background, especially for content areas, ensuring high readability.

text

For dark backgrounds, use #F0F8FF; for light backgrounds like #F0F8FF, a deep blue like #000080 or #191970 offers strong contrast.

Accessibility notes

Ensure sufficient contrast between #000080 or #191970 and #F0F8FF for body text (AA or AAA).
#00BFFF might require careful pairing for text; use it primarily for graphical accents or large headings.
Test all text against its background for readability, especially #87CEFA on #F0F8FF, which may lack contrast.
For interactive elements, provide visual cues beyond color, especially when using lighter blues.

Recommended combinations

Deep Sea Horizon

Ideal for header backgrounds, main navigation, and legible text with a crisp, clean feel.

#000080 · #87CEFA · #F0F8FF

Glimmering Depths

Perfect for interactive dashboards, data visualizations, or highlighting key information against a dark base.

#191970 · #00BFFF · #F0F8FF

Ocean Mist

Suited for subtle gradients, light backgrounds with dark text, or serene visual elements.

#87CEFA · #F0F8FF · #000080

CSS variables

:root {
  --ocean-depths-glimmer-1: #000080;
  --ocean-depths-glimmer-2: #191970;
  --ocean-depths-glimmer-3: #00BFFF;
  --ocean-depths-glimmer-4: #87CEFA;
  --ocean-depths-glimmer-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-depths-glimmer": {
        1: "#000080",
        2: "#191970",
        3: "#00BFFF",
        4: "#87CEFA",
        5: "#F0F8FF",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#191970

Color 3#00BFFF

Color 4#87CEFA

Color 5#F0F8FF

Accessibility

Contrast checker

1.1:1Fail

7.5:1AAA

9.3:1AAA

14.9:1AAA

1.1:1Fail

7:1AA

8.7:1AAA

13.8:1AAA

7.5:1AAA

7:1AA

1.2:1Fail

2:1Fail

9.3:1AAA

8.7:1AAA

1.2:1Fail

1.6:1Fail

14.9:1AAA

13.8:1AAA

2:1Fail

1.6:1Fail

Similar palettes

More like Ocean Depths Glimmer

View all dark

Abyss Gaze

Abyssal Bioluminescent Glow