Back to palettes

Palette

Deep Ocean Trench

Mysterious, dark blues plunge into the silent, unknown depths of the abyssal ocean.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A1D37#1D3B5C#082E47#051A2C#142F4F

Palette guide

How to use Deep Ocean Trench

Overview

The Deep Ocean Trench palette (ID: deep-ocean-trench-2) offers a collection of profoundly dark, muted blues, perfect for evoking mystery and sophistication. Featuring hex codes like #0A1D37, #1D3B5C, and #051A2C, these colors create a sense of depth and tranquility. Designers and developers can leverage this palette for projects requiring a serious, professional, or luxurious aesthetic. Its subtle variations in tone prevent monotony while maintaining a cohesive, immersive dark theme. Ideal for creating interfaces that are both visually striking and easy on the eyes in low-light environments.

Best used for

  • Luxury branding and websites
  • Dark mode UI/UX design
  • Corporate and financial applications
  • Scientific data visualization
  • Abstract digital art
  • High-tech product interfaces

Suggested color roles

primary

Use #0A1D37 as the dominant color for main content sections and larger UI elements, offering a rich, deep base.

secondary

Apply #082E47 for supporting information, sub-headers, or dividing lines, providing a subtle tonal contrast.

accent

Utilize #1D3B5C for interactive elements, highlights, or subtle calls to action, as it's the lightest tone in the palette.

background

Designate #051A2C as the primary background color for a truly immersive and profound dark canvas.

text

Pair with white or a very light gray (e.g., #E0E0E0) for primary text on any of these dark backgrounds to ensure readability.

Accessibility notes

  • Always use light-colored text (white or near-white) on these dark blues to meet WCAG contrast guidelines.
  • Ensure sufficient contrast between adjacent blue elements if they convey different meanings or states.
  • Avoid using two very similar dark blues for essential informational text and its background.
  • Test readability on various screen types and lighting conditions, especially for long-form content.

Recommended combinations

Deep Base Contrast

For a background, a prominent element, and a subtle highlight, offering clear hierarchy.

#051A2C · #1D3B5C · #0A1D37

Subtle Depth

To create layered effects or subtle gradients within dark UI components.

#0A1D37 · #082E47 · #142F4F

Elegant Focus

Ideal for showcasing a central feature against a deep background with a soft, inviting glow.

#051A2C · #142F4F · #1D3B5C

CSS variables

:root {
  --deep-ocean-trench-2-1: #0A1D37;
  --deep-ocean-trench-2-2: #1D3B5C;
  --deep-ocean-trench-2-3: #082E47;
  --deep-ocean-trench-2-4: #051A2C;
  --deep-ocean-trench-2-5: #142F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-trench-2": {
        1: "#0A1D37",
        2: "#1D3B5C",
        3: "#082E47",
        4: "#051A2C",
        5: "#142F4F",
      }
    }
  }
}

Related searches

dark blue color schemesdeep ocean palettemysterious blue colorscorporate dark blue designUI dark mode blues

Palette colors

Hex values

Color 1#0A1D37
·
Color 2#1D3B5C
·
Color 3#082E47
·
Color 4#051A2C
·
Color 5#142F4F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.2:1Fail
1:1Fail
1.2:1Fail
2
1.5:1Fail
1.2:1Fail
1.5:1Fail
1.2:1Fail
3
1.2:1Fail
1.2:1Fail
1.3:1Fail
1:1Fail
4
1:1Fail
1.5:1Fail
1.3:1Fail
1.3:1Fail
5
1.2:1Fail
1.2:1Fail
1:1Fail
1.3:1Fail

Similar palettes

More like Deep Ocean Trench

View all dark
Abyssal Trench Mystery
Deep Ocean Abyss
Deep Ocean Enigma
Deep Sea Cavern
Ocean Depths Dream
Abyssal Midnight Reef