Back to palettes

Palette

Trench Explorer

An intensely dark palette with subtle blues, diving into the enigmatic and crushing depths of the oceanic trenches.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A2A#101030#202050#000080#4169E1

Palette guide

How to use Trench Explorer

Overview

The "Trench Explorer" palette plunges into the enigmatic depths of the ocean, offering an intensely dark and mysterious collection of blues. Dominated by deep, almost black hues like #0A0A2A and #101030, subtly transitioning to rich navy #000080 and vibrant royal blue #4169E1, this palette is designed for high-impact, dramatic, and immersive experiences. It's perfect for designers and developers creating themes related to deep space, cybersecurity, high-tech interfaces, or any narrative requiring a sense of profound exploration and mystery. The deep base colors provide a perfect canvas for glowing accents.

Best used for

  • Sci-fi game interfaces
  • Cybersecurity dashboard themes
  • Space exploration branding
  • Movie title sequences
  • Dark mode UI designs
  • Luxury tech product displays

Suggested color roles

primary

Use #0A0A2A (Deepest Blue-Black) for main backgrounds, large containers, or base layers, establishing a profound sense of depth.

secondary

Apply #101030 (Dark Blue-Grey) for secondary backgrounds, panels, or subtle divisions, maintaining darkness with slight differentiation.

accent

Employ #4169E1 (Royal Blue) for interactive elements, highlights, or key data points, providing a vivid, energetic contrast.

background

Utilize #0A0A2A (Deepest Blue-Black) to create an immersive, dark canvas, perfect for dramatic visual storytelling and high-contrast elements.

text

Use #4169E1 (Royal Blue) for headings and important interactive text. For general body text, consider pure white or a light grey for maximum readability against dark backgrounds.

Accessibility notes

  • Text must be very light (e.g., white or a pale blue like #4169E1) against the dark backgrounds like #0A0A2A or #101030 to ensure readability.
  • #4169E1 provides excellent contrast against all darker blues in the palette for interactive elements and key information.
  • Avoid using #202050 for text on #101030 as contrast may be insufficient.
  • Always check WCAG contrast ratios, especially for critical information and interactive components in a dark theme.

Recommended combinations

Deep Dive

Perfect for a dramatic hero section or landing page, with a dark background and a vibrant, strong accent.

#0A0A2A · #4169E1 · #101030

Submarine UI

Ideal for dashboard elements or navigation, creating layered depth with a clear, luminous accent.

#101030 · #000080 · #4169E1

Trench Light

Effective for highlighting key data or interactive elements against a deep, dark backdrop, simulating light in the abyss.

#0A0A2A · #202050 · #4169E1

CSS variables

:root {
  --trench-explorer-1: #0A0A2A;
  --trench-explorer-2: #101030;
  --trench-explorer-3: #202050;
  --trench-explorer-4: #000080;
  --trench-explorer-5: #4169E1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "trench-explorer": {
        1: "#0A0A2A",
        2: "#101030",
        3: "#202050",
        4: "#000080",
        5: "#4169E1",
      }
    }
  }
}

Related searches

dark blue aestheticdeep sea color schemesci-fi UI colorsdark mode blue palettemysterious tech colors

Palette colors

Hex values

Color 1#0A0A2A
·
Color 2#101030
·
Color 3#202050
·
Color 4#000080
·
Color 5#4169E1
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.3:1Fail
1.2:1Fail
4:1AA18
2
1:1Fail
1.2:1Fail
1.2:1Fail
3.8:1AA18
3
1.3:1Fail
1.2:1Fail
1.1:1Fail
3.1:1AA18
4
1.2:1Fail
1.2:1Fail
1.1:1Fail
3.3:1AA18
5
4:1AA18
3.8:1AA18
3.1:1AA18
3.3:1AA18

Similar palettes

More like Trench Explorer

View all dark
Abyssal Luminous Flora
Bioluminescent Abyss
Abyssal Current Flow
Abyssal Luminous Depths
Abyssal Trench Mystery
Bioluminescent Deep Trench