Palette

Abyssal Glow Wonders

Explores the mysterious glow of deep-sea creatures against the dark, vast ocean depths.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0B0E23#1F385F#3B6B99#7DAFD9#BBD6ED

Palette guide

How to use Abyssal Glow Wonders

Overview

The Abyssal Glow Wonders palette explores the mysterious glow of deep-sea creatures against the dark, vast ocean depths. Anchored by the profound #0B0E23 and the rich #1F385F, it offers a cool, dark foundation. The palette progresses through the muted #3B6B99 to the tranquil #7DAFD9, culminating in the ethereal #BBD6ED. Designers can leverage this spectrum for projects requiring a sophisticated, mysterious, and calm aesthetic, ideal for conveying depth and subtle wonder. Developers will find the gradual shift in luminance, especially with the bright #BBD6ED, excellent for creating clear visual hierarchies and readable content in dark-themed interfaces.

Best used for

Luxury brand identity
Environmental awareness campaigns
Art and photography showcases
High-end tech product interfaces
Calm and reflective digital spaces
Mysterious narrative game environments

Suggested color roles

primary

Use #1F385F for main content blocks and prominent visual elements, providing a solid, deep blue presence.

secondary

Apply #3B6B99 for secondary navigation, subheadings, or as a softer background for content sections, adding visual interest.

accent

Highlight interactive elements, calls to action, or key information with the tranquil #7DAFD9 to draw attention gently.

background

Set a deep, contemplative mood with #0B0E23, creating an expansive and mysterious backdrop.

text

For primary text, especially against darker hues, use #BBD6ED to ensure excellent readability and a soft, luminous effect.

Accessibility notes

The lightest color, #BBD6ED, provides excellent contrast for text against all darker colors in the palette.
Avoid using #1F385F on #0B0E23 for small text due to insufficient contrast; reserve for large headings or graphical elements.
Ensure text using #3B6B99 or #7DAFD9 has adequate contrast, particularly on lighter backgrounds if used differently.
Always check contrast ratios for any text and background pairings, especially with the mid-tones.

Recommended combinations

Deep Luminous

Ideal for foundational elements with primary content and a luminous, highly readable text or highlight.

#0B0E23 · #1F385F · #BBD6ED

Glow Gradient

Creates a harmonious blue gradient, perfect for layered UI components, charts, or subtle background animations.

#1F385F · #3B6B99 · #7DAFD9

Abyssal Light

Excellent for hero sections that need a dark, mysterious base with soft, glowing accents and clear text.

#0B0E23 · #7DAFD9 · #BBD6ED

CSS variables

:root {
  --abyssal-glow-wonders-1: #0B0E23;
  --abyssal-glow-wonders-2: #1F385F;
  --abyssal-glow-wonders-3: #3B6B99;
  --abyssal-glow-wonders-4: #7DAFD9;
  --abyssal-glow-wonders-5: #BBD6ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-glow-wonders": {
        1: "#0B0E23",
        2: "#1F385F",
        3: "#3B6B99",
        4: "#7DAFD9",
        5: "#BBD6ED",
      }
    }
  }
}

Hex values

Color 1#0B0E23

Color 2#1F385F

Color 3#3B6B99

Color 4#7DAFD9

Color 5#BBD6ED

Accessibility

Contrast checker

1.6:1Fail

3.4:1AA18

8.2:1AAA

12.7:1AAA

1.6:1Fail

2.1:1Fail

5:1AA

7.8:1AAA

3.4:1AA18

2.1:1Fail

2.4:1Fail

3.7:1AA18

8.2:1AAA

5:1AA

2.4:1Fail

1.5:1Fail

12.7:1AAA

7.8:1AAA

3.7:1AA18

1.5:1Fail

Similar palettes

More like Abyssal Glow Wonders

View all dark

Abyss Gaze

Abyssal Bioluminescent Glow