Back to palettes

Palette

Indigo Ocean Depths

Explores the profound and mysterious world of the deep indigo ocean, from surface shimmers to inky blackness.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000033#1A1A52#333366#4D4D80#666699

Palette guide

How to use Indigo Ocean Depths

Overview

The 'Indigo Ocean Depths' palette explores the profound and mysterious world of the deep indigo ocean, ranging from surface shimmers to inky blackness. This monochrome collection, featuring the near-black #000033, the deep #1A1A52, the rich #333366, and the robust #4D4D80, culminating in the softer #666699, provides a cohesive and powerful gradient. Designers can leverage these hues to evoke mystery, stability, and a sense of boundless depth, perfect for projects requiring a sophisticated dark aesthetic. Developers will find this palette excellent for crafting immersive dark mode interfaces and branding that feels both profound and elegantly understated.

Best used for

  • Dark mode UI themes for professional applications
  • Luxury branding for high-tech or security services
  • Gaming interfaces or cinematic title sequences
  • Abstract art or digital illustration with deep themes
  • E-commerce platforms for premium, exclusive items
  • Architectural visualization or conceptual design

Suggested color roles

primary

Utilize #000033 as the foundational deep indigo for backgrounds or large containers, establishing profound depth.

secondary

Employ #1A1A52 for primary navigation, card backgrounds, or prominent sections, offering a slightly lighter dark contrast.

accent

Apply #666699 sparingly for interactive elements, highlights, or critical information, providing a subtle, luminous focal point.

background

The deepest shades, #000033 or #1A1A52, are perfect for a dark, immersive background. Ensure white text for readability.

text

Pure white or a very light grey provides optimal readability on the dark backgrounds. For secondary text, #666699 can be used on darker hues.

Accessibility notes

  • Ensure white text on #000033 or #1A1A52 meets WCAG AAA contrast for optimal readability in dark mode.
  • Avoid using #333366 or #4D4D80 for small text on backgrounds like #1A1A52, as contrast may be insufficient.
  • The lightest color, #666699, should be checked for contrast when used with any mid-tone blues for text.
  • Provide clear focus states for interactive elements, as subtle color shifts might be hard to distinguish in this dark, monochrome palette.

Recommended combinations

Abyssal Layers

Excellent for creating a profound, immersive dark background or layered UI elements, mimicking ocean depths.

#000033 · #1A1A52 · #333366

Subtle Illumination

Ideal for highlighting key information or interactive components, mimicking subtle light penetration.

#1A1A52 · #4D4D80 · #666699

Monochrome Depth

Perfect for gradients or subtle visual cues in dark interfaces, offering elegance and clarity through monochrome variation.

#000033 · #333366 · #666699

CSS variables

:root {
  --indigo-ocean-depths-1: #000033;
  --indigo-ocean-depths-2: #1A1A52;
  --indigo-ocean-depths-3: #333366;
  --indigo-ocean-depths-4: #4D4D80;
  --indigo-ocean-depths-5: #666699;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "indigo-ocean-depths": {
        1: "#000033",
        2: "#1A1A52",
        3: "#333366",
        4: "#4D4D80",
        5: "#666699",
      }
    }
  }
}

Related searches

deep indigo monochrome palettedark ocean blue color schememonochromatic dark mode UImysterious blue black designdeep sea branding colors

Palette colors

Hex values

Color 1#000033
·
Color 2#1A1A52
·
Color 3#333366
·
Color 4#4D4D80
·
Color 5#666699
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.7:1Fail
2.6:1Fail
3.7:1AA18
2
1.3:1Fail
1.4:1Fail
2:1Fail
3:1Fail
3
1.7:1Fail
1.4:1Fail
1.5:1Fail
2.2:1Fail
4
2.6:1Fail
2:1Fail
1.5:1Fail
1.5:1Fail
5
3.7:1AA18
3:1Fail
2.2:1Fail
1.5:1Fail

Similar palettes

More like Indigo Ocean Depths

View all monochrome
Deep Ocean Abyss
Indigo Current Flow
Neptune's Embrace
Charcoal Ember Haze
Industrial Gear Grind
Ink Wash Shadow