Back to palettes

Palette

Abyssal Trench Mystery

The profound, inky blues and purples of the ocean's deepest trenches, holding secrets in the eternal dark.

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

#0A1931#182C4A#27476D#0F385B#1B5E20

Palette guide

How to use Abyssal Trench Mystery

Overview

The Abyssal Trench Mystery palette captures the profound, inky blues and purples of the ocean's deepest trenches, holding secrets in the eternal dark. This dark and mysterious collection features a powerful progression from the deep #0A1931 (Dark Sapphire) and #182C4A (Prussian Blue) to the rich #27476D (Dark Cerulean), accented by #0F385B (Navy Blue) and a surprising #1B5E20 (Forest Green). 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 and greens excellent for establishing subtle visual hierarchy and creating distinct sections, ensuring an elegant and authoritative aesthetic that speaks to hidden, otherworldly beauty.

Best used for

  • Dark mode UI/UX design
  • Fantasy or sci-fi interfaces
  • Luxury brand websites
  • Mysterious digital art creations
  • Deep ocean themed websites
  • Abstract cosmic designs

Suggested color roles

primary

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

secondary

#182C4A (Prussian Blue) - A slightly lighter, yet still deep, blue-purple for secondary panels, card backgrounds, or subtle dividing lines.

accent

#1B5E20 (Forest Green) - Use this deep green for interactive elements, hover states, or to highlight key data points with a touch of otherworldly glow.

background

#0A1931 (Dark Sapphire) - Creates an immersive, inky dark 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/greens for text on similar dark backgrounds.
  • When using #1B5E20 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

Trench Depths

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

#0A1931 · #182C4A · #27476D

Mystic Glow

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

#182C4A · #0F385B · #1B5E20

Abyssal Contrast

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

#0A1931 · #27476D · #1B5E20

CSS variables

:root {
  --abyssal-trench-mystery-3-1: #0A1931;
  --abyssal-trench-mystery-3-2: #182C4A;
  --abyssal-trench-mystery-3-3: #27476D;
  --abyssal-trench-mystery-3-4: #0F385B;
  --abyssal-trench-mystery-3-5: #1B5E20;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-trench-mystery-3": {
        1: "#0A1931",
        2: "#182C4A",
        3: "#27476D",
        4: "#0F385B",
        5: "#1B5E20",
      }
    }
  }
}

Related searches

deep blue green paletteabyssal trench dark colorsmysterious ocean themedark cool blue green designunderwater mystery colors

Palette colors

Hex values

Color 1#0A1931
·
Color 2#182C4A
·
Color 3#27476D
·
Color 4#0F385B
·
Color 5#1B5E20
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
1.5:1Fail
2.2:1Fail
2
1.3:1Fail
1.5:1Fail
1.2:1Fail
1.8:1Fail
3
1.8:1Fail
1.5:1Fail
1.3:1Fail
1.2:1Fail
4
1.5:1Fail
1.2:1Fail
1.3:1Fail
1.5:1Fail
5
2.2:1Fail
1.8:1Fail
1.2:1Fail
1.5:1Fail

Similar palettes

More like Abyssal Trench Mystery

View all dark
Mariana Trench Enigma
Bioluminescent Deep Trench
Dark Sea Onyx
Deep Ocean Abyssal
Deep Ocean Caverns
Deep Sea Explorer