Back to palettes

Palette

Abyssal Reef Shadow

The profound and mysterious depths of an abyssal reef, where deep blues and inky shadows hide unknown wonders.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000080#0F1E2E#1E3A4D#2C3E50#08121D

Palette guide

How to use Abyssal Reef Shadow

Overview

The Abyssal Reef Shadow palette captures the profound and mysterious depths of an abyssal reef, where deep blues and inky shadows hide unknown wonders. This dark and enigmatic collection features a powerful contrast between the deep #000080 (Navy Blue) and a series of dark, muted blues like #0F1E2E (Dark Slate Blue), #1E3A4D (Prussian Blue), and #2C3E50 (Charcoal Blue), grounded by the very dark #08121D (Deep Midnight Blue). Designers can leverage this palette to evoke a sense of quiet power, mystery, and sophistication, perfect for dark mode interfaces, immersive storytelling, or high-tech branding. Developers will find these blues excellent for establishing 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

#08121D (Deep Midnight Blue) - The darkest, most foundational shade for main backgrounds and structural elements, providing profound depth.

secondary

#0F1E2E (Dark Slate Blue) - A slightly softer dark blue, perfect for secondary panels, card backgrounds, or subtle dividing lines.

accent

#000080 (Navy Blue) - Use this slightly brighter, rich blue for interactive elements, hover states, or to highlight key data points with a subtle glow.

background

#08121D (Deep Midnight 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 all dark blues 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 #000080 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

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

#08121D · #0F1E2E · #1E3A4D

Mystic Glimmer

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

#0F1E2E · #2C3E50 · #000080

Abyssal Contrast

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

#08121D · #1E3A4D · #000080

CSS variables

:root {
  --abyssal-reef-shadow-1: #000080;
  --abyssal-reef-shadow-2: #0F1E2E;
  --abyssal-reef-shadow-3: #1E3A4D;
  --abyssal-reef-shadow-4: #2C3E50;
  --abyssal-reef-shadow-5: #08121D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-reef-shadow": {
        1: "#000080",
        2: "#0F1E2E",
        3: "#1E3A4D",
        4: "#2C3E50",
        5: "#08121D",
      }
    }
  }
}

Related searches

deep blue shadow paletteabyssal dark UI colorsmysterious ocean themenavy blue charcoal designsophisticated dark blue palette

Palette colors

Hex values

Color 1#000080
·
Color 2#0F1E2E
·
Color 3#1E3A4D
·
Color 4#2C3E50
·
Color 5#08121D
·

Accessibility

Contrast checker

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

Similar palettes

More like Abyssal Reef Shadow

View all dark
Abyssal Trench Creatures
Deep Ocean Abyss
Deep Ocean Mariana
Deep Ocean Trench
Abyss Gaze
Abyssal Bioluminescence