Back to palettes

Palette

Deep Ocean Abyss

Exploring the profound depths of the ocean with shades of dark, enigmatic blue.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#001F3F#003366#004080#0050A0#0060C0

Palette guide

How to use Deep Ocean Abyss

Overview

The Deep Ocean Abyss palette (version 5) explores the profound depths of the ocean with a series of classic, strong, and enigmatic blues. From the deepest #001F3F to the vibrant #0060C0, this palette offers a consistent and powerful blue gradient. It's ideal for designs that need to convey authority, trust, and a timeless professionalism. Designers and developers can leverage its straightforward progression to create reliable corporate identities, clear digital interfaces, or compelling educational materials that benefit from a strong, deep blue presence.

Best used for

  • Financial institution branding
  • Maritime industry websites
  • Corporate identity packages
  • Educational software UI
  • Tech company presentations
  • Government agency platforms

Suggested color roles

primary

Establish #001F3F as the authoritative primary color for branding and foundational elements, projecting strength.

secondary

Use #003366 for supporting sections and informational content, maintaining a cohesive deep blue theme.

accent

Apply #0060C0 as a clear, vibrant accent for calls to action, highlights, or interactive states, guiding user attention.

background

Employ #001F3F as a deep, professional background to create an immersive and trustworthy environment.

text

For optimal legibility on dark backgrounds, use #0060C0 or a crisp white. #0050A0 can work for headings.

Accessibility notes

  • Ensure #0060C0 text has excellent contrast against all darker blues in the palette for readability.
  • Avoid using #003366 text on #001F3F backgrounds for small body text due to potential low contrast.
  • Provide clear visual cues for interactive elements, possibly using a lighter blue for hover/active states.
  • Verify that all text and background combinations meet WCAG AA contrast guidelines, especially for critical information.

Recommended combinations

Corporate Core

Forms a solid, trustworthy base for corporate branding and main content areas.

#001F3F · #003366 · #004080

Bright Contrast

Highlights key information with a vibrant accent against a deep, stable background.

#001F3F · #0060C0 · #004080

Progressive Blue

Creates a smooth visual progression, suitable for step-by-step guides or data representation.

#003366 · #0050A0 · #0060C0

CSS variables

:root {
  --deep-ocean-abyss-5-1: #001F3F;
  --deep-ocean-abyss-5-2: #003366;
  --deep-ocean-abyss-5-3: #004080;
  --deep-ocean-abyss-5-4: #0050A0;
  --deep-ocean-abyss-5-5: #0060C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-abyss-5": {
        1: "#001F3F",
        2: "#003366",
        3: "#004080",
        4: "#0050A0",
        5: "#0060C0",
      }
    }
  }
}

Related searches

classic deep blue palettecorporate blue colorsreliable blue schemeocean blue brandingprofessional dark blue

Palette colors

Hex values

Color 1#001F3F
·
Color 2#003366
·
Color 3#004080
·
Color 4#0050A0
·
Color 5#0060C0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.6:1Fail
2.1:1Fail
2.7:1Fail
2
1.3:1Fail
1.2:1Fail
1.6:1Fail
2.1:1Fail
3
1.6:1Fail
1.2:1Fail
1.3:1Fail
1.7:1Fail
4
2.1:1Fail
1.6:1Fail
1.3:1Fail
1.3:1Fail
5
2.7:1Fail
2.1:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Deep Ocean Abyss

View all dark
Abyssal Midnight Reef
Deep Abyss Current
Deep Cobalt Plunge
Deep Ocean Trench
Deep Ocean Twilight
Deep Ocean Voyage