Palette

Abyssal Reef Glow

Explore the mysterious depths of the ocean where vibrant bioluminescent life shines in the darkness.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000080#191970#4169E1#00FFFF#8A2BE2

Palette guide

How to use Abyssal Reef Glow

Overview

The Abyssal Reef Glow palette explores the mysterious depths of the ocean where vibrant bioluminescent life shines in the darkness. This dark and intriguing collection features deep blues like #000080 (Navy Blue) and #191970 (Midnight Blue), punctuated by striking, luminous accents. Designers can leverage this palette to evoke a sense of wonder, mystery, and dynamic contrast, perfect for sci-fi interfaces, gaming environments, or captivating digital art. Developers will find the vibrant #00FFFF (Cyan) and rich #8A2BE2 (Blue Violet) excellent for interactive elements, glowing indicators, and establishing clear visual hierarchy against the profound, dark blues. This palette ensures a memorable and visually stunning user experience.

Best used for

Sci-fi game interfaces
Mysterious digital art
Event lighting design inspiration
Dark mode UI with vibrant accents
Fantasy storytelling visuals
Underwater themed branding

Suggested color roles

primary

#000080 (Navy Blue) - A deep, foundational blue for primary backgrounds, content areas, or main structural elements.

secondary

#191970 (Midnight Blue) - A slightly softer, yet still profound, blue for secondary panels, card backgrounds, or subtle dividers.

accent

#00FFFF (Cyan) - This vivid, luminous cyan is perfect for glowing accents, interactive elements, or to highlight critical information.

background

#000080 (Navy Blue) or #191970 (Midnight Blue) - Creates an immersive dark canvas, allowing the vibrant accents to truly glow.

text

White (#FFFFFF) or a very light grey (#F0F0F0) provides optimal contrast for readability against the dark blues. #00FFFF can be used for glowing headlines.

Accessibility notes

Ensure sufficient contrast when using #00FFFF for text, particularly against backgrounds lighter than #191970.
The dark blues require light text (white or light grey) for legibility; avoid using dark text on these shades.
Use #8A2BE2 for accents or short, impactful phrases rather than large blocks of text to maintain readability.
Always test vibrant accents like #00FFFF on interactive elements to ensure they meet accessibility contrast standards.

Recommended combinations

Bioluminescent Depths

Ideal for creating a dark, mysterious background with a striking, glowing focal point in UI or digital art.

#000080 · #191970 · #00FFFF

Mystic Energy

Excellent for highlighting interactive elements, energy bars in games, or abstract patterns that need a vibrant pop.

#191970 · #8A2BE2 · #00FFFF

Reef Shadow

Perfect for creating subtle depth and ethereal glows in illustrations, background elements, or data visualizations.

#000080 · #4169E1 · #8A2BE2

CSS variables

:root {
  --abyssal-reef-glow-1: #000080;
  --abyssal-reef-glow-2: #191970;
  --abyssal-reef-glow-3: #4169E1;
  --abyssal-reef-glow-4: #00FFFF;
  --abyssal-reef-glow-5: #8A2BE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-reef-glow": {
        1: "#000080",
        2: "#191970",
        3: "#4169E1",
        4: "#00FFFF",
        5: "#8A2BE2",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#191970

Color 3#4169E1

Color 4#00FFFF

Color 5#8A2BE2

Accessibility

Contrast checker

1.1:1Fail

3.3:1AA18

12.8:1AAA

2.7:1Fail

1.1:1Fail

3.1:1AA18

11.8:1AAA

2.5:1Fail

3.3:1AA18

3.1:1AA18

3.9:1AA18

1.2:1Fail

12.8:1AAA

11.8:1AAA

3.9:1AA18

4.8:1AA

2.7:1Fail

2.5:1Fail

1.2:1Fail

4.8:1AA

Similar palettes

More like Abyssal Reef Glow

Abyssal Bioluminescence

Abyssal Bioluminescent Glow

Abyssal Coral Bloom