Back to palettes

Palette

Ocean Depths Glimmer

A gradient of deep blues, from the mysterious abyssal trench to the sunlit surface of the open sea.

cooldark5 colors
More cool 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

#000033#001F4C#003F7F#0060B2#0080FF

Palette guide

How to use Ocean Depths Glimmer

Overview

The Ocean Depths Glimmer palette offers a stunning progression from the darkest, most mysterious navy to a vibrant, almost electric blue, perfectly capturing the journey from the abyssal trench to the sunlit surface. Starting with an ultra-deep #000033 and moving through a rich Prussian Blue (#001F4C) and a compelling Royal Blue (#003F7F), this collection provides immense depth. The brighter shades, a dynamic Cerulean (#0060B2) and a luminous Dodger Blue (#0080FF), act as powerful focal points. Designers and developers can utilize this palette for creating captivating gradients, illustrating data with clear hierarchy, or building interfaces that demand attention while maintaining a cool, professional demeanor.

Best used for

  • Progressive web applications
  • Educational content illustrating deep concepts
  • Sports or technology branding
  • Digital dashboards requiring clear visual hierarchy
  • Sci-fi or futuristic game interfaces
  • Interactive data visualizations

Suggested color roles

primary

Deepest Navy (#000033) for foundational backgrounds, dark mode themes, or prominent headers, establishing a strong base.

secondary

Prussian Blue (#001F4C) for content blocks, secondary navigation, or subtle dividers, adding visual structure.

accent

Dodger Blue (#0080FF) to highlight calls-to-action, key interactive elements, or critical information, providing maximum pop.

background

Royal Blue (#003F7F) as a primary background for sections, offering a vibrant yet stable base for content.

text

Pure white or a very light grey is essential for all text elements to ensure optimal readability against these blues.

Accessibility notes

  • All colors in this palette are dark enough to require light text (e.g., white) for WCAG AA contrast compliance.
  • The progression from #000033 to #0080FF allows for strong visual differentiation, but avoid using adjacent colors for text/background.
  • Dodger Blue (#0080FF) has the best contrast against white, making it suitable for primary buttons or links.
  • Ensure large enough font sizes for readability when using the darkest blues for text.

Recommended combinations

Abyssal Ascent

Ideal for creating deep, immersive background gradients or layered dark UI elements, symbolizing depth and progression.

#000033 · #001F4C · #003F7F

Dynamic Focus

Use #003F7F as a primary section background, #0080FF for a prominent call-to-action, and #0060B2 for supporting elements.

#003F7F · #0080FF · #0060B2

Vibrant Interaction

Perfect for interactive components, with #001F4C as a base, #0060B2 for buttons, and #000033 for hover states or icons.

#001F4C · #0060B2 · #000033

CSS variables

:root {
  --ocean-depths-glimmer-2-1: #000033;
  --ocean-depths-glimmer-2-2: #001F4C;
  --ocean-depths-glimmer-2-3: #003F7F;
  --ocean-depths-glimmer-2-4: #0060B2;
  --ocean-depths-glimmer-2-5: #0080FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-depths-glimmer-2": {
        1: "#000033",
        2: "#001F4C",
        3: "#003F7F",
        4: "#0060B2",
        5: "#0080FF",
      }
    }
  }
}

Related searches

deep to bright blue gradientdynamic blue color paletteocean depth UI colorsvibrant dark blue schemeblue accent web design

Palette colors

Hex values

Color 1#000033
·
Color 2#001F4C
·
Color 3#003F7F
·
Color 4#0060B2
·
Color 5#0080FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.9:1Fail
3.2:1AA18
5.3:1AA
2
1.2:1Fail
1.6:1Fail
2.6:1Fail
4.3:1AA18
3
1.9:1Fail
1.6:1Fail
1.6:1Fail
2.7:1Fail
4
3.2:1AA18
2.6:1Fail
1.6:1Fail
1.7:1Fail
5
5.3:1AA
4.3:1AA18
2.7:1Fail
1.7:1Fail

Similar palettes

More like Ocean Depths Glimmer

View all cool
Abyssal Bioluminescence
Cobalt Ocean Depths
Deep Ocean Bloom
Deep Ocean Currents
Deep Ocean Trench
Deep Sea Siren