Palette

Submarine Bioluminescence

Deep, mysterious blues and electric accents, capturing the elusive light of bioluminescent life in the ocean abyss.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000033#000080#40E0D0#8A2BE2#FFD700

Palette guide

How to use Submarine Bioluminescence

Overview

The Submarine Bioluminescence palette combines deep, mysterious blues with electric accents, capturing the elusive light of life in the ocean abyss. Featuring #000033 (Deep Navy) and #000080 (Navy) as its foundation, it introduces vibrant pops with #40E0D0 (Turquoise), #8A2BE2 (Blue Violet), and #FFD700 (Gold). This palette is a dream for designers and developers crafting immersive, futuristic, or fantasy-themed experiences. Its high contrast and glowing accents are perfect for evoking wonder and sophisticated technological aesthetics, especially in dark mode interfaces.

Best used for

Sci-fi game interfaces and environments
Futuristic technology branding
Immersive digital art installations
Luxury entertainment websites
Cosmic or deep-sea themed projects
Interactive data visualizations

Suggested color roles

primary

#000080 (Navy): A strong, dark foundation for main UI elements, headers, and backgrounds where depth is desired.

secondary

#000033 (Deep Navy): The ideal primary background for a dark, abyssal theme, allowing brighter accents to truly glow and stand out.

accent

#40E0D0 (Turquoise): Perfect for glowing interactive elements, subtle highlights, or to represent bioluminescent effects in a design.

background

#000033 (Deep Navy): Serves as the deep, mysterious canvas for the entire palette, providing the perfect contrast for the electric accent colors.

text

#8A2BE2 (Blue Violet): Can be used for captivating headings or emphasized text on dark backgrounds. For main body text, a bright white or light grey is recommended for readability.

Accessibility notes

Ensure sufficient contrast for text, especially when using #8A2BE2 on dark backgrounds; a lighter text color might be needed for body copy.
The bright accents (#40E0D0, #FFD700) provide excellent contrast on the deep blues, making them suitable for critical UI elements.
Avoid using #FFD700 for large blocks of text due to its high luminance which can cause eye strain against a dark background.
Always verify WCAG compliance for interactive elements and text, particularly for smaller font sizes.

Recommended combinations

Deep Glow

Creates a mysterious, glowing effect, ideal for dark mode UIs, futuristic interfaces, or subtle interactive elements.

#000033 · #000080 · #40E0D0

Electric Abyss

A high-contrast, energetic blend perfect for calls to action, prominent highlights, or captivating visual storytelling.

#8A2BE2 · #FFD700 · #000080

Mystery Light

Evokes bioluminescent patterns, great for background textures, animated elements, or unique feature call-outs.

#40E0D0 · #FFD700 · #000033

CSS variables

:root {
  --submarine-bioluminescence-1: #000033;
  --submarine-bioluminescence-2: #000080;
  --submarine-bioluminescence-3: #40E0D0;
  --submarine-bioluminescence-4: #8A2BE2;
  --submarine-bioluminescence-5: #FFD700;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "submarine-bioluminescence": {
        1: "#000033",
        2: "#000080",
        3: "#40E0D0",
        4: "#8A2BE2",
        5: "#FFD700",
      }
    }
  }
}

Hex values

Color 1#000033

Color 2#000080

Color 3#40E0D0

Color 4#8A2BE2

Color 5#FFD700

Accessibility

Contrast checker

1.3:1Fail

12.2:1AAA

3.4:1AA18

14.3:1AAA

1.3:1Fail

9.8:1AAA

2.7:1Fail

11.4:1AAA