Back to palettes

Palette

Oceanic Abyss Mystery

Delves into the profound and enigmatic depths of the ocean, shrouded in deep blues.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Oceanic Abyss Mystery 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 Oceanic Abyss Mystery.

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

Data visualization

#001F3F#003366#004D99#0066CC#0080FF

Palette guide

How to use Oceanic Abyss Mystery

Overview

The Oceanic Abyss Mystery palette delves into the profound and enigmatic depths of the ocean, offering a powerful spectrum of deep, rich blues. Starting with #001F3F and progressing through #003366 to the vibrant #0080FF, this collection creates a sense of serene depth and boundless possibility. Designers can leverage these hex codes to evoke trust, stability, and a modern aesthetic, perfect for corporate branding, educational platforms, or any digital interface that benefits from a professional yet engaging feel. Developers will find this palette ideal for creating clean, accessible UI designs, data dashboards, or projects requiring a strong, cohesive blue theme with excellent visual hierarchy.

Best used for

  • Corporate website design
  • Educational technology platforms
  • Financial services branding
  • Government or institutional websites
  • Data analytics dashboards
  • Professional mobile applications

Suggested color roles

primary

#001F3F - The deepest navy, excellent for establishing a strong, professional base for backgrounds or primary structural elements.

secondary

#003366 - A rich, traditional navy, ideal for content panels, navigation bars, or secondary headers to add depth.

accent

#0066CC - A vibrant, clear blue perfect for interactive elements, call-to-action buttons, or key informational highlights to draw attention.

background

#001F3F - Provides a professional, deep blue canvas that supports readability and a sense of calm authority.

text

#0080FF - This brighter blue can be used for strong headings or links, while a lighter color like white or a very light grey (#F0F0F0) is recommended for body text.

Accessibility notes

  • For body text, use white or a very light grey (#F0F0F0) to ensure high contrast against #001F3F, #003366, and #004D99 for WCAG AA compliance.
  • #0080FF text on #001F3F background likely has good contrast, but verify against WCAG standards.
  • Avoid using mid-range blues like #004D99 for text on #003366 backgrounds due to insufficient contrast.
  • Ensure interactive elements using #0066CC are clearly distinguishable from surrounding blues.

Recommended combinations

Classic Navy

Deepest blue for background, next blue for panels, and light grey for readable text.

#001F3F · #003366 · #004D99

Dynamic Depths

Use #003366 as a base, #0066CC for interactive elements, and #0080FF for vibrant highlights or links.

#003366 · #0066CC · #0080FF

Professional Blue

Primary dark blue, a mid-tone for key content areas, and light text for legibility.

#001F3F · #004D99 · #0066CC

CSS variables

:root {
  --oceanic-abyss-mystery-1: #001F3F;
  --oceanic-abyss-mystery-2: #003366;
  --oceanic-abyss-mystery-3: #004D99;
  --oceanic-abyss-mystery-4: #0066CC;
  --oceanic-abyss-mystery-5: #0080FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-abyss-mystery": {
        1: "#001F3F",
        2: "#003366",
        3: "#004D99",
        4: "#0066CC",
        5: "#0080FF",
      }
    }
  }
}

Related searches

deep blue professional palettenavy blue corporate designoceanic blue web colorsreliable blue ui uxgraduated blue scheme

Palette colors

Hex values

Color 1#001F3F
·
Color 2#003366
·
Color 3#004D99
·
Color 4#0066CC
·
Color 5#0080FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2:1Fail
3:1Fail
4.4:1AA18
2
1.3:1Fail
1.5:1Fail
2.3:1Fail
3.3:1AA18
3
2:1Fail
1.5:1Fail
1.5:1Fail
2.2:1Fail
4
3:1Fail
2.3:1Fail
1.5:1Fail
1.5:1Fail
5
4.4:1AA18
3.3:1AA18
2.2:1Fail
1.5:1Fail

Similar palettes

More like Oceanic Abyss Mystery

View all dark
Abyss Glow Deep
Abyssal Light Veil
Abyssal Luminous Depths
Deep Ocean Mariana
Indigo Ink Shallows
Abyss Gaze