Palette

Abyssal Coral Glow

A dark and alluring palette, reflecting the mysterious bioluminescent glow found in the deepest ocean trenches.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A0A#191970#4169E1#00BFFF#20B2AA

Palette guide

How to use Abyssal Coral Glow

Overview

The Abyssal Coral Glow palette is a dark and alluring collection, reflecting the mysterious bioluminescent glow found in the deepest ocean trenches. With a near-black #0A0A0A and deep navy #191970 as its foundation, it establishes a dramatic and sophisticated mood. The palette is brought to life by the rich #4169E1 and the vibrant #00BFFF, mimicking bursts of light, complemented by the grounding #20B2AA. Designers can leverage this palette for projects requiring high impact and a sense of wonder, while developers will find the clear contrast between dark backgrounds and bright accents, like #00BFFF, ideal for creating engaging and accessible user interfaces.

Best used for

Sci-fi game UI and environments
Luxury tech product launches
Dark theme web and mobile apps
Music event promotions
Digital art and illustration with glowing effects
Interactive educational content on marine biology

Suggested color roles

primary

Use #191970 for main content areas and structural elements, providing a deep, stable navy presence.

secondary

Apply #4169E1 for secondary information, subheadings, or background accents, adding a rich, royal blue layer.

accent

Make interactive elements, calls to action, or key data points pop with the vibrant #00BFFF, ensuring high visibility.

background

Establish a truly dark and mysterious base with #0A0A0A, allowing other colors to shine with contrast.

text

For softer, supporting text, consider #20B2AA. For main body text, a crisp white or very light grey is highly recommended against the dark background.

Accessibility notes

Ensure #00BFFF or white text provides sufficient contrast against #0A0A0A, #191970, and #4169E1 for readability.
The contrast between #191970 and #4169E1 can be low for small text; use for larger headings or graphical elements.
Always test text legibility, especially for smaller font sizes, when using #20B2AA on any of the darker blues.
A stark white is often the safest choice for critical text on dark backgrounds to meet accessibility standards.

Recommended combinations

Abyss Spark

Ideal for a dark background with primary content and a vivid, eye-catching bioluminescent accent.

#0A0A0A · #191970 · #00BFFF

Deep Sea Radiance

Creates a sophisticated blue-teal combination for layered UI elements, data visualization, or subtle highlights.

#191970 · #4169E1 · #20B2AA

Coral Highlight

Excellent for bold hero sections or graphic elements that demand attention with a dark base and two bright, contrasting accents.

#0A0A0A · #20B2AA · #00BFFF

CSS variables

:root {
  --abyssal-coral-glow-1: #0A0A0A;
  --abyssal-coral-glow-2: #191970;
  --abyssal-coral-glow-3: #4169E1;
  --abyssal-coral-glow-4: #00BFFF;
  --abyssal-coral-glow-5: #20B2AA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-coral-glow": {
        1: "#0A0A0A",
        2: "#191970",
        3: "#4169E1",
        4: "#00BFFF",
        5: "#20B2AA",
      }
    }
  }
}

Hex values

Color 1#0A0A0A

Color 2#191970

Color 3#4169E1

Color 4#00BFFF

Color 5#20B2AA

Accessibility

Contrast checker

1.3:1Fail

4.1:1AA18

9.3:1AAA

7.6:1AAA

1.3:1Fail

3.1:1AA18

7:1AA

5.7:1AA

4.1:1AA18

3.1:1AA18

2.3:1Fail

1.8:1Fail

9.3:1AAA

7:1AA

2.3:1Fail

1.2:1Fail

7.6:1AAA

5.7:1AA

1.8:1Fail

1.2:1Fail

Similar palettes

More like Abyssal Coral Glow

View all dark

Abyss Gaze

Abyssal Bioluminescent Glow