Palette

Deep Ocean Abyss

Exploring the mysterious depths of the ocean, from the inky blackness to shimmering, light-touched waters.

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

#0A1128#001F54#034078#0070AB#00A6FB

Palette guide

How to use Deep Ocean Abyss

Overview

The Deep Ocean Abyss palette (version 6) explores the ocean's mysterious depths, ranging from inky blackness to shimmering, light-touched waters. Featuring a striking progression from #0A1128 and #001F54 to the vibrant #0070AB and the electrifying #00A6FB, this palette is dynamic and modern. It's perfectly suited for designs that aim to be impactful, energetic, and visually engaging. Designers and developers can leverage its strong contrasts and vivid accents to create compelling interfaces, digital experiences, or branding that truly captures attention.

Best used for

Sports and active lifestyle brands
High-tech and innovation websites
Digital media and entertainment platforms
Dynamic app user interfaces
Educational software with a modern twist
Event promotion and marketing materials

Suggested color roles

primary

Utilize #0A1128 as the deepest, grounding blue for substantial sections and dramatic backdrops.

secondary

Employ #001F54 for supportive content areas, adding a rich, profound layer to the design.

accent

Leverage #00A6FB for electrifying highlights, calls to action, or interactive elements that demand immediate attention.

background

Set #0A1128 as a dark, dramatic background to create an immersive and sophisticated user experience.

text

For maximum impact and readability on dark backgrounds, use #00A6FB or a crisp white. #0070AB can be used for secondary text.

Accessibility notes

Ensure #00A6FB text has very high contrast against all darker blues for optimal readability.
Avoid using #034078 text on #001F54 backgrounds for small text, as contrast may be insufficient.
Use the brightest color, #00A6FB, for critical interactive elements to ensure they are easily identifiable.
Consider using a very light grey or white for body text on the darkest backgrounds to ensure WCAG AA compliance.

Recommended combinations

Dynamic Contrast

Creates a powerful visual statement, ideal for hero sections or key feature highlights.

#0A1128 · #00A6FB · #034078

Deep Gradient

Offers a smooth, professional progression, suitable for information architecture or data display.

#001F54 · #034078 · #0070AB

Energetic Highlight

Balances deep stability with vibrant energy, perfect for modern and engaging UIs.

#0A1128 · #0070AB · #00A6FB

CSS variables

:root {
  --deep-ocean-abyss-6-1: #0A1128;
  --deep-ocean-abyss-6-2: #001F54;
  --deep-ocean-abyss-6-3: #034078;
  --deep-ocean-abyss-6-4: #0070AB;
  --deep-ocean-abyss-6-5: #00A6FB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-abyss-6": {
        1: "#0A1128",
        2: "#001F54",
        3: "#034078",
        4: "#0070AB",
        5: "#00A6FB",
      }
    }
  }
}

Hex values

Color 1#0A1128

Color 2#001F54

Color 3#034078

Color 4#0070AB

Color 5#00A6FB

Accessibility

Contrast checker

1.2:1Fail

1.8:1Fail

3.5:1AA18

7:1AA

1.2:1Fail

1.5:1Fail

2.9:1Fail

5.9:1AA

1.8:1Fail

1.5:1Fail

1.9:1Fail

3.9:1AA18

3.5:1AA18

2.9:1Fail

1.9:1Fail

2:1Fail

7:1AA

5.9:1AA

3.9:1AA18

2:1Fail

Similar palettes

More like Deep Ocean Abyss

View all Dark

Oceanic Abyss Murmur

Oceanic Trench Bloom

Abyssal Bioluminescence

Abyssal Seaweed Garden

Deep Forest Murmur

Oceanic Abyss Flora