Palette

Deep Sea Bioluminescence

Plunge into the ocean's inky blackness, illuminated by vivid flashes of cool, ethereal bioluminescence.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A0A#00BFFF#00FFFF#8A2BE2#20B2AA

Palette guide

How to use Deep Sea Bioluminescence

Overview

The Deep Sea Bioluminescence palette (version 4) plunges into the ocean's inky blackness, illuminated by vivid flashes of cool, ethereal bioluminescence. Ranging from the profound #0A0A0A to the striking #8A2BE2, this palette is ideal for designs that demand drama, mystique, and a sense of otherworldly beauty. Designers can craft immersive digital experiences, captivating branding, and unique UI themes. Developers will find these hex codes perfect for projects related to science fiction, fantasy, or any application that benefits from a dark, dynamic, and visually striking aesthetic. The interplay between #00BFFF and #00FFFF allows for excellent vivid highlights.

Best used for

Science fiction game interfaces or branding
Abstract art digital showcases
Dark mode UI with vibrant, ethereal accents
Environmental awareness campaigns (deep sea creatures)
Interactive museum exhibits (natural history)
Cosmic or space-themed designs

Suggested color roles

primary

Utilize #0A0A0A as the main background or primary content color, providing a deep, mysterious, and stable foundation.

secondary

Apply #00BFFF for secondary content areas, panels, or navigation, offering a vibrant visual distinction and layered effect.

accent

Introduce #8A2BE2 as a powerful, luminous accent for calls-to-action, key features, or interactive elements, ensuring maximum impact.

background

The deepest hue, #0A0A0A, is excellent for expansive backgrounds or header sections, establishing an immediate tone of profound abyss.

text

For optimal readability, use a crisp white or very light gray. #00FFFF can be used for larger headings or highlights on the darkest backgrounds.

Accessibility notes

Ensure high contrast for text on #0A0A0A by using light text (e.g., white, #00BFFF, #00FFFF).
The bright colors like #00BFFF, #00FFFF, #8A2BE2, and #20B2AA may have insufficient contrast for small text on lighter backgrounds if not used carefully.
Avoid using #0A0A0A and other dark colors too close for critical elements without careful contrast checks.
Always test color combinations with accessibility tools to ensure WCAG compliance for readability.

Recommended combinations

Inky Depths

Ideal for a dark background with vibrant, glowing accents, perfect for highlighting interactive elements or data points.

#0A0A0A · #00BFFF · #00FFFF

Ethereal Glow

Use #0A0A0A as a base, with #8A2BE2 for secondary elements and #20B2AA for vibrant, ethereal highlights or interactive states.

#0A0A0A · #8A2BE2 · #20B2AA

Electric Contrast

Excellent for a dark, profound background with two strong, luminous accents for dynamic visual interest.

#0A0A0A · #00FFFF · #8A2BE2

CSS variables

:root {
  --deep-sea-bioluminescence-4-1: #0A0A0A;
  --deep-sea-bioluminescence-4-2: #00BFFF;
  --deep-sea-bioluminescence-4-3: #00FFFF;
  --deep-sea-bioluminescence-4-4: #8A2BE2;
  --deep-sea-bioluminescence-4-5: #20B2AA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-sea-bioluminescence-4": {
        1: "#0A0A0A",
        2: "#00BFFF",
        3: "#00FFFF",
        4: "#8A2BE2",
        5: "#20B2AA",
      }
    }
  }
}

Hex values

Color 1#0A0A0A

Color 2#00BFFF

Color 3#00FFFF

Color 4#8A2BE2

Color 5#20B2AA

Accessibility

Contrast checker

9.3:1AAA

15.8:1AAA

3.3:1AA18

7.6:1AAA

9.3:1AAA

1.7:1Fail

2.8:1Fail

1.2:1Fail

15.8:1AAA

1.7:1Fail

4.8:1AA

2.1:1Fail