Palette

Aquatic Deep Dive

Plunges into the mysterious depths of the ocean, where sunlight rarely reaches, revealing hidden life.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Aquatic Deep Dive 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 Aquatic Deep Dive.

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

Data visualization

#0A1128#001F3F#007BA7#4682B4#70B0E0

Palette guide

How to use Aquatic Deep Dive

Overview

The "Aquatic Deep Dive" palette plunges into the mysterious depths of the ocean, where sunlight rarely reaches, revealing hidden life and profound tranquility. This dark, rich collection features a gradient of deep blues and indigos, from the almost black Dark Blue #0A1128 and the profound Midnight Blue #001F3F to the striking Cerulean Blue #007BA7. Lighter, shimmering tones like Steel Blue #4682B4 and the ethereal Light Sky Blue #70B0E0 provide contrast, simulating distant light. Developers can use this palette to create sophisticated, immersive interfaces that convey depth and gravity. Designers will find it ideal for projects requiring a sense of mystery, luxury, or profound calm, perfect for high-end brands or scientific themes.

Best used for

Luxury branding
Scientific data visualization
Mystery novel covers
High-tech product interfaces
Evening wear fashion
Deep space exploration themes

Suggested color roles

primary

A very deep, almost black indigo #0A1128, providing a powerful, sophisticated foundation for backgrounds, headers, or primary branding.

secondary

A rich midnight blue #001F3F that adds depth and elegance, suitable for large content blocks, sidebars, or secondary navigation.

accent

A vibrant cerulean blue #007BA7 that acts as a beacon of light, perfect for calls to action, important highlights, or interactive elements.

background

Use these deep blues #0A1128 or #001F3F for immersive backgrounds, allowing lighter colors to stand out dramatically.

text

Use #70B0E0 for body text and headings on dark backgrounds, or pure white for maximum contrast and readability.

Accessibility notes

Ensure sufficient contrast for light text (e.g., #70B0E0 or white) against dark backgrounds like #0A1128 and #001F3F.
Darker colors like #0A1128 and #001F3F are excellent for backgrounds, but require light text.
Avoid using #4682B4 or #70B0E0 as background colors for dark text, as contrast will be poor.
Use the vibrant #007BA7 for key interactive elements to ensure visibility against the deep palette.

Recommended combinations

Deep Sea Base

For creating a powerful, immersive dark mode experience, with the darkest blue as background, light blue for text, and midnight blue for panels.

#0A1128 · #70B0E0 · #001F3F

Distant Light

Ideal for gradients or visual effects that simulate light piercing through deep water, adding shimmer and ethereal quality.

#007BA7 · #4682B4 · #70B0E0

Mysterious Focus

Effective for highlighting important information or calls to action, using the vibrant cerulean against a deep blue, with light blue for accompanying text.

#001F3F · #007BA7 · #70B0E0

CSS variables

:root {
  --aquatic-deep-dive-1: #0A1128;
  --aquatic-deep-dive-2: #001F3F;
  --aquatic-deep-dive-3: #007BA7;
  --aquatic-deep-dive-4: #4682B4;
  --aquatic-deep-dive-5: #70B0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aquatic-deep-dive": {
        1: "#0A1128",
        2: "#001F3F",
        3: "#007BA7",
        4: "#4682B4",
        5: "#70B0E0",
      }
    }
  }
}

Hex values

Color 1#0A1128

Color 2#001F3F

Color 3#007BA7

Color 4#4682B4

Color 5#70B0E0

Accessibility

Contrast checker

1.1:1Fail

3.9:1AA18

4.5:1AA

8:1AAA

1.1:1Fail

3.5:1AA18

4:1AA18

7.1:1AAA

3.9:1AA18

3.5:1AA18

1.2:1Fail

2:1Fail