Palette

Deep Ocean Abyss

Exploring the profound, dark beauty of the ocean's deepest, unexplored abyssal zones.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000080#0000CD#191970#00BFFF#00FFFF

Palette guide

How to use Deep Ocean Abyss

Overview

The Deep Ocean Abyss palette (version 2) plunges into the profound, dark beauty of the ocean's depths, offering a vibrant yet mysterious array of blues. Featuring deep, inky tones like #191970 and #000080, it's dramatically contrasted with bright, almost luminescent blues such as #00BFFF and #00FFFF. This palette is perfect for projects that aim to convey depth, technology, or an intriguing sense of mystery. Designers and developers can utilize its dynamic range to create captivating interfaces, digital art, or branding that stands out with a unique, aquatic glow.

Best used for

Sci-fi game interfaces
Marine research data visualization
Luxury tech product branding
Digital art and illustration
Nightclub or event promotion
Modern website hero sections

Suggested color roles

primary

Use #191970 as the core dark blue, providing a stable, mysterious base for significant design elements.

secondary

Employ #0000CD for supporting visual information, adding a rich, classic blue layer to the depth.

accent

Leverage #00BFFF for impactful highlights, calls to action, or interactive elements that need to pop with vibrant energy.

background

Set #000080 as a deep, immersive background to create a sense of infinite depth, ideal for full-screen experiences.

text

For primary text on dark backgrounds, #00FFFF or a bright white provides excellent contrast. #00BFFF can be used for headings.

Accessibility notes

Ensure #00FFFF and #00BFFF have sufficient contrast against all darker blues, especially for small text.
Avoid placing #0000CD text on #000080 background as contrast may be insufficient for readability.
Use #00BFFF strategically for accents, as its vibrancy can be overwhelming if used excessively for large text blocks.
Provide clear focus states for interactive elements, possibly using an outline in #00FFFF.

Recommended combinations

Abyssal Glow

Creates a dramatic contrast, perfect for highlighting key information against a deep backdrop.

#191970 · #00BFFF · #0000CD

Luminous Depths

Emphasizes a sense of light piercing through darkness, ideal for visual storytelling.

#000080 · #00FFFF · #00BFFF

Subtle Vibrance

Provides a slightly softer balance between the deep blues and a vibrant accent.

#0000CD · #191970 · #00BFFF

CSS variables

:root {
  --deep-ocean-abyss-2-1: #000080;
  --deep-ocean-abyss-2-2: #0000CD;
  --deep-ocean-abyss-2-3: #191970;
  --deep-ocean-abyss-2-4: #00BFFF;
  --deep-ocean-abyss-2-5: #00FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-abyss-2": {
        1: "#000080",
        2: "#0000CD",
        3: "#191970",
        4: "#00BFFF",
        5: "#00FFFF",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#0000CD

Color 3#191970

Color 4#00BFFF

Color 5#00FFFF

Accessibility

Contrast checker

1.4:1Fail

1.1:1Fail

7.5:1AAA

12.8:1AAA

1.4:1Fail

1.3:1Fail

5.3:1AA

8.9:1AAA

1.1:1Fail

1.3:1Fail

7:1AA

11.8:1AAA

7.5:1AAA

5.3:1AA

7:1AA

1.7:1Fail

12.8:1AAA

8.9:1AAA

11.8:1AAA

1.7:1Fail

Similar palettes

More like Deep Ocean Abyss

View all dark

Abyssal Trench Mystery

Abyssal Midnight Reef