Palette

Deep Trench Mystery

Plunge into the mysterious, crushing depths of the ocean trench, where light barely touches the unknown.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Trench Mystery 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 Trench Mystery.

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

Data visualization

#0A0D1A#1E2D3E#3F5F7D#6A9AC2#0F1A2B

Palette guide

How to use Deep Trench Mystery

Overview

The Deep Trench Mystery palette unfolds a captivating journey into the ocean's profound depths, characterized by rich, dark blues and hints of muted grey. Starting with the near-black #0A0D1A and the enigmatic #0F1A2B, it moves through the shadowy #1E2D3E to the more discernible #3F5F7D, culminating in the serene yet distant #6A9AC2. This collection is ideal for designers seeking to evoke a sense of calm, mystery, and sophisticated depth. Developers can employ these hues for immersive interfaces, elegant branding, or any project that benefits from a dark, contemplative aesthetic, offering a unique visual narrative of the unknown.

Best used for

Luxury watch or jewelry websites
Documentary film branding
Sci-fi game user interfaces
Dark mode application themes
Abstract art installations
High-end corporate branding

Suggested color roles

primary

#0A0D1A - Establishes a profound, mysterious base, perfect for main backgrounds or dominant elements.

secondary

#1E2D3E - A slightly lighter, yet still deep, blue that works well for content panels or secondary UI sections.

accent

#6A9AC2 - Provides a clear, calming contrast, excellent for interactive elements, highlights, or calls to action.

background

#0F1A2B - A very dark, subtle blue suitable for deep background textures or subtle layering.

text

#6A9AC2 - Recommended for primary text against the darker blues to ensure optimal readability and maintain the palette's mood.

Accessibility notes

Text in #6A9AC2 against #0A0D1A or #0F1A2B offers good contrast, generally passing WCAG AA.
Avoid using #1E2D3E for text on #0A0D1A as contrast will be insufficient for most readability standards.
For smaller text, consider using pure white or a very light grey (#F0F0F0) to ensure legibility on darker shades like #1E2D3E.
Ensure interactive elements using #6A9AC2 have sufficient size and spacing to compensate for potentially lower contrast against mid-tones like #3F5F7D.

Recommended combinations

Abyss Depth

To create a deep, layered background effect or for subtle sectioning in dark mode interfaces.

#0A0D1A · #1E2D3E · #0F1A2B

Distant Light

Highlighting key information or interactive elements, with #6A9AC2 drawing attention.

#1E2D3E · #6A9AC2 · #3F5F7D

Muted Contrast

Effective for data visualization or hierarchical content, where subtle shifts in blue denote different categories.

#0F1A2B · #3F5F7D · #6A9AC2

CSS variables

:root {
  --deep-trench-mystery-1: #0A0D1A;
  --deep-trench-mystery-2: #1E2D3E;
  --deep-trench-mystery-3: #3F5F7D;
  --deep-trench-mystery-4: #6A9AC2;
  --deep-trench-mystery-5: #0F1A2B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-trench-mystery": {
        1: "#0A0D1A",
        2: "#1E2D3E",
        3: "#3F5F7D",
        4: "#6A9AC2",
        5: "#0F1A2B",
      }
    }
  }
}

Hex values

Color 1#0A0D1A

Color 2#1E2D3E

Color 3#3F5F7D

Color 4#6A9AC2

Color 5#0F1A2B

Accessibility

Contrast checker

1.4:1Fail

2.9:1Fail

6.5:1AA

1.1:1Fail

1.4:1Fail

2.1:1Fail

4.7:1AA

1.2:1Fail

2.9:1Fail

2.1:1Fail

2.2:1Fail

2.6:1Fail

6.5:1AA

4.7:1AA

2.2:1Fail

5.8:1AA

1.1:1Fail

1.2:1Fail

2.6:1Fail

5.8:1AA

Similar palettes

More like Deep Trench Mystery

View all dark

Abyss Gaze

Abyssal Bioluminescence

Abyssal Bioluminescent Glow

Abyssal Coral Glow

Abyssal Depths

Abyssal Midnight Reef