Back to palettes

Palette

Oceanic Depths Mystery

Explore the profound, dark blues of the ocean's unexplored trenches, full of wonder.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#001C3A#0C3C6B#1A649E#4293C2#072C50

Palette guide

How to use Oceanic Depths Mystery

Overview

The Oceanic Depths Mystery palette delves into the profound, dark blues of the ocean's unexplored trenches, full of wonder and enigma. Featuring a captivating range from the deep #001C3A and #0C3C6B to the more vivid #1A649E and #4293C2, alongside an anchoring #072C50, this palette offers immense versatility. Designers and developers can leverage these hues to create sophisticated, immersive, and trustworthy digital experiences. Its rich, cool tones are perfect for conveying professionalism, stability, and a sense of discovery. The distinct yet harmonious blues provide excellent opportunities for visual hierarchy, making it ideal for projects that seek to evoke the majestic and mysterious allure of the deep sea.

Best used for

  • Scientific research portals
  • Luxury watch brand websites
  • High-tech product showcases
  • Documentary streaming platforms
  • Corporate annual reports
  • Elegant mobile app interfaces

Suggested color roles

primary

Use #001C3A as the foundational, darkest element for backgrounds or primary sections, creating a profound depth.

secondary

Apply #0C3C6B to secondary content areas or navigation, providing a slightly lighter yet still deep blue.

accent

Employ #4293C2 for interactive elements, calls to action, or key highlights to provide a clear, inviting contrast.

background

Utilize #072C50 for a dark, anchoring background that evokes stability and allows lighter elements to pop.

text

For optimal readability, use white or a very light gray like #F0F0F0 for text on all darker blues. A dark charcoal works on #4293C2.

Accessibility notes

  • Always use white or very light text on the darker blues (#001C3A, #0C3C6B, #072C50) to ensure sufficient contrast.
  • Avoid pairing adjacent dark blues for text and background; contrast will be too low for readability.
  • Ensure interactive elements have clear visual states (e.g., hover, focus) beyond color alone.
  • The lighter #4293C2 can be a background for dark text, providing good contrast and legibility.

Recommended combinations

Deep Exploration

Ideal for creating layered backgrounds or sections that gradually reveal information.

#001C3A · #0C3C6B · #1A649E

Surface Sparkle

Excellent for highlighting key features, interactive elements, or a refreshing contrast against deep tones.

#4293C2 · #1A649E · #072C50

Trench Anchor

Provides a strong, stable base with a bright accent for important calls to action.

#072C50 · #001C3A · #4293C2

CSS variables

:root {
  --oceanic-depths-mystery-1: #001C3A;
  --oceanic-depths-mystery-2: #0C3C6B;
  --oceanic-depths-mystery-3: #1A649E;
  --oceanic-depths-mystery-4: #4293C2;
  --oceanic-depths-mystery-5: #072C50;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-depths-mystery": {
        1: "#001C3A",
        2: "#0C3C6B",
        3: "#1A649E",
        4: "#4293C2",
        5: "#072C50",
      }
    }
  }
}

Related searches

deep sea blue palettemarine blue color schememystery ocean UIdark blue cool tonesprofessional deep blue

Palette colors

Hex values

Color 1#001C3A
·
Color 2#0C3C6B
·
Color 3#1A649E
·
Color 4#4293C2
·
Color 5#072C50
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.7:1Fail
5:1AA
1.2:1Fail
2
1.5:1Fail
1.8:1Fail
3.3:1AA18
1.3:1Fail
3
2.7:1Fail
1.8:1Fail
1.8:1Fail
2.3:1Fail
4
5:1AA
3.3:1AA18
1.8:1Fail
4.2:1AA18
5
1.2:1Fail
1.3:1Fail
2.3:1Fail
4.2:1AA18

Similar palettes

More like Oceanic Depths Mystery

View all cool
Deep Ocean Trench
Ocean Depths Echo
Ocean Depths Glimmer
Ocean Depths Glimmer
Oceanic Depths Mystery
Abyssal Bioluminescence