Palette

Deep Ocean Glimmer

A mysterious gradient from dark to light, reflecting the hidden beauty of the ocean's depths.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A1D34#1F3A5F#3A6FA6#6FA6DA#A3D4FF

Palette guide

How to use Deep Ocean Glimmer

Overview

The Deep Ocean Glimmer palette evokes the profound mystery and serene beauty of the ocean's depths, transitioning from a dark, abyssal #0A1D34 to a luminous, surface-reflecting #A3D4FF. This sophisticated blue gradient offers designers a versatile range to create immersive digital experiences or elegant print materials. With its rich blues like the mid-tone #3A6FA6 and the vibrant #6FA6DA, this palette is ideal for projects requiring depth, tranquility, and a touch of elegance. Developers can leverage the distinct contrast between the darkest #0A1D34 and the lighter #A3D4FF for clear UI hierarchies, ensuring a consistent visual flow. The harmonious progression, including #1F3A5F, makes it excellent for branding, web design, and thematic illustrations that aim to convey trust and sophistication.

Best used for

Marine-themed websites and mobile applications
Luxury brand identity and corporate designs
Financial technology (FinTech) interfaces for trust
Educational content related to oceans or space
Elegant event invitations or digital presentations
Digital art and illustrations requiring depth and mood

Suggested color roles

primary

#0A1D34 - Ideal for dominant backgrounds, large headers, or foundational elements to establish a profound, dark aesthetic.

secondary

#1F3A5F - Excellent for sub-headers, navigation bars, or significant UI components, providing depth without being overly dark.

accent

#6FA6DA - Use sparingly for calls to action, interactive elements, or key data visualizations that need to pop and guide user attention.

background

#0A1D34 - Serves as a deep, calming backdrop for dark-themed interfaces, allowing lighter elements to truly shine. Alternatively, #A3D4FF can serve as a very light background for specific sections or cards.

text

#A3D4FF - Provides excellent readability against darker blues like #0A1D34 and #1F3A5F, ensuring clear content presentation. Pure white can also be used for maximum contrast.

Accessibility notes

Ensure text in #A3D4FF on #0A1D34 background meets WCAG AA or AAA contrast standards for optimal readability.
Verify sufficient contrast for interactive elements using #6FA6DA on darker backgrounds like #1F3A5F.
Avoid using mid-tones such as #3A6FA6 for small body text on similarly dark backgrounds to prevent legibility issues.
Utilize the lightest shades (#A3D4FF) for iconography and critical UI elements against the deepest blues for clear distinction.

Recommended combinations

Abyssal Depth

Creating a strong, sophisticated dark theme with a very light accent for text or key elements, ideal for immersive dashboards.

#0A1D34 · #1F3A5F · #A3D4FF

Oceanic Flow

Ideal for smooth transitions, data charts, or layered interface elements that require a gentle progression of blues and visual depth.

#1F3A5F · #3A6FA6 · #6FA6DA

Glimmering Accent

For dark backgrounds with a bright, eye-catching accent and a very light secondary element, perfect for calls-to-action or highlighted content.

#0A1D34 · #6FA6DA · #A3D4FF

CSS variables

:root {
  --deep-ocean-glimmer-1: #0A1D34;
  --deep-ocean-glimmer-2: #1F3A5F;
  --deep-ocean-glimmer-3: #3A6FA6;
  --deep-ocean-glimmer-4: #6FA6DA;
  --deep-ocean-glimmer-5: #A3D4FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-glimmer": {
        1: "#0A1D34",
        2: "#1F3A5F",
        3: "#3A6FA6",
        4: "#6FA6DA",
        5: "#A3D4FF",
      }
    }
  }
}

Hex values

Color 1#0A1D34

Color 2#1F3A5F

Color 3#3A6FA6

Color 4#6FA6DA

Color 5#A3D4FF

Accessibility

Contrast checker

1.5:1Fail

3.2:1AA18

6.6:1AA

10.8:1AAA

1.5:1Fail

2.2:1Fail

4.5:1AA18

7.3:1AAA

3.2:1AA18

2.2:1Fail

2:1Fail

3.4:1AA18

6.6:1AA

4.5:1AA18

2:1Fail

1.6:1Fail

10.8:1AAA

7.3:1AAA

3.4:1AA18

1.6:1Fail

Similar palettes

More like Deep Ocean Glimmer

View all dark

Abyss Gaze

Abyssal Bioluminescence

Abyssal Bioluminescent Glow

Abyssal Coral Glow

Abyssal Depths

Abyssal Midnight Reef