Palette

Abyssal Bioluminescence

Evoking the mysteries of the deep sea, with dark blues and a pop of bioluminescent glow.

DarkDark5 colors

More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000000#001F3F#1F3F60#3C91E6#CFFFE2

Palette guide

How to use Abyssal Bioluminescence

Overview

The Abyssal Bioluminescence palette captures the enigmatic beauty of the deep ocean, blending profound darks with unexpected vibrant glows. Anchored by pure black #000000 and the rich #001F3F, it creates a dramatic, sophisticated foundation. The striking #3C91E6 provides a vivid contrast, reminiscent of a sudden burst of light in the dark. Designers can utilize this palette for projects requiring a sense of mystery and modern elegance, while developers will find the clear differentiation between background, primary, and accent colors, like the luminous #CFFFE2, highly functional for UI development and readability.

Best used for

High-tech brand identities
Science fiction game interfaces
Luxury product websites
Educational content about marine life
Event posters for exclusive parties
Dark theme mobile applications

Suggested color roles

primary

Utilize #001F3F as the main content color or for prominent section backgrounds, offering a deep, sophisticated blue.

secondary

Apply #1F3F60 for secondary information, subheadings, or as a complementary background texture, adding subtle variation.

accent

Make interactive elements, calls to action, or key data points pop with the vibrant #3C91E6, ensuring high visibility.

background

Establish a profound, infinite backdrop using #000000, perfect for a truly dark mode or dramatic visual impact.

text

For highlight text or bioluminescent effects, use #CFFFE2. For general body text, crisp white or a very light grey is recommended.

Accessibility notes

Ensure #CFFFE2 or white text has sufficient contrast against #000000, #001F3F, and #1F3F60 for readability.
The bright #3C91E6 offers excellent contrast for interactive elements on dark backgrounds.
Avoid using #001F3F on #1F3F60 for small text due to low contrast; reserve for larger titles or graphical elements.
Always test text legibility, especially for smaller font sizes, when using any of the darker blues together.

Recommended combinations

Deep Glow

Perfect for a dark background with primary content and a striking, luminous highlight or call to action.

#000000 · #001F3F · #CFFFE2

Mystic Current

Creates a layered blue effect with a vibrant accent, suitable for data visualization or hierarchical information.

#001F3F · #1F3F60 · #3C91E6

Abyss Highlight

Excellent for bold hero sections or graphic elements that demand attention with a dark base and two bright accents.

#000000 · #3C91E6 · #CFFFE2

CSS variables

:root {
  --abyssal-bioluminescence-1: #000000;
  --abyssal-bioluminescence-2: #001F3F;
  --abyssal-bioluminescence-3: #1F3F60;
  --abyssal-bioluminescence-4: #3C91E6;
  --abyssal-bioluminescence-5: #CFFFE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-bioluminescence": {
        1: "#000000",
        2: "#001F3F",
        3: "#1F3F60",
        4: "#3C91E6",
        5: "#CFFFE2",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#001F3F

Color 3#1F3F60

Color 4#3C91E6

Color 5#CFFFE2

Accessibility

Contrast checker

1.3:1Fail

1.9:1Fail

6.4:1AA

19.1:1AAA

1.3:1Fail

1.5:1Fail

5:1AA

15:1AAA

1.9:1Fail

1.5:1Fail

3.3:1AA18

9.8:1AAA

6.4:1AA

5:1AA

3.3:1AA18

3:1Fail

19.1:1AAA

15:1AAA

9.8:1AAA

3:1Fail

Similar palettes

More like Abyssal Bioluminescence

View all Dark

Abyssal Seaweed Garden