Palette

Ocean Depths Glimmer

A deep plunge into the vivid blues of the ocean, where sunlight rarely reaches but still shimmers.

coolcalm5 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

#0B3D91#1C5ECB#6A9CF1#082F72#1449A5

Palette guide

How to use Ocean Depths Glimmer

Overview

The Ocean Depths Glimmer palette (variant 3) presents a rich, vivid exploration of blues, from deep, intense shades to a captivating, lighter highlight, evoking the ocean's vibrant yet profound character. It features a strong Indigo (#0B3D91) and a striking Royal Blue (#1C5ECB), providing a robust foundation. A luminous Cornflower Blue (#6A9CF1) serves as a bright, eye-catching accent, while a darker Prussian Blue (#082F72) and a classic Navy (#1449A5) round out the deeper tones. This palette is ideal for designers and developers aiming to create visually impactful, trustworthy, and energetic interfaces, branding, or digital content that feels both authoritative and inviting.

Best used for

Corporate and educational branding
Sports team or athletic wear design
Government or public service websites
Digital marketing campaigns
Interactive data dashboards
Fintech application interfaces

Suggested color roles

primary

Indigo (#0B3D91) for major headers, primary navigation, or prominent branding elements, conveying authority.

secondary

Royal Blue (#1C5ECB) for main content areas, important sections, or large graphical elements, adding vibrancy.

accent

Cornflower Blue (#6A9CF1) to highlight calls-to-action, interactive buttons, or key information, providing a clear focal point.

background

Navy (#1449A5) for content panels or secondary backgrounds, offering a stable and professional base.

text

Use white or very light grey for text on the darker blues, and a deep charcoal or black for text on #6A9CF1.

Accessibility notes

#0B3D91, #1C5ECB, #082F72, and #1449A5 require light-colored text (e.g., white) for WCAG AA contrast.
#6A9CF1 is a lighter blue; ensure dark text (e.g., black or dark navy) provides sufficient contrast.
Avoid using #082F72 and #1449A5 together for text/background due to their similar dark tones.
Test all interactive elements for sufficient color contrast in both normal and focus states.

Recommended combinations

Vivid Contrast

Use #0B3D91 as a deep background, #6A9CF1 for bright calls-to-action, and #1C5ECB for supporting text or elements.

#0B3D91 · #6A9CF1 · #1C5ECB

Professional Depth

Create a sophisticated layered effect with #082F72 as the base, #1449A5 for content panels, and #0B3D91 for important headings.

#082F72 · #1449A5 · #0B3D91

Energetic Flow

Ideal for interactive sections, with #1C5ECB as a background, #6A9CF1 for primary buttons, and #0B3D91 for secondary links.

#1C5ECB · #6A9CF1 · #0B3D91

CSS variables

:root {
  --ocean-depths-glimmer-3-1: #0B3D91;
  --ocean-depths-glimmer-3-2: #1C5ECB;
  --ocean-depths-glimmer-3-3: #6A9CF1;
  --ocean-depths-glimmer-3-4: #082F72;
  --ocean-depths-glimmer-3-5: #1449A5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-depths-glimmer-3": {
        1: "#0B3D91",
        2: "#1C5ECB",
        3: "#6A9CF1",
        4: "#082F72",
        5: "#1449A5",
      }
    }
  }
}

Hex values

Color 1#0B3D91

Color 2#1C5ECB

Color 3#6A9CF1

Color 4#082F72

Color 5#1449A5

Accessibility

Contrast checker

1.7:1Fail

3.7:1AA18

1.3:1Fail

1.2:1Fail

1.7:1Fail

2.2:1Fail

2.1:1Fail

1.4:1Fail

3.7:1AA18

2.2:1Fail

4.6:1AA

3:1AA18

1.3:1Fail

2.1:1Fail

4.6:1AA

1.5:1Fail

1.2:1Fail

1.4:1Fail

3:1AA18

1.5:1Fail

Similar palettes

More like Ocean Depths Glimmer

Abyssal Current Glide

Azure Abyss Calm

Azure Canopy Light