Back to palettes

Palette

Oceanic Depths Mystery

A deep dive into blues, transitioning from the dark abyss to glimmering surface waters.

darkdark5 colors
More dark 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

#001F3F#003C60#005980#007CA0#009ECC

Palette guide

How to use Oceanic Depths Mystery

Overview

The Oceanic Depths Mystery palette embarks on a deep dive into blues, transitioning from the dark abyss of #001F3F to the glimmering surface waters of #009ECC. Intermediate shades like #003C60, #005980, and #007CA0 provide a seamless and captivating gradient. This collection offers designers and developers a rich spectrum to create sophisticated, mysterious, and engaging digital experiences. Its harmonious flow is perfect for conveying depth, tranquility, and professionalism. The palette is particularly effective for projects that aim to balance dark, immersive backgrounds with areas of subtle brightness, ensuring a refined aesthetic that evokes the vastness and allure of the ocean's blue depths.

Best used for

  • Marine research institution websites
  • High-tech software interfaces
  • Documentary film branding
  • Elegant mobile application themes
  • Environmental awareness campaigns
  • Luxury brand digital presence

Suggested color roles

primary

Use #001F3F as the foundational, darkest element, providing a deep and stable base for the design.

secondary

Apply #003C60 to main content areas or secondary navigation, offering a slightly lighter yet still profound blue.

accent

Employ #009ECC for interactive elements, calls to action, or highlights to provide a vibrant, contrasting pop.

background

Utilize #001F3F for an immersive, dark background, allowing lighter elements to stand out prominently.

text

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

Accessibility notes

  • Ensure high contrast for text by pairing dark blues with white or extremely light text.
  • Avoid using adjacent shades for text and background; the contrast will likely be insufficient.
  • Test interactive elements for clear visual feedback beyond color alone, especially for users with color vision impairments.
  • The lightest blue, #009ECC, can serve as a background for dark text, offering good readability.

Recommended combinations

Abyss to Light

Ideal for creating a striking gradient in hero sections or visual storytelling.

#001F3F · #005980 · #009ECC

Deep Core

Perfect for establishing deep, cohesive background layers or navigation structures.

#001F3F · #003C60 · #005980

Surface Shine

Excellent for highlighting key information, interactive elements, or areas needing a lighter feel.

#007CA0 · #009ECC · #003C60

CSS variables

:root {
  --oceanic-depths-mystery-3-1: #001F3F;
  --oceanic-depths-mystery-3-2: #003C60;
  --oceanic-depths-mystery-3-3: #005980;
  --oceanic-depths-mystery-3-4: #007CA0;
  --oceanic-depths-mystery-3-5: #009ECC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-depths-mystery-3": {
        1: "#001F3F",
        2: "#003C60",
        3: "#005980",
        4: "#007CA0",
        5: "#009ECC",
      }
    }
  }
}

Related searches

deep blue website paletteoceanic gradient colorsmysterious blue UIdark to light blue schemeprofessional marine palette

Palette colors

Hex values

Color 1#001F3F
·
Color 2#003C60
·
Color 3#005980
·
Color 4#007CA0
·
Color 5#009ECC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.2:1Fail
3.5:1AA18
5.3:1AA
2
1.4:1Fail
1.5:1Fail
2.4:1Fail
3.7:1AA18
3
2.2:1Fail
1.5:1Fail
1.6:1Fail
2.5:1Fail
4
3.5:1AA18
2.4:1Fail
1.6:1Fail
1.5:1Fail
5
5.3:1AA
3.7:1AA18
2.5:1Fail
1.5:1Fail

Similar palettes

More like Oceanic Depths Mystery

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