Palette

Deep Ocean Trench

Plunges into the mysterious depths of the ocean, where sunlight barely reaches, revealing deep blues.

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

#020C1F#08294B#0E426F#1765A2#3988C7

Palette guide

How to use Deep Ocean Trench

Overview

The Deep Ocean Trench palette (ID: deep-ocean-trench-6) offers a compelling journey from near-black to a vibrant, yet deep, oceanic blue. Featuring hex codes like #020C1F, #0E426F, and #3988C7, this palette provides a rich foundation for sophisticated design. It allows designers and developers to build clear visual hierarchies and dynamic interfaces that evoke the mystery and vastness of the deep ocean. The range from profound darkness to a brighter accent ensures versatility for both immersive backgrounds and highly legible foreground elements, making it perfect for engaging and professional applications.

Best used for

Corporate dashboards and analytics platforms
Scientific and research applications
Financial services interfaces
Educational technology platforms
Weather and environmental apps
UI/UX dark mode implementations

Suggested color roles

primary

Use #08294B as the main color for content areas and primary UI components, providing depth and professionalism.

secondary

Apply #0E426F for supporting content, active states, or sub-navigation, offering a clear, mid-range blue.

accent

Leverage #3988C7, the brightest blue, for calls to action, key highlights, or interactive elements to ensure visibility.

background

Designate #020C1F as the deepest background color, creating an immersive and profound base for your design.

text

Employ white or a light neutral like #F8F8F8 for primary text on darker backgrounds to guarantee optimal readability.

Accessibility notes

The brightest accent, #3988C7, provides excellent contrast against all darker blues for crucial elements.
Ensure sufficient contrast for text on #1765A2, as it's a mid-tone that might require careful text color selection.
Avoid using #020C1F and #08294B for adjacent text and background without verifying WCAG contrast ratios.
Consider providing alternative text colors for users with low vision if the default light text is not sufficient.

Recommended combinations

Dynamic Highlight

For a striking dark background with a vibrant call to action and a supportive mid-tone.

#020C1F · #3988C7 · #0E426F

Progressive UI

To create a sense of depth and hierarchy in user interfaces, from darker base to lighter interactions.

#08294B · #1765A2 · #3988C7

Subtle Depth

Ideal for layered backgrounds or subtle distinctions between adjacent dark elements in a minimalist design.

#020C1F · #08294B · #0E426F

CSS variables

:root {
  --deep-ocean-trench-6-1: #020C1F;
  --deep-ocean-trench-6-2: #08294B;
  --deep-ocean-trench-6-3: #0E426F;
  --deep-ocean-trench-6-4: #1765A2;
  --deep-ocean-trench-6-5: #3988C7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-trench-6": {
        1: "#020C1F",
        2: "#08294B",
        3: "#0E426F",
        4: "#1765A2",
        5: "#3988C7",
      }
    }
  }
}

Hex values

Color 1#020C1F

Color 2#08294B

Color 3#0E426F

Color 4#1765A2

Color 5#3988C7

Accessibility

Contrast checker

1.3:1Fail

1.9:1Fail

3.2:1AA18

5.1:1AA

1.3:1Fail

1.4:1Fail

2.4:1Fail

3.9:1AA18

1.9:1Fail

1.4:1Fail

1.7:1Fail

2.7:1Fail

3.2:1AA18

2.4:1Fail

1.7:1Fail

1.6:1Fail

5.1:1AA

3.9:1AA18

2.7:1Fail

1.6:1Fail

Similar palettes

More like Deep Ocean Trench

View all dark

Abyss Gaze

Abyssal Bioluminescent Glow