Back to palettes

Palette

Deep Ocean Mariana

Plunge into the mysterious, crushing depths of the ocean's deepest trench, dark and profoundly blue.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Ocean Mariana 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 Ocean Mariana.

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

Data visualization

#001F3F#003366#004080#002A52#0059B2

Palette guide

How to use Deep Ocean Mariana

Overview

The Deep Ocean Mariana palette plunges into the mysterious, crushing depths with a profound range of blues. This collection, featuring #001F3F, #003366, and #004080, offers designers a powerful foundation for immersive and sophisticated projects. Ideal for evoking a sense of depth, mystery, and tranquility, it's perfect for luxury brands, high-tech interfaces, or any design seeking a dark, elegant aesthetic. The contrasting #0059B2 provides a subtle yet impactful highlight, guiding users through deep digital landscapes. Developers will appreciate the consistent dark base for creating cohesive dark mode experiences or dramatic visual narratives.

Best used for

  • Luxury brand identity and websites
  • High-tech interfaces and dashboards
  • Immersive digital experiences and games
  • Educational content about marine life or space
  • Elegant dark mode themes
  • Cinematic title sequences

Suggested color roles

primary

Use #001F3F as the foundational dark blue for main backgrounds or large sections, providing a sense of depth and stability.

secondary

Employ #003366 for supporting elements, sidebars, or card backgrounds to add subtle variation without losing the dark aesthetic.

accent

Apply #0059B2 for interactive elements, calls to action, or key information to draw attention effectively against the deeper blues.

background

The deepest #001F3F or #002A52 provides an excellent canvas for dark mode, ensuring content truly stands out.

text

Pair with white or a very light grey (e.g., #E0E0E0) for optimal readability and a luminous contrast on all dark blues.

Accessibility notes

  • Ensure sufficient contrast when pairing any two colors from the palette; white or light grey text is crucial on all shades.
  • Avoid using #002A52 as a background for small text, as it may lack sufficient contrast with other dark blues.
  • Utilize #0059B2 for interactive elements to ensure they meet WCAG contrast guidelines against darker backgrounds.
  • For large blocks of body text, always use a high-contrast color like white against the darker palette colors.

Recommended combinations

Deep Dive

Creates a strong, contrasting look suitable for headers and key informational blocks.

#001F3F · #0059B2 · #002A52

Subtle Depth

Excellent for gradients or layered elements that require a smooth transition of depth.

#001F3F · #003366 · #004080

Accent Wave

Highlights interactive components or important details with a vibrant, yet cohesive, pop.

#002A52 · #0059B2 · #003366

CSS variables

:root {
  --deep-ocean-mariana-2-1: #001F3F;
  --deep-ocean-mariana-2-2: #003366;
  --deep-ocean-mariana-2-3: #004080;
  --deep-ocean-mariana-2-4: #002A52;
  --deep-ocean-mariana-2-5: #0059B2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-mariana-2": {
        1: "#001F3F",
        2: "#003366",
        3: "#004080",
        4: "#002A52",
        5: "#0059B2",
      }
    }
  }
}

Related searches

deep blue color schemeocean inspired palettedark blue web designmysterious color combinationsmarine UI colors

Palette colors

Hex values

Color 1#001F3F
·
Color 2#003366
·
Color 3#004080
·
Color 4#002A52
·
Color 5#0059B2
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.6:1Fail
1.1:1Fail
2.4:1Fail
2
1.3:1Fail
1.2:1Fail
1.1:1Fail
1.8:1Fail
3
1.6:1Fail
1.2:1Fail
1.4:1Fail
1.5:1Fail
4
1.1:1Fail
1.1:1Fail
1.4:1Fail
2.1:1Fail
5
2.4:1Fail
1.8:1Fail
1.5:1Fail
2.1:1Fail

Similar palettes

More like Deep Ocean Mariana

View all dark
Abyss Glow Deep
Abyssal Light Veil
Abyssal Luminous Depths
Deep Ocean Abyss
Deep Ocean Ridge
Deep Ocean Trench