Back to palettes

Palette

Abyssal Reef Mystery

Delves into the dark, enigmatic world of the abyssal reef, with a gradient of deep, cool blues.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#011627#012F4B#024D73#026A9A#038BCD

Palette guide

How to use Abyssal Reef Mystery

Overview

The Abyssal Reef Mystery palette delves into the dark, enigmatic world of the abyssal reef, with a gradient of deep, cool blues. This monochrome collection features a profound progression from the almost black #011627 (Very Dark Blue) and #012F4B (Midnight Blue) to the increasingly luminous #024D73 (Dark Cerulean), #026A9A (Steel Blue), and #038BCD (Vivid Cerulean). Designers can leverage this palette to evoke a sense of depth, mystery, and scientific elegance, perfect for sophisticated branding, immersive digital experiences, or data-rich interfaces. Developers will find these blues excellent for establishing clear visual hierarchy in dark mode, creating subtle transitions, and building an authoritative yet intriguing aesthetic that speaks to hidden wonders.

Best used for

  • Scientific data visualization
  • Deep sea exploration documentaries
  • Sophisticated dark mode interfaces
  • Tech and software company branding
  • Environmental conservation websites
  • Mysterious digital art projects

Suggested color roles

primary

#011627 (Very Dark Blue) - The deepest shade, ideal for main backgrounds, navigation bars, and primary text in dark themes.

secondary

#012F4B (Midnight Blue) - A slightly lighter, yet still profound, blue for secondary panels, card backgrounds, or subtle dividers.

accent

#038BCD (Vivid Cerulean) - This bright, clear blue serves as a striking accent for interactive elements, hover states, or key data points.

background

#011627 (Very Dark Blue) - Creates an immersive, deep dark background, allowing the lighter blues to provide subtle contrast.

text

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

Accessibility notes

  • Ensure all text on the darkest backgrounds (#011627, #012F4B) uses white or very light grey for high contrast.
  • The lighter blues like #038BCD can be used for text on the deepest blues, but always verify WCAG compliance.
  • Avoid using mid-tones like #024D73 for small text elements on dark backgrounds, as contrast may be insufficient.
  • Use #038BCD strategically for critical interactive elements to ensure they stand out clearly against the deep blues.

Recommended combinations

Deep Dive

Excellent for layered backgrounds, deep content containers, or establishing a strong, mysterious base in dark themes.

#011627 · #012F4B · #024D73

Enigmatic Glow

Ideal for highlighting active states, data visualizations, or creating a subtle luminous effect in UI components.

#012F4B · #026A9A · #038BCD

Trench Gradient

Perfect for smooth background transitions, hero sections, or digital art that needs to convey profound depth.

#011627 · #024D73 · #038BCD

CSS variables

:root {
  --abyssal-reef-mystery-1: #011627;
  --abyssal-reef-mystery-2: #012F4B;
  --abyssal-reef-mystery-3: #024D73;
  --abyssal-reef-mystery-4: #026A9A;
  --abyssal-reef-mystery-5: #038BCD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-reef-mystery": {
        1: "#011627",
        2: "#012F4B",
        3: "#024D73",
        4: "#026A9A",
        5: "#038BCD",
      }
    }
  }
}

Related searches

deep blue monochrome paletteabyssal reef dark colorsocean mystery blue schemedark gradient UI designscientific blue palette

Palette colors

Hex values

Color 1#011627
·
Color 2#012F4B
·
Color 3#024D73
·
Color 4#026A9A
·
Color 5#038BCD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2:1Fail
3.1:1AA18
4.9:1AA
2
1.3:1Fail
1.5:1Fail
2.3:1Fail
3.7:1AA18
3
2:1Fail
1.5:1Fail
1.5:1Fail
2.4:1Fail
4
3.1:1AA18
2.3:1Fail
1.5:1Fail
1.6:1Fail
5
4.9:1AA
3.7:1AA18
2.4:1Fail
1.6:1Fail

Similar palettes

More like Abyssal Reef Mystery

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