Palette

Deep Ocean Trench

A progression of profound blues, mirroring the mysterious and silent depths of the 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

#0A1128#001F54#034078#0A5A8E#1F8AC0

Palette guide

How to use Deep Ocean Trench

Overview

The Deep Ocean Trench palette (ID: deep-ocean-trench-5) presents a compelling progression of blues, from the near-black #0A1128 to the clear, oceanic #1F8AC0. This palette is expertly crafted to simulate the journey from the darkest abyss to sunlit waters, offering a dynamic range for designers and developers. Hex codes like #001F54 and #0A5A8E provide rich mid-tones that enable versatile application in gradients, layered designs, or to signify depth and information hierarchy. It's an excellent choice for projects requiring a sense of exploration, professionalism, and visual flow.

Best used for

Marine research and environmental websites
Educational content on oceanography
Sci-fi or adventure game interfaces
Progressive web apps and onboarding flows
Data visualizations showing depth or intensity
Technology and innovation branding

Suggested color roles

primary

Utilize #001F54 as a strong, deep blue for main content areas, providing a solid foundation.

secondary

Apply #034078 for sub-sections, supporting information, or active states, offering a clear step in depth.

accent

Leverage #1F8AC0 as the brightest accent for calls to action, key highlights, or interactive elements, ensuring visibility.

background

Designate #0A1128 as the deepest background color, creating an immersive, profound canvas.

text

Employ white or a very light gray (e.g., #EEEEEE) for text on darker backgrounds. Darker blues can be used on #1F8AC0.

Accessibility notes

The brightest blue, #1F8AC0, provides excellent contrast with the darker blues for text or interactive elements.
Ensure sufficient contrast for text on #0A5A8E, as it's a mid-range blue that might require lighter text.
Consider using #1F8AC0 for key interactive elements to improve discoverability and usability.
Avoid using #0A1128 and #001F54 for adjacent text and background without careful contrast checking.

Recommended combinations

Abyssal Glow

For a dramatic dark background with a bright, luminous accent and a supportive mid-tone.

#0A1128 · #1F8AC0 · #034078

Oceanic Gradient

To create smooth transitions or visual depth in banners, headers, or hero sections.

#001F54 · #0A5A8E · #1F8AC0

Deep Focus

Ideal for a serious, focused UI where elements subtly emerge from a profound dark background.

#0A1128 · #001F54 · #034078

CSS variables

:root {
  --deep-ocean-trench-5-1: #0A1128;
  --deep-ocean-trench-5-2: #001F54;
  --deep-ocean-trench-5-3: #034078;
  --deep-ocean-trench-5-4: #0A5A8E;
  --deep-ocean-trench-5-5: #1F8AC0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-trench-5": {
        1: "#0A1128",
        2: "#001F54",
        3: "#034078",
        4: "#0A5A8E",
        5: "#1F8AC0",
      }
    }
  }
}

Hex values

Color 1#0A1128

Color 2#001F54

Color 3#034078

Color 4#0A5A8E

Color 5#1F8AC0

Accessibility

Contrast checker

1.2:1Fail

1.8:1Fail

2.6:1Fail

4.9:1AA

1.2:1Fail

1.5:1Fail

2.2:1Fail

4.1:1AA18

1.8:1Fail

1.5:1Fail

1.4:1Fail

2.7:1Fail