Palette

Oceanic Abyss Mystery

Delves into the profound and enigmatic blues of the deepest parts of the ocean, shrouded in mystery.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Oceanic Abyss Mystery 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 Oceanic Abyss Mystery.

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

Data visualization

#0B0E1B#1C2D3E#3A5F7D#6B9EC0#A0CBE8

Palette guide

How to use Oceanic Abyss Mystery

Overview

The Oceanic Abyss Mystery palette delves into the profound and enigmatic blues of the deepest ocean, offering a sophisticated gradient from near-black to a soft, ethereal light blue. With core colors like #0B0E1B, #1C2D3E, and #3A5F7D, this palette establishes a dark, intriguing foundation. The progression to #6B9EC0 and #A0CBE8 mimics light filtering through vast depths, providing crucial points of contrast and visual interest. Designers can leverage these hex codes for elegant branding, immersive digital experiences, or UI elements that require a sense of depth, tranquility, and understated drama. Developers will find this palette ideal for creating sophisticated dark mode themes, subtle gradients, or atmospheric data visualizations.

Best used for

Elegant dark mode web applications
Environmental or conservation websites
Abstract art and photography sites
Luxury travel brand identity
Interactive educational platforms
Relaxation or meditation apps

Suggested color roles

primary

#0B0E1B - The deepest, near-black blue, ideal for large backgrounds, headers, or foundational elements to establish a profound, mysterious mood.

secondary

#1C2D3E - A rich, dark blue for secondary content areas, sidebars, or card backgrounds, offering subtle distinction.

accent

#3A5F7D - A muted, mid-tone blue that works well for interactive elements, progress bars, or subtle highlights without overpowering the dark theme.

background

#0B0E1B - Serves as an excellent deep, dark canvas that allows other colors to emerge with quiet intensity.

text

#A0CBE8 - This lightest blue is perfect for primary text, ensuring high readability and a harmonious feel against the darker backgrounds.

Accessibility notes

Ensure #A0CBE8 text has excellent contrast against #0B0E1B, #1C2D3E, and #3A5F7D for WCAG AA compliance.
Avoid using #3A5F7D text on #1C2D3E backgrounds due to insufficient contrast.
Use #A0CBE8 for all essential body text to maintain legibility.
For decorative elements, the darker blues can be paired, but critical information demands strong contrast.

Recommended combinations

Deep Gradient

Darkest blue for background, next darkest for panels, and the lightest blue for text and key information.

#0B0E1B · #1C2D3E · #A0CBE8

Submerged Light

#1C2D3E for main content, #3A5F7D for subheadings or subtle accents, and #6B9EC0 for body text.

#1C2D3E · #3A5F7D · #6B9EC0

Ethereal Depths

Strong dark background, a mid-tone blue for interactive elements, and the brightest blue for highlights.

#0B0E1B · #3A5F7D · #A0CBE8

CSS variables

:root {
  --oceanic-abyss-mystery-2-1: #0B0E1B;
  --oceanic-abyss-mystery-2-2: #1C2D3E;
  --oceanic-abyss-mystery-2-3: #3A5F7D;
  --oceanic-abyss-mystery-2-4: #6B9EC0;
  --oceanic-abyss-mystery-2-5: #A0CBE8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-abyss-mystery-2": {
        1: "#0B0E1B",
        2: "#1C2D3E",
        3: "#3A5F7D",
        4: "#6B9EC0",
        5: "#A0CBE8",
      }
    }
  }
}

Hex values

Color 1#0B0E1B

Color 2#1C2D3E

Color 3#3A5F7D

Color 4#6B9EC0

Color 5#A0CBE8

Accessibility

Contrast checker

1.4:1Fail

2.8:1Fail

6.7:1AA

11.2:1AAA

1.4:1Fail

2.1:1Fail

4.9:1AA

8.2:1AAA

2.8:1Fail

2.1:1Fail

2.3:1Fail

3.9:1AA18

6.7:1AA

4.9:1AA

2.3:1Fail

1.7:1Fail

11.2:1AAA

8.2:1AAA

3.9:1AA18

1.7:1Fail

Similar palettes

More like Oceanic Abyss Mystery

View all dark

Abyss Gaze

Abyssal Bioluminescent Glow