Back to palettes

Palette

Abyssal Trench Mystery

Shades of profound blue and grey echo the enigmatic depths of the 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

#C8DCE6#8EB3C7#4D7F9B#2D4C61#1C2B3A

Palette guide

How to use Abyssal Trench Mystery

Overview

The Abyssal Trench Mystery palette features shades of profound blue and grey, echoing the enigmatic depths of the abyssal trench. This dark and mysterious collection transitions from the luminous #C8DCE6 (Light Blue Grey) and #8EB3C7 (Cadet Blue) through the balanced #4D7F9B (Steel Blue) and #2D4C61 (Dark Cerulean), culminating in the deepest #1C2B3A (Prussian Blue). Designers can leverage this palette to evoke a sense of quiet power, deep contemplation, and sophisticated mystery, perfect for dark mode interfaces, scientific visualizations, or serene digital art. Developers will find these blues and greys 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

#1C2B3A (Prussian Blue) - The deepest shade, ideal for main backgrounds, navigation bars, and primary content containers, providing profound depth.

secondary

#2D4C61 (Dark Cerulean) - A slightly lighter, yet still deep, blue-grey for secondary panels, card backgrounds, or subtle dividing lines.

accent

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

background

#1C2B3A (Prussian Blue) - 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 the dark colors. For lighter backgrounds, #1C2B3A provides excellent dark text.

Accessibility notes

  • Ensure all text on the darkest backgrounds, like #1C2B3A, uses white or very light grey for high contrast and readability.
  • The lighter shades like #C8DCE6 should be used for background elements, not small text on light backgrounds.
  • When using #4D7F9B as an accent, ensure it has sufficient contrast against the surrounding darker shades.
  • 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.

#1C2B3A · #2D4C61 · #4D7F9B

Mystic Glimmer

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

#2D4C61 · #8EB3C7 · #C8DCE6

Abyssal Contrast

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

#1C2B3A · #4D7F9B · #C8DCE6

CSS variables

:root {
  --abyssal-trench-mystery-4-1: #C8DCE6;
  --abyssal-trench-mystery-4-2: #8EB3C7;
  --abyssal-trench-mystery-4-3: #4D7F9B;
  --abyssal-trench-mystery-4-4: #2D4C61;
  --abyssal-trench-mystery-4-5: #1C2B3A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-trench-mystery-4": {
        1: "#C8DCE6",
        2: "#8EB3C7",
        3: "#4D7F9B",
        4: "#2D4C61",
        5: "#1C2B3A",
      }
    }
  }
}

Related searches

deep blue grey paletteabyssal dark UI colorsmysterious ocean themedark cool blue designsophisticated dark blue palette

Palette colors

Hex values

Color 1#C8DCE6
·
Color 2#8EB3C7
·
Color 3#4D7F9B
·
Color 4#2D4C61
·
Color 5#1C2B3A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.1:1AA18
6.4:1AA
10.2:1AAA
2
1.6:1Fail
2:1Fail
4.1:1AA18
6.5:1AA
3
3.1:1AA18
2:1Fail
2.1:1Fail
3.3:1AA18
4
6.4:1AA
4.1:1AA18
2.1:1Fail
1.6:1Fail
5
10.2:1AAA
6.5:1AA
3.3:1AA18
1.6:1Fail

Similar palettes

More like Abyssal Trench Mystery

View all dark
Deep Ocean Abyss
Deep Ocean Enigma
Deep Ocean Trench
Deep Sea Cavern
Ocean Depths Dream
Abyssal Midnight Reef