Palette

Oceanic Fathom Abyss

Plunging into the profound darkness of the deepest ocean trenches, where light barely penetrates.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#010F1D#0D2840#1C4869#3A6B94#6C9BC7

Palette guide

How to use Oceanic Fathom Abyss

Overview

The Oceanic Fathom Abyss palette plunges into the profound darkness of the deepest ocean trenches, where light barely penetrates. It presents a sophisticated gradient from the near-black #010F1D to the slightly brighter #0D2840, #1C4869, #3A6B94, culminating in the luminous #6C9BC7. This collection is ideal for designers and developers aiming to create sleek, mysterious, and highly immersive digital experiences. Its deep, cool tones are perfect for conveying professionalism, stability, and a sense of enigmatic depth. The harmonious progression allows for clear visual hierarchy and a refined aesthetic, making it excellent for projects that require a serious, elegant, or high-tech feel, reflecting the silent majesty of the abyss.

Best used for

Luxury tech product interfaces
Cybersecurity firm branding
Documentary film titles
High-end automotive websites
Dark mode UI/UX designs
Space exploration themed games

Suggested color roles

primary

Use #010F1D as the foundational, darkest element for backgrounds or primary sections, providing ultimate depth.

secondary

Apply #0D2840 to main content blocks or navigation, offering a deep yet subtly distinct base.

accent

Employ #6C9BC7 for interactive elements, calls to action, or key highlights to provide a clear, luminous contrast.

background

Utilize #010F1D for an immersive, near-black background, allowing lighter elements to emerge dramatically.

text

For optimal readability, use white or a very light gray like #F0F0F0 for text on all darker blues. A dark charcoal works on #6C9BC7.

Accessibility notes

Always use white or very light text on the darker blues (#010F1D, #0D2840, #1C4869) to ensure sufficient contrast.
Avoid using adjacent dark blues for text and background; their contrast will be insufficient for legibility.
Ensure interactive elements have clear visual states (e.g., hover, focus) beyond color alone.
The lightest blue, #6C9BC7, can serve as an excellent background for dark text, offering good readability.

Recommended combinations

Abyssal Descent

Ideal for creating deep, layered backgrounds or sections that convey profound depth.

#010F1D · #0D2840 · #1C4869

Luminous Fathom

Excellent for highlighting key features, interactive elements, or a refreshing contrast against deep tones.

#3A6B94 · #6C9BC7 · #0D2840

Trench Contrast

Provides a strong, dramatic contrast for calls to action or distinct sections, balancing dark and light.

#010F1D · #6C9BC7 · #1C4869

CSS variables

:root {
  --oceanic-fathom-abyss-1: #010F1D;
  --oceanic-fathom-abyss-2: #0D2840;
  --oceanic-fathom-abyss-3: #1C4869;
  --oceanic-fathom-abyss-4: #3A6B94;
  --oceanic-fathom-abyss-5: #6C9BC7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-fathom-abyss": {
        1: "#010F1D",
        2: "#0D2840",
        3: "#1C4869",
        4: "#3A6B94",
        5: "#6C9BC7",
      }
    }
  }
}

Hex values

Color 1#010F1D

Color 2#0D2840

Color 3#1C4869

Color 4#3A6B94

Color 5#6C9BC7

Accessibility

Contrast checker

1.3:1Fail

2:1Fail

3.4:1AA18

6.6:1AA

1.3:1Fail

1.6:1Fail

2.7:1Fail

5.1:1AA

2:1Fail

1.6:1Fail

1.7:1Fail

3.3:1AA18

3.4:1AA18

2.7:1Fail

1.7:1Fail

1.9:1Fail

6.6:1AA

5.1:1AA

3.3:1AA18

1.9:1Fail

Similar palettes

More like Oceanic Fathom Abyss

View all dark

Abyss Gaze

Abyssal Bioluminescent Glow