Back to palettes

Palette

Midnight Ocean Depths

Descend into the mysterious gloom of the deep ocean, where shades of blue grow increasingly profound.

Darkdark5 colors
More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Ocean Depths 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 Midnight Ocean Depths.

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

Data visualization

#000033#000066#000099#0000CC#0000FF

Palette guide

How to use Midnight Ocean Depths

Overview

The Midnight Ocean Depths palette is a stark, profound journey into pure, dark blues. Starting with the almost black #000033 and progressing through #000066, #000099, #0000CC, to the vibrant #0000FF, this collection offers designers and developers a powerful gradient for creating immersive and sophisticated experiences. Its monochromatic nature, focused solely on the blue spectrum, lends itself to projects demanding clarity, focus, and a sense of infinite space. Use this palette to convey a futuristic, high-tech, or deeply contemplative mood, with the brighter blues serving as striking accents against the profound darkness.

Best used for

  • Sci-fi game interfaces and environments
  • Luxury tech product branding
  • Virtual reality (VR) application design
  • Dark mode themes for operating systems
  • Astronomy and space exploration websites
  • Abstract art and digital installations

Suggested color roles

primary

Designate #000033 as the foundational dark base for large areas, evoking deep space or ocean floor.

secondary

Utilize #000066 and #000099 for structural elements, borders, or subtle background patterns to add dimension.

accent

Apply #0000FF for critical calls to action, notifications, or focal points to cut through the darkness with intensity.

background

Set #000033 as the primary background color for a truly immersive and deeply dark user experience.

text

For readability, use #0000FF or #0000CC for headlines, and a crisp white or near-white for body text against the dark blues.

Accessibility notes

  • Ensure sufficient contrast when pairing any two dark blues; prioritize readability for all text.
  • Use #0000FF as a high-contrast accent color to guide user attention effectively.
  • Avoid using small font sizes with intermediate blue shades like #000066 on a #000033 background.
  • Provide hover states with increased brightness or a border to differentiate interactive elements clearly.

Recommended combinations

Deep Gradient

For smooth, subtle transitions in backgrounds or large graphical elements, creating depth.

#000033 · #000066 · #000099

Vivid Highlight

To establish a strong hierarchy, with #0000FF drawing attention against the darkest blue.

#000033 · #0000CC · #0000FF

Subtle Layers

Perfect for complex dashboards or data visualizations where distinct, yet harmonious, layers are needed.

#000066 · #000099 · #000033

CSS variables

:root {
  --midnight-ocean-depths-1: #000033;
  --midnight-ocean-depths-2: #000066;
  --midnight-ocean-depths-3: #000099;
  --midnight-ocean-depths-4: #0000CC;
  --midnight-ocean-depths-5: #0000FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-ocean-depths": {
        1: "#000033",
        2: "#000066",
        3: "#000099",
        4: "#0000CC",
        5: "#0000FF",
      }
    }
  }
}

Related searches

dark blue color palettenavy blue web designdeep ocean colorsmysterious blue schemetech ui dark mode

Palette colors

Hex values

Color 1#000033
·
Color 2#000066
·
Color 3#000099
·
Color 4#0000CC
·
Color 5#0000FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.4:1Fail
1.8:1Fail
2.3:1Fail
2
1.1:1Fail
1.2:1Fail
1.6:1Fail
2.1:1Fail
3
1.4:1Fail
1.2:1Fail
1.3:1Fail
1.7:1Fail
4
1.8:1Fail
1.6:1Fail
1.3:1Fail
1.3:1Fail
5
2.3:1Fail
2.1:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Midnight Ocean Depths

View all Dark
Deep Sea Lumen
Arid Dusk Hues
Celestial Ocean Depth
Rainy City Nights
Abyssal Bioluminescence
Abyssal Light Organism