Back to palettes

Palette

Abyssal Trench Mystery

A profound exploration of the darkest blues, plumbing the enigmatic depths of the ocean's most secluded trenches.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#050B1B#0E1A33#17294B#203863#29477B

Palette guide

How to use Abyssal Trench Mystery

Overview

The Abyssal Trench Mystery palette plunges into the deepest ocean blues, offering a sophisticated and enigmatic color scheme for designers. Featuring profound shades like the near-black #050B1B, the rich #0E1A33, and the deep sapphire #17294B, this collection evokes a sense of depth and tranquility. It's ideal for projects requiring a serious, contemplative, or luxurious feel. The progression from the darkest #050B1B to the slightly brighter #29477B provides excellent versatility for creating gradients, layered backgrounds, or subtle visual hierarchies. Developers will find these dark, cool tones perform exceptionally well in dark mode interfaces, ensuring readability and a premium user experience.

Best used for

  • High-end luxury brand websites and apps
  • Dark mode UI/UX designs for tech products
  • Atmospheric video game environments or splash screens
  • Elegant corporate branding and presentations
  • Science fiction or mystery novel covers
  • Deep-sea exploration documentary graphics

Suggested color roles

primary

Use #050B1B as the foundational deep background for a truly immersive dark theme, conveying ultimate depth and sophistication.

secondary

Apply #0E1A33 for large content blocks, sidebars, or modal backgrounds, offering a subtle differentiation from the primary.

accent

Highlight interactive elements, buttons, or key headings with #29477B to draw attention without being overly bright.

background

The darkest shade, #050B1B, serves as an excellent, non-distracting background for high-contrast text and luminous elements.

text

For optimal readability, use a light, near-white text like #F0F0F0 against any of these dark blues, or a light blue from the palette like #29477B for subtle accents on lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast for text, especially with #050B1B and #0E1A33. Aim for AAA contrast ratios where possible.
  • Use light text (e.g., pure white or light grey) against these dark blues for optimal readability.
  • Avoid using #0E1A33 on #050B1B for small text; larger text might pass, but verify with accessibility tools.
  • Consider a subtle light glow or outline on interactive elements using #29477B to improve visibility for low vision users.

Recommended combinations

Deep Sea Gradient

Creates a smooth, oceanic depth effect for backgrounds or hero sections, transitioning from darkest to slightly lighter.

#050B1B · #17294B · #29477B

Subtle Contrast

Pairs a dark background with a mid-tone for content, ensuring legibility with a contrasting light text.

#0E1A33 · #203863 · #17294B

Mysterious Highlight

Utilizes the darkest shade for a base, #29477B for a primary highlight, and #17294B for secondary details or icons.

#050B1B · #29477B · #17294B

CSS variables

:root {
  --abyssal-trench-mystery-1: #050B1B;
  --abyssal-trench-mystery-2: #0E1A33;
  --abyssal-trench-mystery-3: #17294B;
  --abyssal-trench-mystery-4: #203863;
  --abyssal-trench-mystery-5: #29477B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-trench-mystery": {
        1: "#050B1B",
        2: "#0E1A33",
        3: "#17294B",
        4: "#203863",
        5: "#29477B",
      }
    }
  }
}

Related searches

deep blue color schemedark ocean palettemysterious blue huesnavy blue website colorscool dark aesthetic

Palette colors

Hex values

Color 1#050B1B
·
Color 2#0E1A33
·
Color 3#17294B
·
Color 4#203863
·
Color 5#29477B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.4:1Fail
1.7:1Fail
2.1:1Fail
2
1.1:1Fail
1.2:1Fail
1.5:1Fail
1.9:1Fail
3
1.4:1Fail
1.2:1Fail
1.2:1Fail
1.6:1Fail
4
1.7:1Fail
1.5:1Fail
1.2:1Fail
1.3:1Fail
5
2.1:1Fail
1.9:1Fail
1.6:1Fail
1.3:1Fail

Similar palettes

More like Abyssal Trench Mystery

View all dark
Abyss Gaze
Abyssal Bioluminescent Glow
Abyssal Coral Glow
Abyssal Depths
Abyssal Rift Shimmer
Abyssal Trench Dive