Back to palettes

Palette

Midnight Indigo Depths

Explores the profound and mysterious shades found in the deepest parts of the ocean at night.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A2E44#3B5A7C#2E4B6E#0E1A2C#5C8BCF

Palette guide

How to use Midnight Indigo Depths

Overview

The Midnight Indigo Depths palette explores the profound and mysterious shades found in the deepest parts of the ocean at night. This collection of rich, dark blues and indigos, including the foundational #0E1A2C and #1A2E44, through to the vibrant #5C8BCF, offers designers and developers a powerful tool for conveying mystery, sophistication, and depth. The mid-tones like #3B5A7C and #2E4B6E provide crucial versatility, allowing for layered designs and subtle visual hierarchies. Ideal for projects that aim to evoke a sense of the unknown or the majestic vastness of the sea, this palette is both dramatic and elegantly refined, with a strong emphasis on cool, immersive tones.

Best used for

  • Maritime or ocean-themed branding
  • Adventure game interfaces and environments
  • Mystery novel covers and digital art
  • Sophisticated tech interfaces and dark modes
  • Environmental awareness campaigns
  • Luxury travel or exploration websites

Suggested color roles

primary

Utilize #0E1A2C as the foundational background color to establish profound depth and mystery.

secondary

Apply #1A2E44 or #2E4B6E for supporting sections, subheadings, or subtle background patterns.

accent

Employ #5C8BCF for bright highlights, interactive elements, or key information to draw attention.

background

The deepest #0E1A2C provides a dramatic and immersive dark canvas, perfect for a mysterious feel.

text

Pair light text colors like #5C8BCF or pure white (e.g., #FFFFFF) against the darker backgrounds for optimal legibility.

Accessibility notes

  • Ensure sufficient contrast when using #3B5A7C or #2E4B6E for text on the darkest backgrounds like #0E1A2C.
  • Prioritize #5C8BCF for all essential text and interactive elements to meet WCAG contrast guidelines.
  • Avoid using #1A2E44 for small text on #0E1A2C; choose a lighter, more contrasting color for better readability.
  • Test color combinations for interactive elements, ensuring states (hover, active) maintain distinct visibility.

Recommended combinations

Deep Sea Base

Excellent for primary dark backgrounds with subtle depth and a bright, impactful accent for calls to action.

#0E1A2C · #1A2E44 · #5C8BCF

Ocean Layers

Creates a smooth, layered effect, ideal for backgrounds or UI components that need subtle visual separation.

#1A2E44 · #2E4B6E · #3B5A7C

Indigo Beacon

Provides strong contrast for key information or visual elements against a deep, stable base.

#0E1A2C · #3B5A7C · #5C8BCF

CSS variables

:root {
  --midnight-indigo-depths-1: #1A2E44;
  --midnight-indigo-depths-2: #3B5A7C;
  --midnight-indigo-depths-3: #2E4B6E;
  --midnight-indigo-depths-4: #0E1A2C;
  --midnight-indigo-depths-5: #5C8BCF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-indigo-depths": {
        1: "#1A2E44",
        2: "#3B5A7C",
        3: "#2E4B6E",
        4: "#0E1A2C",
        5: "#5C8BCF",
      }
    }
  }
}

Related searches

deep indigo paletteocean night colorsmysterious blue schemedark maritime themeadventurous tech UI

Palette colors

Hex values

Color 1#1A2E44
·
Color 2#3B5A7C
·
Color 3#2E4B6E
·
Color 4#0E1A2C
·
Color 5#5C8BCF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
1.5:1Fail
1.3:1Fail
4:1AA18
2
1.9:1Fail
1.3:1Fail
2.4:1Fail
2.1:1Fail
3
1.5:1Fail
1.3:1Fail
2:1Fail
2.6:1Fail
4
1.3:1Fail
2.4:1Fail
2:1Fail
5:1AA
5
4:1AA18
2.1:1Fail
2.6:1Fail
5:1AA

Similar palettes

More like Midnight Indigo Depths

View all dark
Abyss Gaze
Abyssal Bioluminescent Glow
Abyssal Coral Glow
Abyssal Depths
Abyssal Luminous Depths
Abyssal Rift Shimmer