Back to palettes

Palette

Oceanic Trench Dive

Plunging deep into the ocean's abyssal trench, where dark blues give way to lighter, enigmatic hues of unseen life.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Oceanic Trench Dive 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 Oceanic Trench Dive.

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

Data visualization

#0D0E1F#1A2E40#2B506B#427C9D#6BAED6

Palette guide

How to use Oceanic Trench Dive

Overview

The Oceanic Trench Dive palette offers a profound journey into deep sea aesthetics, perfect for evoking mystery and depth. Anchored by the near-black #0D0E1F, it transitions through the somber #1A2E40 and the contemplative #2B506B, culminating in the serene #427C9D and the luminous #6BAED6. This gradient of blues is ideal for creating sophisticated, immersive digital experiences, from sleek dark mode interfaces to atmospheric branding. Designers can leverage its cool, muted tones to convey professionalism, tranquility, and a touch of the unknown, making it versatile for tech, luxury, or environmental themes. Developers will find its structured progression useful for defining visual hierarchy and states within complex applications.

Best used for

  • Dark mode UI/UX designs
  • Luxury brand identity (tech, automotive, high-end services)
  • Environmental or marine conservation websites
  • Sci-fi themed games or applications
  • Educational content about space or oceanography
  • Abstract art or digital installations

Suggested color roles

primary

Use #0D0E1F as the foundational dark base for main backgrounds or large structural elements, establishing a sense of depth and sophistication.

secondary

#1A2E40 works well for secondary backgrounds, cards, or panels, providing a subtle differentiation from the primary without losing the dark mood.

accent

#6BAED6 is excellent for interactive elements like buttons, links, or highlights, offering a refreshing contrast and guiding user attention.

background

#0D0E1F or #1A2E40 are ideal for main backgrounds, providing a dark, immersive canvas. #2B506B can be used for section backgrounds.

text

For dark backgrounds, use #6BAED6 for headlines, and #427C9D for body text to ensure readability, or a bright white/near-white for maximum contrast.

Accessibility notes

  • Ensure sufficient contrast between light text (#6BAED6, #427C9D) and dark backgrounds (#0D0E1F, #1A2E40).
  • Avoid using #1A2E40 text on #0D0E1F backgrounds; the contrast will be too low for readability.
  • Pair #6BAED6 or a true white with #0D0E1F for AA/AAA accessibility compliance for body text.
  • Consider a slightly brighter near-white text for essential information on the darkest blues to improve legibility for all users.

Recommended combinations

Deep Dive UI

A classic dark mode combination where #0D0E1F is the background, #1A2E40 for cards/sections, and #6BAED6 for primary CTAs or interactive elements.

#0D0E1F · #1A2E40 · #6BAED6

Subtle Gradient

Ideal for creating soft gradients in illustrations, hero sections, or data visualizations, providing depth without harsh contrasts.

#1A2E40 · #2B506B · #427C9D

Highlight Contrast

Use #0D0E1F as a dominant background, #427C9D for secondary information, and #6BAED6 for key highlights, icons, or important text.

#0D0E1F · #427C9D · #6BAED6

CSS variables

:root {
  --oceanic-trench-dive-1: #0D0E1F;
  --oceanic-trench-dive-2: #1A2E40;
  --oceanic-trench-dive-3: #2B506B;
  --oceanic-trench-dive-4: #427C9D;
  --oceanic-trench-dive-5: #6BAED6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-trench-dive": {
        1: "#0D0E1F",
        2: "#1A2E40",
        3: "#2B506B",
        4: "#427C9D",
        5: "#6BAED6",
      }
    }
  }
}

Related searches

deep blue color paletteoceanic dark themeabyssal blue color schememysterious blue brandingdark aquatic colors

Palette colors

Hex values

Color 1#0D0E1F
·
Color 2#1A2E40
·
Color 3#2B506B
·
Color 4#427C9D
·
Color 5#6BAED6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.2:1Fail
4.2:1AA18
7.9:1AAA
2
1.4:1Fail
1.6:1Fail
3:1AA18
5.7:1AA
3
2.2:1Fail
1.6:1Fail
1.9:1Fail
3.5:1AA18
4
4.2:1AA18
3:1AA18
1.9:1Fail
1.9:1Fail
5
7.9:1AAA
5.7:1AA
3.5:1AA18
1.9:1Fail

Similar palettes

More like Oceanic Trench Dive

View all dark
Abyssal Trench Mystery
Deepwater Cave
Mariana Trench Echo
Abyssal Coral Forms
Abyssal Trench Mystery
Bioluminescent Deep Trench