Back to palettes

Palette

Deep Ocean Mariana

Profound, inky blues reminiscent of the vast, unexplored depths of the ocean's Mariana Trench.

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

#000033#000066#001A4D#000022#001030

Palette guide

How to use Deep Ocean Mariana

Overview

The Deep Ocean Mariana palette plunges into the profound, mysterious depths with a collection of ultra-dark blues. Dominated by shades like #000033, #000066, and the slightly greener #001A4D, this palette evokes the vast, unexplored abyss. Designers will find these colors perfect for creating sophisticated, high-contrast interfaces or immersive digital experiences where a sense of gravitas and tranquility is desired. Developers can leverage these deep tones to establish a strong brand presence, particularly when paired with bright accents. The subtle variations, including #000022 and #001030, offer depth without sacrificing the overall dark, enigmatic mood, making it ideal for backgrounds or sophisticated UI elements.

Best used for

  • High-end luxury brand websites and applications
  • Immersive gaming interfaces and dark mode themes
  • Scientific exploration or space-themed digital content
  • Sophisticated corporate presentations and dashboards
  • Abstract art installations or digital galleries
  • Night sky photography or astronomy-related platforms

Suggested color roles

primary

Use #000033 for dominant UI elements, headers, or primary brand color to establish a deep, authoritative presence.

secondary

Apply #000066 for sub-headers, navigation elements, or secondary sections to add depth and visual hierarchy without straying from the dark theme.

accent

Leverage #001A4D sparingly for subtle highlights, interactive elements, or icons where a slight shift in hue adds a touch of distinction within the dark palette.

background

Employ #000022 as the primary background color for a truly immersive and profound dark mode experience, creating a canvas of deep abyss.

text

For optimal readability, pair these dark blues with a bright, near-white text like #F0F0F0 or a light silver #C0C0C0 to ensure strong contrast.

Accessibility notes

  • Ensure sufficient contrast for all text against these extremely dark backgrounds; aim for AAA contrast ratios where possible.
  • Avoid using #000022 for text on #000033 backgrounds as the contrast will be insufficient for readability.
  • When using #001A4D as an accent, verify its contrast against both primary and secondary background colors, especially for interactive elements.
  • Provide clear focus states for interactive components, perhaps using a very bright, non-palette color for high visibility.

Recommended combinations

Abyssal Depths

Ideal for creating a multi-layered dark background or UI elements where #000022 serves as the deepest base, with #000033 for panels and #000066 for subtle borders or active states.

#000022 · #000033 · #000066

Submarine Glow

Perfect for digital interfaces that require a slight variation in tone; #001030 for the main body, #000033 for prominent sections, and #001A4D for subtle accentuation or interactive components.

#001030 · #000033 · #001A4D

Mariana Gradient

Excellent for visual gradients or distinct sectioning in dashboards, using #000022 as the darkest point, #000066 for mid-tones, and #001A4D to introduce a unique, subtle hue.

#000022 · #000066 · #001A4D

CSS variables

:root {
  --deep-ocean-mariana-1: #000033;
  --deep-ocean-mariana-2: #000066;
  --deep-ocean-mariana-3: #001A4D;
  --deep-ocean-mariana-4: #000022;
  --deep-ocean-mariana-5: #001030;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-mariana": {
        1: "#000033",
        2: "#000066",
        3: "#001A4D",
        4: "#000022",
        5: "#001030",
      }
    }
  }
}

Related searches

deep dark blue color schemenavy blue web design palettemysterious UI colorsdark mode ocean themeelegant deep blue brand colors

Palette colors

Hex values

Color 1#000033
·
Color 2#000066
·
Color 3#001A4D
·
Color 4#000022
·
Color 5#001030
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.2:1Fail
1:1Fail
1.1:1Fail
2
1.1:1Fail
1.1:1Fail
1.2:1Fail
1.1:1Fail
3
1.2:1Fail
1.1:1Fail
1.2:1Fail
1.1:1Fail
4
1:1Fail
1.2:1Fail
1.2:1Fail
1.1:1Fail
5
1.1:1Fail
1.1:1Fail
1.1:1Fail
1.1:1Fail

Similar palettes

More like Deep Ocean Mariana

View all dark
Abyssal Reef Shadow
Abyssal Trench Creatures
Deep Ocean Abyss
Deep Ocean Trench
Deep Sea Abyss
Deep Sea Current