Palette

Ocean Depth Mystery

Explores the hidden beauty and profound depths of the ocean's unexplored mysteries.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ocean Depth 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 Ocean Depth Mystery.

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

Data visualization

#0A0F1F#1C2B56#004F6F#2B65EC#310D27

Palette guide

How to use Ocean Depth Mystery

Overview

The Ocean Depth Mystery palette explores the hidden beauty and profound depths of the ocean's unexplored mysteries, offering a truly unique and dark aesthetic. It features the incredibly deep #0A0F1F and #1C2B56, which set a mysterious and sophisticated tone. The inclusion of the rich #004F6F and the striking electric blue #2B65EC provides captivating contrast, while the enigmatic #310D27 adds an unexpected, deep purple-brown undertone. This collection of hex codes is perfect for designers and developers aiming to create highly immersive, sophisticated, and dramatic visuals. It's ideal for projects that demand a sense of intrigue, luxury, and a deep, enigmatic allure across all design applications.

Best used for

Luxury lifestyle and fashion brands
High-end tech or gaming interfaces
Abstract art and digital media
Mysterious or suspense-themed content
Exclusive event branding
Film and entertainment industry visuals

Suggested color roles

primary

Utilize #0A0F1F for foundational elements, large backgrounds, or dominant branding, establishing an incredibly deep and mysterious base.

secondary

Employ #1C2B56 for supporting content blocks, subheadings, or secondary navigation, offering a subtle yet profound variation.

accent

Apply #2B65EC to highlight key information, interactive elements, or dramatic focal points, providing a powerful, electric contrast.

background

The deepest #0A0F1F or #310D27 creates an immersive, almost black background, perfect for high-impact designs.

text

For the dark backgrounds, white or a very light grey text is essential for readability. On #2B65EC, use #0A0F1F or black for clear and accessible text.

Accessibility notes

White or light grey text on #0A0F1F, #1C2B56, #004F6F, and #310D27 should provide excellent contrast.
Ensure sufficient contrast for dark text on #2B65EC; black or a very dark blue is highly recommended.
Avoid using #1C2B56 for text on #004F6F background without rigorous contrast testing due to their similar depth.
Consider larger font sizes for any text on the darker shades to enhance legibility, even with good contrast.

Recommended combinations

Abyssal Contrast

Creates a dramatic, high-impact look, ideal for hero sections or call-to-action elements where #2B65EC truly pops.

#0A0F1F · #2B65EC · #1C2B56

Enigmatic Depth

Excellent for creating textured, dark backgrounds or subtle layered elements, evoking deep, unexplored spaces.

#0A0F1F · #1C2B56 · #310D27

Mysterious Glow

Use #0A0F1F as a base, #004F6F for content, and #2B65EC for vibrant, almost bioluminescent accents or interactive elements.

#004F6F · #2B65EC · #0A0F1F

CSS variables

:root {
  --ocean-depth-mystery-1: #0A0F1F;
  --ocean-depth-mystery-2: #1C2B56;
  --ocean-depth-mystery-3: #004F6F;
  --ocean-depth-mystery-4: #2B65EC;
  --ocean-depth-mystery-5: #310D27;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-depth-mystery": {
        1: "#0A0F1F",
        2: "#1C2B56",
        3: "#004F6F",
        4: "#2B65EC",
        5: "#310D27",
      }
    }
  }
}

Hex values

Color 1#0A0F1F

Color 2#1C2B56

Color 3#004F6F

Color 4#2B65EC

Color 5#310D27

Accessibility

Contrast checker

1.4:1Fail

2.1:1Fail

3.8:1AA18

1.1:1Fail

1.4:1Fail

1.5:1Fail

2.7:1Fail

1.3:1Fail

2.1:1Fail

1.5:1Fail

1.8:1Fail

1.9:1Fail

3.8:1AA18

2.7:1Fail

1.8:1Fail

3.4:1AA18

1.1:1Fail

1.3:1Fail

1.9:1Fail

3.4:1AA18

Similar palettes

More like Ocean Depth Mystery