Back to palettes

Palette

Abyssal Reef Lumina

Explores the mysterious blues of deep-sea reefs, subtly illuminated by bioluminescent life.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#081A2D#1F3B5E#426D92#77A6C9#040D17

Palette guide

How to use Abyssal Reef Lumina

Overview

The Abyssal Reef Lumina palette explores the mysterious blues of deep-sea reefs, subtly illuminated by bioluminescent life. This dark and captivating collection features a progression from the inky #040D17 (Very Dark Blue) and #081A2D (Deep Prussian Blue) to the brighter #1F3B5E (Dark Cerulean) and #426D92 (Steel Blue), culminating in the ethereal #77A6C9 (Light Steel Blue). Designers can leverage this palette to evoke a sense of depth, tranquility, and subtle wonder, perfect for sophisticated dark mode interfaces, scientific visualizations, or serene digital art. Developers will find these blues excellent for establishing visual hierarchy and creating immersive backgrounds, ensuring a cohesive and elegant aesthetic that hints at hidden beauty in the depths.

Best used for

  • Sophisticated dark mode UI
  • Environmental research platforms
  • Serene digital art and illustration
  • Luxury brand presentations
  • Documentary film color grading
  • Deep sea exploration themes

Suggested color roles

primary

#040D17 (Very Dark Blue) - The deepest shade, ideal for main backgrounds, navigation, or strong foundational elements.

secondary

#081A2D (Deep Prussian Blue) - A slightly lighter, yet still profound, blue for secondary panels, card backgrounds, or subtle dividing lines.

accent

#77A6C9 (Light Steel Blue) - This soft, luminous blue serves as a gentle accent for interactive elements, hover states, or to highlight key data points.

background

#040D17 (Very Dark Blue) - Creates an immersive, almost black background that allows the lighter blues to subtly glow.

text

White (#FFFFFF) or a very light grey (#F0F0F0) provides optimal contrast for readability against the darker blues. #77A6C9 can be used for subtle headings on the darkest backgrounds.

Accessibility notes

  • Ensure all text, especially on the darkest backgrounds like #040D17, uses white or very light grey for high contrast.
  • The lighter blues, #426D92 and #77A6C9, can be used for text on the deepest blues, but always verify WCAG compliance.
  • Avoid using #1F3B5E for small text elements on backgrounds darker than itself, as contrast may be insufficient.
  • Use #77A6C9 sparingly as an accent to guide the eye without overwhelming the serene dark theme.

Recommended combinations

Deep Glow

Ideal for creating layered dark backgrounds with a subtle, luminous highlight for key information or interactive elements.

#040D17 · #081A2D · #77A6C9

Reef Gradient

Excellent for background gradients in hero sections, data visualizations, or UI components that need a smooth depth effect.

#081A2D · #1F3B5E · #426D92

Luminous Accent

Perfect for highlighting active states, progress bars, or small decorative elements that need to stand out gracefully.

#1F3B5E · #426D92 · #77A6C9

CSS variables

:root {
  --abyssal-reef-lumina-1: #081A2D;
  --abyssal-reef-lumina-2: #1F3B5E;
  --abyssal-reef-lumina-3: #426D92;
  --abyssal-reef-lumina-4: #77A6C9;
  --abyssal-reef-lumina-5: #040D17;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-reef-lumina": {
        1: "#081A2D",
        2: "#1F3B5E",
        3: "#426D92",
        4: "#77A6C9",
        5: "#040D17",
      }
    }
  }
}

Related searches

deep blue bioluminescent palettedark reef colorssubtle ocean glow thememysterious blue gradientserene dark mode design

Palette colors

Hex values

Color 1#081A2D
·
Color 2#1F3B5E
·
Color 3#426D92
·
Color 4#77A6C9
·
Color 5#040D17
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
3.2:1AA18
6.8:1AA
1.1:1Fail
2
1.5:1Fail
2.1:1Fail
4.4:1AA18
1.7:1Fail
3
3.2:1AA18
2.1:1Fail
2.1:1Fail
3.6:1AA18
4
6.8:1AA
4.4:1AA18
2.1:1Fail
7.5:1AAA
5
1.1:1Fail
1.7:1Fail
3.6:1AA18
7.5:1AAA

Similar palettes

More like Abyssal Reef Lumina

View all dark
Abyssal Coral Forms
Abyssal Reef Shadow
Abyssal Trench Creatures
Abyssal Trench Mystery
Deep Ocean Abyss
Deep Ocean Abyss