Back to palettes

Palette

Oceanic Abyss

Dive into the profound mystery and serene depths of the unfathomable ocean's unexplored trenches.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000080#004F4F#003333#2F1A3A#8F979B

Palette guide

How to use Oceanic Abyss

Overview

The Oceanic Abyss palette invites designers and developers to dive into the profound mystery and serene depths of the unfathomable ocean. This unique collection blends deep navy #000080 with rich teal-greens like #004F4F and #003333, and an intriguing deep purple-grey #2F1A3A, creating a truly distinctive and mysterious aesthetic. The lighter #8F979B provides a crucial point of relief, reminiscent of distant light or metallic glints in the deep. This palette is ideal for projects seeking to evoke a sense of enigma, luxury, or unconventional sophistication. It offers a rich, complex color story for immersive digital experiences, high-end branding, or evocative art.

Best used for

  • Mysterious or fantasy game interfaces
  • Luxury brand identities with an edge
  • Experimental art exhibitions
  • Dark mode UI with unique flair
  • High-concept movie or book promotions
  • Unconventional fashion websites

Suggested color roles

primary

#000080 - A deep, classic navy, serving as the foundational background or dominant color to establish a profound, serious tone.

secondary

#003333 - A very dark, muted teal, excellent for secondary content panels, card backgrounds, or subtle sectional dividers.

accent

#2F1A3A - An intriguing deep purple-grey, perfect for unique interactive elements, hover states, or subtle graphical accents that add complexity.

background

#000080 - Provides a powerful, dark canvas that allows the unexpected teal and purple tones to create visual intrigue.

text

#8F979B - This light grey-blue is ideal for primary text, offering good readability and a sophisticated, cool contrast against the dark base.

Accessibility notes

  • Ensure #8F979B text has sufficient contrast against #000080, #004F4F, and #003333 for WCAG AA compliance.
  • Avoid using #2F1A3A text on #000080 or #003333 backgrounds due to low contrast.
  • For critical information and body text, rely on #8F979B or a true white.
  • The mix of dark colors requires careful pairing to maintain readability, especially for smaller fonts.

Recommended combinations

Enigmatic Depths

Navy background, dark teal for content blocks, and light grey-blue for all text and key info.

#000080 · #003333 · #8F979B

Deep Fusion

Use #004F4F as a base, #2F1A3A for unique accents or dividers, and #8F979B for text.

#004F4F · #2F1A3A · #8F979B

Subtle Mystery

Strong navy background, a deep purple-grey for subtle interactive elements, and light text for clarity.

#000080 · #2F1A3A · #8F979B

CSS variables

:root {
  --oceanic-abyss-1: #000080;
  --oceanic-abyss-2: #004F4F;
  --oceanic-abyss-3: #003333;
  --oceanic-abyss-4: #2F1A3A;
  --oceanic-abyss-5: #8F979B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-abyss": {
        1: "#000080",
        2: "#004F4F",
        3: "#003333",
        4: "#2F1A3A",
        5: "#8F979B",
      }
    }
  }
}

Related searches

deep navy teal palettemysterious dark color schemeunconventional dark uioceanic deep blue greensophisticated moody branding

Palette colors

Hex values

Color 1#000080
·
Color 2#004F4F
·
Color 3#003333
·
Color 4#2F1A3A
·
Color 5#8F979B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
1.2:1Fail
1:1Fail
5.4:1AA
2
1.7:1Fail
1.5:1Fail
1.7:1Fail
3.2:1AA18
3
1.2:1Fail
1.5:1Fail
1.1:1Fail
4.6:1AA
4
1:1Fail
1.7:1Fail
1.1:1Fail
5.3:1AA
5
5.4:1AA
3.2:1AA18
4.6:1AA
5.3:1AA

Similar palettes

More like Oceanic Abyss

View all dark
Deep Fathom Mystery
Abyssal Trench Mystery
Abyssal Trench Mystery
Bioluminescent Deep Trench
Deep Ocean Abyss
Deep Ocean Abyss