Palette

Abyssal Bioluminescent Glow

Plunging into the profound depths, this palette showcases the mysterious blues and unexpected glows of the abyssal ocean.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Abyssal Bioluminescent Glow 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 Bioluminescent Glow.

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

Data visualization

#0A0A10#001F3F#191970#00CED1#483D8B

Palette guide

How to use Abyssal Bioluminescent Glow

Overview

The Abyssal Bioluminescent Glow palette plunges into the profound darkness of the ocean, highlighting mysterious blues and unexpected glows. Featuring the near-black #0A0A10 and deep #001F3F, it sets a dramatic, sophisticated stage. The palette is punctuated by the vivid #00CED1, mimicking bioluminescent organisms, and the rich #191970 and #483D8B which add depth and subtle complexity. Designers can use this for immersive digital environments, while developers will find its dark foundations and bright accents, like the striking #00CED1, ideal for creating engaging user interfaces with clear visual hierarchy and a captivating aesthetic.

Best used for

Immersive digital experiences and games
Luxury tech product branding
Dark theme web applications
Sci-fi or fantasy art concepts
Marine documentary graphics
Interactive data visualizations

Suggested color roles

primary

Use #001F3F for main content areas, providing a deep, foundational blue that is dark yet distinct from the background.

secondary

Apply #191970 for secondary content blocks, navigation, or subtle dividers, adding a rich, dark blue-purple layer.

accent

Make a strong visual impact with #00CED1 for calls to action, glowing elements, or key interactive states.

background

Establish a truly dark and mysterious base with #0A0A10, ensuring other colors pop with depth.

text

For softer, supporting text, utilize #483D8B. For main body text, a crisp white or a very light grey is highly recommended against the dark background.

Accessibility notes

Ensure #00CED1 has high contrast against #0A0A10 and #001F3F for text and interactive elements.
Avoid using #483D8B for small text on #0A0A10 or #001F3F; it's best for larger headings or graphical elements.
Pair white or a very light grey with #0A0A10, #001F3F, and #191970 for optimal body text readability.
The contrast between #191970 and #483D8B is low; use them together for subtle shading rather than critical information.

Recommended combinations

Abyss Spark

Ideal for a dark background, primary content, and a vivid, eye-catching bioluminescent accent.

#0A0A10 · #001F3F · #00CED1

Deep Gradient

Creates a sophisticated, layered blue-purple effect, perfect for subtle background transitions or complex UI elements.

#001F3F · #191970 · #483D8B

Glow Horizon

Showcases a dark base with a muted secondary color and a powerful, luminous highlight for dramatic visuals.

#0A0A10 · #483D8B · #00CED1

CSS variables

:root {
  --abyssal-bioluminescent-glow-1: #0A0A10;
  --abyssal-bioluminescent-glow-2: #001F3F;
  --abyssal-bioluminescent-glow-3: #191970;
  --abyssal-bioluminescent-glow-4: #00CED1;
  --abyssal-bioluminescent-glow-5: #483D8B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-bioluminescent-glow": {
        1: "#0A0A10",
        2: "#001F3F",
        3: "#191970",
        4: "#00CED1",
        5: "#483D8B",
      }
    }
  }
}

Hex values

Color 1#0A0A10

Color 2#001F3F

Color 3#191970

Color 4#00CED1

Color 5#483D8B

Accessibility

Contrast checker

1.2:1Fail

1.3:1Fail

10.1:1AAA

2.2:1Fail

1.2:1Fail

1.1:1Fail

8.5:1AAA

1.8:1Fail

1.3:1Fail

1.1:1Fail

7.6:1AAA

1.6:1Fail

10.1:1AAA

8.5:1AAA

7.6:1AAA

4.6:1AA

2.2:1Fail

1.8:1Fail

1.6:1Fail

4.6:1AA

Similar palettes

More like Abyssal Bioluminescent Glow