Palette

Bioluminescent Deep Trench

Plunging into the mysterious deep ocean, this palette highlights bioluminescent glows against the dark, inky depths.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#010B13#0A2B42#0B4C6F#1C7293#6EE7B4

Palette guide

How to use Bioluminescent Deep Trench

Overview

The Bioluminescent Deep Trench palette plunges into the mysterious deep ocean, highlighting ethereal glows against dark, inky depths. With ultra-dark blues like #010B13, #0A2B42, #0B4C6F, and #1C7293, this palette establishes a profound and enigmatic atmosphere. The striking #6EE7B4 (MediumAquamarine) serves as a vivid bioluminescent accent, creating a captivating contrast. This palette is perfect for designers aiming to convey mystery, depth, and a touch of otherworldly light, ideal for projects that explore the unknown or require a sophisticated, dark aesthetic with a vibrant pop.

Best used for

Dark-themed websites and applications
Sci-fi game environments and concept art
Underwater exploration documentaries
Mysterious brand identities
Data dashboards with a dark mode
Atmospheric digital art and animations

Suggested color roles

primary

Use #010B13 as the foundational black, providing an unparalleled depth for backgrounds and main containers, immersing the user.

secondary

Employ #0B4C6F for core informational sections or panels, offering a rich, deep blue that supports the mysterious theme.

accent

Apply #6EE7B4 for striking highlights, critical alerts, interactive elements, or bioluminescent effects, drawing the eye with its glow.

background

Choose #010B13 for an immersive dark mode, creating an expansive, deep trench experience for users.

text

For optimal readability on dark backgrounds, use #6EE7B4 or a crisp white. Lighter blues like #1C7293 can be used for secondary text.

Accessibility notes

Crucially, ensure all text has sufficient contrast against dark backgrounds; #6EE7B4 or white are best for legibility.
Reserve #6EE7B4 for accents or large headings; its brightness can be overwhelming for small body text.
Avoid using light blue text on similar blue backgrounds, especially mid-tones like #0A2B42 and #1C7293.
Clearly define interactive elements with distinct color changes or outlines to improve user experience.

Recommended combinations

Trench Depths

Creates a seamless gradient of deep ocean blues, ideal for immersive backgrounds or cinematic intros.

#010B13 · #0A2B42 · #0B4C6F

Ethereal Glow

Highlights mysterious elements, perfect for interactive UI components or captivating visual effects.

#0B4C6F · #6EE7B4 · #1C7293

Deep Sea UI

Offers a dynamic pairing for feature sections or dramatic transitions in a digital interface.

#0A2B42 · #6EE7B4 · #010B13

CSS variables

:root {
  --bioluminescent-deep-trench-1: #010B13;
  --bioluminescent-deep-trench-2: #0A2B42;
  --bioluminescent-deep-trench-3: #0B4C6F;
  --bioluminescent-deep-trench-4: #1C7293;
  --bioluminescent-deep-trench-5: #6EE7B4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "bioluminescent-deep-trench": {
        1: "#010B13",
        2: "#0A2B42",
        3: "#0B4C6F",
        4: "#1C7293",
        5: "#6EE7B4",
      }
    }
  }
}

Hex values

Color 1#010B13

Color 2#0A2B42

Color 3#0B4C6F

Color 4#1C7293

Color 5#6EE7B4

Accessibility

Contrast checker

1.4:1Fail

2.2:1Fail

3.7:1AA18

13:1AAA

1.4:1Fail

1.6:1Fail

2.7:1Fail

9.6:1AAA

2.2:1Fail

1.6:1Fail

1.7:1Fail

6:1AA

3.7:1AA18

2.7:1Fail

1.7:1Fail

3.5:1AA18

13:1AAA

9.6:1AAA

6:1AA

3.5:1AA18

Similar palettes

More like Bioluminescent Deep Trench

Submarine Abyss Light

Abyss Gaze