Palette

Abyssal Trench Dive

Plunge into the depths with dark blues and hints of vivid cyan, reflecting the mysterious abyssal ocean trenches.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A1F#1B2E3A#2A4E6C#00FFFF#4169E1

Palette guide

How to use Abyssal Trench Dive

Overview

The Abyssal Trench Dive palette plunges into the depths with dark blues and hints of vivid cyan, reflecting the mysterious abyssal ocean trenches. This dark and intriguing collection features deep tones like #0A0A1F (Very Dark Blue) and #1B2E3A (Dark Prussian Blue), progressing to the profound #2A4E6C (Midnight Blue), punctuated by the striking #00FFFF (Cyan) and #4169E1 (Royal Blue). Designers can leverage this palette to evoke a sense of wonder, mystery, and dynamic contrast, perfect for sci-fi interfaces, gaming environments, or captivating digital art. Developers will find these blues excellent for interactive elements, glowing indicators, and establishing clear visual hierarchy against the profound, dark backgrounds, ensuring a memorable and visually stunning user experience.

Best used for

Deep sea exploration themes
Sci-fi game interfaces
Mysterious digital art
Dark mode UI with vibrant accents
Adventure storytelling visuals
Underwater themed branding

Suggested color roles

primary

#0A0A1F (Very Dark Blue) - The deepest, foundational shade for main backgrounds, content areas, or main structural elements, providing profound depth.

secondary

#1B2E3A (Dark Prussian Blue) - A slightly softer, yet still profound, blue for secondary panels, card backgrounds, or subtle dividers.

accent

#00FFFF (Cyan) - This vivid, luminous cyan is perfect for glowing accents, interactive elements, or to highlight critical information.

background

#0A0A1F (Very Dark Blue) - Creates an immersive dark canvas, allowing the vibrant accents to truly glow like bioluminescence.

text

White (#FFFFFF) or a very light grey (#F0F0F0) provides optimal contrast for readability against the dark blues. #00FFFF can be used for glowing headlines.

Accessibility notes

Ensure sufficient contrast when using #00FFFF for text, particularly against backgrounds lighter than #2A4E6C.
The dark backgrounds require light text (white or light grey) for legibility; avoid using dark text on these shades.
Use #4169E1 for accents or short, impactful phrases rather than large blocks of text to maintain readability.
Always test vibrant accents like #00FFFF on interactive elements to ensure they meet accessibility contrast standards.

Recommended combinations

Trench Depths

Ideal for creating a dark, mysterious background with subtle depth in UI or digital art, mimicking the ocean trench.

#0A0A1F · #1B2E3A · #2A4E6C

Cyan Glimmer

Excellent for highlighting interactive elements, energy bars in games, or abstract patterns that need a vibrant, otherworldly pop.

#1B2E3A · #4169E1 · #00FFFF

Abyssal Light

Perfect for creating subtle depth and ethereal glows in illustrations, background elements, or data visualizations, suggesting bioluminescence.

#2A4E6C · #4169E1 · #00FFFF

CSS variables

:root {
  --abyssal-trench-dive-1: #0A0A1F;
  --abyssal-trench-dive-2: #1B2E3A;
  --abyssal-trench-dive-3: #2A4E6C;
  --abyssal-trench-dive-4: #00FFFF;
  --abyssal-trench-dive-5: #4169E1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-trench-dive": {
        1: "#0A0A1F",
        2: "#1B2E3A",
        3: "#2A4E6C",
        4: "#00FFFF",
        5: "#4169E1",
      }
    }
  }
}

Hex values

Color 1#0A0A1F

Color 2#1B2E3A

Color 3#2A4E6C

Color 4#00FFFF

Color 5#4169E1

Accessibility

Contrast checker

1.4:1Fail

2.2:1Fail

15.6:1AAA

4:1AA18

1.4:1Fail

1.6:1Fail

11.2:1AAA

2.9:1Fail

2.2:1Fail

1.6:1Fail

7:1AA

1.8:1Fail

15.6:1AAA

11.2:1AAA

7:1AA

3.9:1AA18

4:1AA18

2.9:1Fail

1.8:1Fail

3.9:1AA18

Similar palettes

More like Abyssal Trench Dive

View all dark

Abyss Gaze

Abyssal Bioluminescent Glow