Palette

Abyssal Midnight Reef

Intense, profound blues that reveal the hidden wonders and endless mystery of the deep sea.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00008B#0000CD#191970#4169E1#6495ED

Palette guide

How to use Abyssal Midnight Reef

Overview

The Abyssal Midnight Reef palette plunges into intense, profound blues, revealing the hidden wonders and endless mystery of the deep sea. This dark and mysterious collection features rich, varying shades from the deep #00008B (Dark Blue) and vibrant #0000CD (Medium Blue) to the more subdued #191970 (Midnight Blue). Designers can leverage this palette to evoke a sense of depth, tranquility, and intrigue, perfect for sophisticated branding, cinematic themes, or immersive digital experiences. Developers will find these blues ideal for dark mode interfaces, scientific visualizations, or any project requiring a cool, authoritative, and elegant aesthetic. The lighter #4169E1 (Royal Blue) and #6495ED (Cornflower Blue) provide critical contrast and subtle illumination.

Best used for

Dark mode UI/UX design
Luxury tech brand identity
Documentary film branding
Science and research platforms
Gaming interfaces (fantasy, sci-fi)
Mysterious digital art creations

Suggested color roles

primary

#00008B (Dark Blue) - A foundational deep blue, excellent for main backgrounds, navigation bars, or primary content containers.

secondary

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

accent

#4169E1 (Royal Blue) - This brighter blue serves as a captivating accent for interactive elements, hover states, or key data points.

background

A very dark blue like #00008B or #191970 creates the immersive 'deep sea' feel, providing a rich canvas.

text

White (#FFFFFF) or a very light grey (#CFCFCF) provides optimal contrast for readability against all colors in this dark palette.

Accessibility notes

Ensure all text, especially on the darker backgrounds, uses white or very light grey for high contrast and readability.
The lighter blues, #4169E1 and #6495ED, can be used for text on the darkest backgrounds, but test for WCAG AAA compliance.
Avoid using the darker shades like #00008B for text on any background other than pure white for legibility.
Use the bright #4169E1 for actionable elements to ensure they stand out clearly against the deep blues.

Recommended combinations

Deep Ocean

Perfect for creating immersive dark mode interfaces or backgrounds that need to convey depth and sophistication.

#00008B · #191970 · #4169E1

Subtle Glow

Ideal for highlighting active states, data points, or subtle calls-to-action within a dark theme.

#191970 · #6495ED · #0000CD

Mysterious Gradient

Excellent for background gradients in splash screens, hero sections, or digital art with an ethereal quality.

#00008B · #0000CD · #6495ED

CSS variables

:root {
  --abyssal-midnight-reef-1: #00008B;
  --abyssal-midnight-reef-2: #0000CD;
  --abyssal-midnight-reef-3: #191970;
  --abyssal-midnight-reef-4: #4169E1;
  --abyssal-midnight-reef-5: #6495ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-midnight-reef": {
        1: "#00008B",
        2: "#0000CD",
        3: "#191970",
        4: "#4169E1",
        5: "#6495ED",
      }
    }
  }
}

Hex values

Color 1#00008B

Color 2#0000CD

Color 3#191970

Color 4#4169E1

Color 5#6495ED

Accessibility

Contrast checker

1.4:1Fail

1:1Fail

3.2:1AA18

5.1:1AA

1.4:1Fail

1.3:1Fail

2.3:1Fail

3.8:1AA18

1:1Fail

1.3:1Fail

3.1:1AA18

5:1AA

3.2:1AA18

2.3:1Fail

3.1:1AA18

1.6:1Fail

5.1:1AA

3.8:1AA18

5:1AA

1.6:1Fail

Similar palettes

More like Abyssal Midnight Reef