Back to palettes

Palette

Ocean Depths Glimmer

Plunging into the dark, profound blues of the deep ocean, where only glimmers of light penetrate the serene abyss.

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#0000CD#00BFFF#1E90FF#4169E1

Palette guide

How to use Ocean Depths Glimmer

Overview

The Ocean Depths Glimmer palette (variant 5) offers a striking and dynamic journey through vibrant blues, from the classic depth of navy to the almost electric brilliance of sky blue. It features a foundational Navy (#000080) and a rich Medium Blue (#0000CD), providing a strong, trustworthy base. The palette then surges into more vivid tones with a bright Deep Sky Blue (#00BFFF) and a powerful Dodger Blue (#1E90FF), culminating in a sophisticated Royal Blue (#4169E1). This collection is perfect for designers and developers seeking to evoke energy, professionalism, and a captivating visual experience, ideal for modern interfaces, tech branding, or projects demanding both depth and vibrancy.

Best used for

  • High-performance tech product interfaces
  • Sports and athletic branding
  • Digital dashboards with real-time data
  • Educational platforms for STEM subjects
  • Modern corporate websites
  • Interactive app designs

Suggested color roles

primary

Navy (#000080) for foundational elements, headers, or corporate branding, conveying stability and professionalism.

secondary

Medium Blue (#0000CD) for main content areas, important sections, or large graphical elements, adding richness.

accent

Deep Sky Blue (#00BFFF) for calls-to-action, interactive buttons, or key information, providing a clear, energetic focal point.

background

Royal Blue (#4169E1) for content panels or secondary backgrounds, offering a vibrant yet stable base.

text

Use white or very light grey for text on the darker blues, and a deep charcoal or black for text on #00BFFF for optimal contrast.

Accessibility notes

  • #000080, #0000CD, #1E90FF, and #4169E1 require white text for WCAG AA contrast compliance.
  • #00BFFF is a very bright blue; ensure dark text (e.g., black or dark navy) is used for readability.
  • Avoid using #000080 and #0000CD for text/background as their contrast might be insufficient.
  • Test all interactive elements for sufficient color contrast in both normal and focus states.

Recommended combinations

Dynamic Depth

Create a deep, professional background with #000080, enhanced by #0000CD for content, and #4169E1 for titles.

#000080 · #0000CD · #4169E1

Vibrant Interaction

Perfect for interactive sections, with #0000CD as a background, #00BFFF for primary buttons, and #1E90FF for hover states.

#0000CD · #00BFFF · #1E90FF

Sky Contrast

Use #4169E1 for a content block, #00BFFF for a prominent graphic, and #000080 for a strong header.

#4169E1 · #00BFFF · #000080

CSS variables

:root {
  --ocean-depths-glimmer-5-1: #000080;
  --ocean-depths-glimmer-5-2: #0000CD;
  --ocean-depths-glimmer-5-3: #00BFFF;
  --ocean-depths-glimmer-5-4: #1E90FF;
  --ocean-depths-glimmer-5-5: #4169E1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-depths-glimmer-5": {
        1: "#000080",
        2: "#0000CD",
        3: "#00BFFF",
        4: "#1E90FF",
        5: "#4169E1",
      }
    }
  }
}

Related searches

vibrant blue color schemesdeep and bright blue UIdynamic ocean palettetech blue brandingmodern blue web design

Palette colors

Hex values

Color 1#000080
·
Color 2#0000CD
·
Color 3#00BFFF
·
Color 4#1E90FF
·
Color 5#4169E1
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
7.5:1AAA
4.9:1AA
3.3:1AA18
2
1.4:1Fail
5.3:1AA
3.4:1AA18
2.3:1Fail
3
7.5:1AAA
5.3:1AA
1.5:1Fail
2.3:1Fail
4
4.9:1AA
3.4:1AA18
1.5:1Fail
1.5:1Fail
5
3.3:1AA18
2.3:1Fail
2.3:1Fail
1.5:1Fail

Similar palettes

More like Ocean Depths Glimmer

View all dark
Abyss Gaze
Abyssal Bioluminescent Glow
Abyssal Coral Glow
Abyssal Depths
Abyssal Rift Shimmer
Abyssal Trench Dive