Palette

Abyss Glow Deep

Exploring the enigmatic depths of the ocean, where hidden light illuminates shadowy forms.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Abyss Glow Deep 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 Abyss Glow Deep.

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

Data visualization

#0A1C2C#2E475C#617A8A#A6BCC4#00FFBB

Palette guide

How to use Abyss Glow Deep

Overview

The Abyss Glow Deep palette explores the enigmatic depths of the ocean, where hidden light illuminates shadowy forms. Featuring a near-black Deep Blue (#0A1C2C), a rich Dark Slate Blue (#2E475C), a balanced Cadet Gray (#617A8A), a lighter Light Slate Gray (#A6BCC4), and a striking Aqua Green (#00FFBB), this collection offers a captivating contrast between dark, cool neutrals and a vibrant, bioluminescent accent. Designers and developers can leverage these hues to create immersive dark mode UI, sophisticated branding, or evocative digital art. Its ability to combine profound depth with a single, glowing highlight ensures designs are both mysterious and visually engaging, perfect for conveying a sense of wonder.

Best used for

Dark mode UI/UX designs for apps and websites
Sci-fi or fantasy-themed digital art
Luxury branding with a mysterious edge
Environmental documentaries and deep-sea media
Abstract space or underwater graphics
Gaming interfaces requiring atmospheric depth

Suggested color roles

primary

#0A1C2C (Deep Blue) - Use this deepest blue for dominant backgrounds, large sections, or primary text to establish profound depth and mystery.

secondary

#2E475C (Dark Slate Blue) - Excellent for secondary content areas, prominent navigation, or to provide a rich, slightly lighter tone for hierarchy.

accent

#00FFBB (Aqua Green) - Deploy this vibrant aqua green sparingly for highlights, interactive states, or small details that need to truly pop with a bioluminescent effect.

background

Utilize #0A1C2C (Deep Blue) for an immersive, dark backdrop or #2E475C (Dark Slate Blue) for a slightly less intense, yet deep and mysterious canvas.

text

For optimal readability, use crisp white (#FFFFFF) or #A6BCC4 (Light Slate Gray) on darker backgrounds, and #00FFBB (Aqua Green) for key interactive elements.

Accessibility notes

Ensure sufficient contrast when using #A6BCC4 (Light Slate Gray) for text on mid-tone blue backgrounds; always test for readability.
Always verify contrast ratios for all text and interactive elements to meet WCAG AA or AAA standards, especially for small text on dark backgrounds.
Be mindful that subtle tonal shifts between #0A1C2C and #2E475C might not provide enough distinction for all users; use other cues for interactive elements.
The vibrant #00FFBB accent requires careful placement to avoid overwhelming the user or causing visual fatigue; use it for specific focal points.

Recommended combinations

Deep Mystery

Ideal for creating layered backgrounds, immersive hero sections, or a strong, harmonious base for dark-themed designs.

#0A1C2C · #2E475C · #617A8A

Biolume Pop

Effective for highlights, interactive elements, or to represent bioluminescent effects against a dark, mysterious backdrop.

#00FFBB · #0A1C2C · #2E475C

Subtle Shimmer

Perfect for data visualizations, progress bars, or any element requiring a soft transition with a glowing, unexpected accent.

#617A8A · #A6BCC4 · #00FFBB

CSS variables

:root {
  --abyss-glow-deep-1: #0A1C2C;
  --abyss-glow-deep-2: #2E475C;
  --abyss-glow-deep-3: #617A8A;
  --abyss-glow-deep-4: #A6BCC4;
  --abyss-glow-deep-5: #00FFBB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyss-glow-deep": {
        1: "#0A1C2C",
        2: "#2E475C",
        3: "#617A8A",
        4: "#A6BCC4",
        5: "#00FFBB",
      }
    }
  }
}

Hex values

Color 1#0A1C2C

Color 2#2E475C

Color 3#617A8A

Color 4#A6BCC4

Color 5#00FFBB

Accessibility

Contrast checker

1.8:1Fail

3.8:1AA18

8.7:1AAA

13.2:1AAA

1.8:1Fail

2.1:1Fail

4.9:1AA

7.4:1AAA

3.8:1AA18

2.1:1Fail

2.3:1Fail

3.4:1AA18

8.7:1AAA

4.9:1AA

2.3:1Fail

1.5:1Fail

13.2:1AAA

7.4:1AAA

3.4:1AA18

1.5:1Fail

Similar palettes

More like Abyss Glow Deep

View all dark

Abyssal Light Veil

Abyssal Luminous Depths

Deep Ocean Mariana

Oceanic Abyss Mystery

Oceanic Bioluminescence Dream

Abyss Gaze