Back to palettes

Palette

Deep Ocean Trench

Plunges into the enigmatic depths of the ocean, capturing its profound darkness and subtle, otherworldly glow.

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

#0D1B2A#1B263B#415A77#778DA9#E0E1DD

Palette guide

How to use Deep Ocean Trench

Overview

The Deep Ocean Trench palette (ID: deep-ocean-trench-3) spans a beautiful gradient from profound dark blues to a soft, near-white shade, making it exceptionally versatile. With colors like #0D1B2A, #415A77, and #E0E1DD, this palette perfectly captures the enigmatic depths of the ocean while offering ample contrast for practical applications. It allows designers and developers to create sophisticated interfaces that transition smoothly from deep, immersive backgrounds to clear, readable foreground elements. Ideal for projects that require both a dark, professional mood and excellent legibility.

Best used for

  • Professional web and app design
  • Corporate branding and presentations
  • Data visualization dashboards
  • Editorial and content-heavy layouts
  • Luxury product websites
  • Dark theme UI with light text options

Suggested color roles

primary

Utilize #1B263B as a primary content color, providing a strong, rich dark blue for main sections.

secondary

Apply #415A77 for secondary information, sub-sections, or inactive states, offering a clear mid-tone.

accent

Leverage #778DA9 for interactive elements, highlights, or distinct calls to action, standing out effectively.

background

Designate #0D1B2A as the core background color for a deep, encompassing foundation.

text

Use #E0E1DD for primary text on dark backgrounds, ensuring excellent readability. For text on lighter blues, use a darker blue like #1B263B.

Accessibility notes

  • The #E0E1DD provides excellent contrast for text on all darker blues in this palette.
  • Ensure sufficient contrast when using #415A77 or #778DA9 for text on #0D1B2A or #1B263B.
  • Consider using #E0E1DD for all essential text to maximize readability across the palette.
  • Test how #778DA9 appears as text against #415A77 for users with color vision deficiencies.

Recommended combinations

High Contrast Read

Perfect for main text on a dark background with a clear, engaging accent.

#0D1B2A · #E0E1DD · #415A77

Layered Depth

To create visual hierarchy in UI elements or sections, moving from dark to light.

#1B263B · #415A77 · #778DA9

Subtle Interface

For a sophisticated dark mode interface with subtle distinctions between elements.

#0D1B2A · #1B263B · #415A77

CSS variables

:root {
  --deep-ocean-trench-3-1: #0D1B2A;
  --deep-ocean-trench-3-2: #1B263B;
  --deep-ocean-trench-3-3: #415A77;
  --deep-ocean-trench-3-4: #778DA9;
  --deep-ocean-trench-3-5: #E0E1DD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-trench-3": {
        1: "#0D1B2A",
        2: "#1B263B",
        3: "#415A77",
        4: "#778DA9",
        5: "#E0E1DD",
      }
    }
  }
}

Related searches

ocean blue palette with contrastdark to light bluesprofessional blue themeUI dark mode light textelegant blue color scheme

Palette colors

Hex values

Color 1#0D1B2A
·
Color 2#1B263B
·
Color 3#415A77
·
Color 4#778DA9
·
Color 5#E0E1DD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
2.4:1Fail
5.1:1AA
13.2:1AAA
2
1.1:1Fail
2.1:1Fail
4.4:1AA18
11.5:1AAA
3
2.4:1Fail
2.1:1Fail
2.1:1Fail
5.4:1AA
4
5.1:1AA
4.4:1AA18
2.1:1Fail
2.6:1Fail
5
13.2:1AAA
11.5:1AAA
5.4:1AA
2.6:1Fail

Similar palettes

More like Deep Ocean Trench

View all dark
Abyssal Trench Mystery
Deepwater Cave
Mariana Trench Echo
Oceanic Trench Dive
Abyssal Coral Forms
Abyssal Current Flow