Back to palettes

Palette

Abyssal Trench Mystery

Inky blacks blending into the darkest blues, plumbing the profound mysteries of an abyssal trench.

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

#0a141a#1f2a36#3d4c5c#5c738c#7d9ab0

Palette guide

How to use Abyssal Trench Mystery

Overview

The Abyssal Trench Mystery palette features inky blacks blending into the darkest blues, plumbing the profound mysteries of an abyssal trench. This dark and enigmatic collection showcases a gradient from the deep #0a141a (Very Dark Teal) and #1f2a36 (Dark Prussian Blue) to the increasingly lighter #3d4c5c (Steel Blue), #5c738c (Cadet Blue), and #7d9ab0 (Light Blue Grey). Designers can leverage this palette to evoke a sense of quiet power, deep contemplation, and sophisticated mystery, perfect for dark mode interfaces, immersive storytelling, or high-tech branding. Developers will find these blues excellent for establishing subtle visual hierarchy and creating distinct sections, ensuring an elegant and authoritative aesthetic that speaks to hidden depths and untold secrets.

Best used for

  • Dark mode UI/UX design
  • Mysterious narrative games
  • Luxury brand websites
  • Environmental research visuals
  • Sci-fi or fantasy interfaces
  • Abstract digital art

Suggested color roles

primary

#0a141a (Very Dark Teal) - The deepest shade, ideal for main backgrounds, navigation bars, and primary content containers, providing profound depth.

secondary

#1f2a36 (Dark Prussian Blue) - A slightly softer dark blue, perfect for secondary panels, card backgrounds, or subtle dividing lines.

accent

#5c738c (Cadet Blue) - Use this muted blue for interactive elements, hover states, or to highlight key data points with a subtle glow.

background

#0a141a (Very Dark Teal) - Creates an immersive, inky black background, making any lighter elements subtly stand out.

text

White (#FFFFFF) or a very light grey (#F0F0F0) provides optimal contrast for readability against all dark colors in this palette.

Accessibility notes

  • Ensure all text, especially on the darkest backgrounds, uses white or very light grey for high contrast and readability.
  • The palette is predominantly dark; avoid using any of the darker blues for text on similar dark backgrounds.
  • When using #5c738c as an accent, ensure it has sufficient contrast against the surrounding darker blues.
  • Consider using a slightly brighter white for critical calls-to-action to ensure they are easily discoverable.

Recommended combinations

Shadowed Depths

Excellent for creating layered dark backgrounds, deep content containers, or subtle depth effects in UI design.

#0A141A · #1F2A36 · #3D4C5C

Mystic Glimmer

Ideal for highlighting active states, subtle calls-to-action, or creating a mysterious glow against profound darks.

#1F2A36 · #5C738C · #7D9AB0

Abyssal Contrast

Perfect for establishing clear visual hierarchy between deep background and important foreground elements.

#0A141A · #3D4C5C · #7D9AB0

CSS variables

:root {
  --abyssal-trench-mystery-2-1: #0a141a;
  --abyssal-trench-mystery-2-2: #1f2a36;
  --abyssal-trench-mystery-2-3: #3d4c5c;
  --abyssal-trench-mystery-2-4: #5c738c;
  --abyssal-trench-mystery-2-5: #7d9ab0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-trench-mystery-2": {
        1: "#0a141a",
        2: "#1f2a36",
        3: "#3d4c5c",
        4: "#5c738c",
        5: "#7d9ab0",
      }
    }
  }
}

Related searches

deep blue shadow paletteabyssal dark UI colorsmysterious ocean themedark teal blue designsophisticated dark blue palette

Palette colors

Hex values

Color 1#0a141a
·
Color 2#1f2a36
·
Color 3#3d4c5c
·
Color 4#5c738c
·
Color 5#7d9ab0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.1:1Fail
3.8:1AA18
6.3:1AA
2
1.3:1Fail
1.7:1Fail
3:1Fail
4.9:1AA
3
2.1:1Fail
1.7:1Fail
1.8:1Fail
3:1Fail
4
3.8:1AA18
3:1Fail
1.8:1Fail
1.7:1Fail
5
6.3:1AA
4.9:1AA
3:1Fail
1.7:1Fail

Similar palettes

More like Abyssal Trench Mystery

View all dark
Deepwater Cave
Mariana Trench Echo
Oceanic Trench Dive
Abyssal Coral Forms
Abyssal Trench Mystery
Bioluminescent Deep Trench