Back to palettes

Palette

Deep Fathom Mystery

Plunge into the enigmatic, crushing blues of the deep ocean, where secrets lie in silent depths.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Fathom 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 Deep Fathom Mystery.

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

Data visualization

#00021A#051A3C#0F3260#1E5088#3776B0

Palette guide

How to use Deep Fathom Mystery

Overview

The Deep Fathom Mystery palette plunges into the enigmatic blues of the deepest ocean, offering a profound and sophisticated spectrum. It begins with the almost black, midnight blue of #00021A, deepening through the rich #051A3C and the intense #0F3260. The palette then ascends to the more visible, yet still deep, #1E5088, culminating in the striking, vibrant blue of #3776B0. This collection is perfect for designs seeking to evoke mystery, depth, or cutting-edge technology. Its powerful gradient allows for dramatic visual storytelling, from abstract digital art to serious corporate interfaces.

Best used for

  • Cybersecurity or data analytics platforms
  • Sci-fi themed games or websites
  • Luxury automotive branding
  • Astronomy or space exploration projects
  • High-tech corporate identities
  • Abstract art installations

Suggested color roles

primary

Use #0F3260 for main brand elements and large sections, conveying authority and depth.

secondary

#1E5088 is excellent for subheadings, navigation, or interactive components, providing a clear focal point.

accent

#3776B0 offers a bright, impactful accent for calls-to-action or key information, drawing attention.

background

#00021A provides an incredibly deep, dark canvas, ideal for creating a dramatic or mysterious atmosphere.

text

White or very light grey text (e.g., #EEEEEE) provides optimal contrast on #00021A, #051A3C, and #0F3260. For lighter backgrounds, a dark navy like #051A3C is effective.

Accessibility notes

  • Ensure #3776B0 text has sufficient contrast against #1E5088 or #0F3260 backgrounds.
  • White text on #00021A and #051A3C provides excellent readability.
  • Avoid low-contrast pairings like #1E5088 text on #0F3260 backgrounds for small text.
  • Always check contrast ratios for all text and interactive elements to meet readability standards.

Recommended combinations

Midnight Depths

Ideal for creating profound, dark backgrounds and primary elements, establishing mystery.

#00021A · #051A3C · #0F3260

Ascending Light

Excellent for gradients, progress indicators, or representing a reveal of information.

#0F3260 · #1E5088 · #3776B0

Tech Accent

Combine a dark base with a strong mid-tone and a vibrant accent for modern UI.

#00021A · #1E5088 · #3776B0

CSS variables

:root {
  --deep-fathom-mystery-1: #00021A;
  --deep-fathom-mystery-2: #051A3C;
  --deep-fathom-mystery-3: #0F3260;
  --deep-fathom-mystery-4: #1E5088;
  --deep-fathom-mystery-5: #3776B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-fathom-mystery": {
        1: "#00021A",
        2: "#051A3C",
        3: "#0F3260",
        4: "#1E5088",
        5: "#3776B0",
      }
    }
  }
}

Related searches

deep navy color schemedark blue mystery palettetech blue brandingocean abyss colorssophisticated dark UI

Palette colors

Hex values

Color 1#00021A
·
Color 2#051A3C
·
Color 3#0F3260
·
Color 4#1E5088
·
Color 5#3776B0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
2.5:1Fail
4.3:1AA18
2
1.2:1Fail
1.3:1Fail
2.1:1Fail
3.6:1AA18
3
1.6:1Fail
1.3:1Fail
1.6:1Fail
2.7:1Fail
4
2.5:1Fail
2.1:1Fail
1.6:1Fail
1.7:1Fail
5
4.3:1AA18
3.6:1AA18
2.7:1Fail
1.7:1Fail

Similar palettes

More like Deep Fathom Mystery

View all dark
Oceanic Abyss
Abyssal Trench Mystery
Abyssal Trench Mystery
Bioluminescent Deep Trench
Deep Ocean Abyss
Deep Ocean Abyss