Back to palettes

Palette

Abyssal Bioluminescence

Glimmering deep ocean colors with hints of mysterious, alien light from the abyss.

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

#0A1128#03396C#005B98#45A7A7#9FE3AF

Palette guide

How to use Abyssal Bioluminescence

Overview

Dive into the mysterious allure of the Abyssal Bioluminescence palette, a collection of deep ocean blues and vibrant aquatic greens. This palette, featuring the profound #0A1128, the rich #03396C, and the striking #45A7A7, is perfect for projects seeking a blend of depth, mystery, and subtle luminescence. Designers can leverage the darker hues for strong foundational elements, while developers will appreciate the clear contrast offered by the brighter tones like #9FE3AF for interactive elements. It evokes the eerie beauty of deep-sea life, making it ideal for creating immersive digital experiences or sophisticated branding that stands out.

Best used for

  • Dark mode UI/UX designs
  • Sci-fi or fantasy game environments
  • Marine conservation branding
  • Event invitations for evening galas
  • Digital art and illustration
  • Website headers with a mysterious theme

Suggested color roles

primary

Use #03396C as a dominant brand color for headings and key elements, providing a strong, deep blue presence.

secondary

Employ #005B98 for secondary UI components, subheadings, or as a complementary background for sections.

accent

Highlight interactive elements, calls to action, or graphic details with the vibrant teal #45A7A7 to draw attention.

background

Set the overall mood with #0A1128, a very dark blue that creates a profound, immersive backdrop.

text

For body text, use a light color like #9FE3AF or a crisp white for optimal readability against darker backgrounds.

Accessibility notes

  • Ensure sufficient contrast when pairing #9FE3AF with any darker color for text, aiming for AAA standards.
  • Avoid using #03396C on #0A1128 for small text; larger headings might work but check contrast.
  • The accent #45A7A7 provides good contrast against #0A1128 and #03396C for interactive elements.
  • Consider using a stark white or near-white for essential text elements to guarantee readability across the palette.

Recommended combinations

Deep Dive

Ideal for backgrounds, primary content, and luminous calls to action, creating depth and focus.

#0A1128 · #03396C · #9FE3AF

Abyss Glimmer

Excellent for layered UI elements, where different shades of blue provide structure and the teal acts as a subtle highlight.

#03396C · #005B98 · #45A7A7

Mystic Glow

Perfect for dramatic hero sections, showcasing a dark base with striking, glowing accents.

#0A1128 · #45A7A7 · #9FE3AF

CSS variables

:root {
  --abyssal-bioluminescence-3-1: #0A1128;
  --abyssal-bioluminescence-3-2: #03396C;
  --abyssal-bioluminescence-3-3: #005B98;
  --abyssal-bioluminescence-3-4: #45A7A7;
  --abyssal-bioluminescence-3-5: #9FE3AF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-bioluminescence-3": {
        1: "#0A1128",
        2: "#03396C",
        3: "#005B98",
        4: "#45A7A7",
        5: "#9FE3AF",
      }
    }
  }
}

Related searches

deep sea color schemebioluminescent ui colorsmysterious blue green palettedark aquatic brandingocean depths web design

Palette colors

Hex values

Color 1#0A1128
·
Color 2#03396C
·
Color 3#005B98
·
Color 4#45A7A7
·
Color 5#9FE3AF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
6.5:1AA
12.5:1AAA
2
1.6:1Fail
1.6:1Fail
4.1:1AA18
7.8:1AAA
3
2.6:1Fail
1.6:1Fail
2.5:1Fail
4.8:1AA
4
6.5:1AA
4.1:1AA18
2.5:1Fail
1.9:1Fail
5
12.5:1AAA
7.8:1AAA
4.8:1AA
1.9:1Fail

Similar palettes

More like Abyssal Bioluminescence

View all dark