Palette

Oceanic Abyss Echo

Plunging into the dark, silent depths of the ocean, where faint light still penetrates.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000033#001F4C#003C6D#00598E#A0C4FF

Palette guide

How to use Oceanic Abyss Echo

Overview

The "Oceanic Abyss Echo" palette plunges into the dark, silent depths of the ocean, where faint light still penetrates. This deeply mysterious collection, featuring #000033, #001F4C, and #003C6D, offers a subtle gradient of deep blues, perfect for projects requiring a sense of solemnity, sophistication, and hidden beauty. Designers can leverage these hues to create immersive and contemplative interfaces, while developers will find the progression to #00598E and the luminous #A0C4FF excellent for establishing subtle visual hierarchy and points of focus. Ideal for conveying a sense of profound depth and quiet elegance, this palette ensures a cohesive and visually pleasing user experience, reminiscent of the ocean's unexplored, tranquil vastness.

Best used for

Luxury watch or jewelry websites
High-end educational platforms
Abstract art galleries online
Science and technology startups
Night mode themes for professional tools
Documentary film titles (mystery focus)

Suggested color roles

primary

Utilize #000033 as the foundational, darkest navy, perfect for backgrounds, large headers, or elements requiring significant visual weight, conveying ultimate depth.

secondary

Employ #001F4C as a supporting dark blue, excellent for sub-sections, card backgrounds, or secondary navigation, adding subtle differentiation.

accent

Introduce #A0C4FF as a luminous, soft blue accent, ideal for calls-to-action, progress indicators, or interactive elements, providing crucial contrast and a touch of light.

background

Use #000033 for primary backgrounds to establish a deep, immersive environment, or #001F4C for slightly lighter dark sections.

text

For primary body text on dark backgrounds, use #A0C4FF or a very light grey (e.g., #E0E0E0) to ensure excellent readability and a soft glow.

Accessibility notes

Always ensure sufficient contrast for text, especially when using lighter colors like #A0C4FF on darker backgrounds like #000033.
Avoid using #001F4C for small text on #000033 backgrounds as contrast may be insufficient for WCAG AA.
Leverage #A0C4FF for interactive elements to provide clear visual cues against the deep backdrop.
For larger headings, #003C6D can be used on #000033, but verify contrast for readability.

Recommended combinations

Deep Resonance

A strong dark base with a slightly lighter dark for content and a luminous accent for key information or interactivity.

#000033 · #001F4C · #A0C4FF

Subtle Depth

Create smooth transitions or layered elements that mimic the gradual change of light in deep water.

#001F4C · #003C6D · #00598E

Abyssal Glow

Perfect for dark themes where a mid-tone blue provides depth and the brightest color highlights important UI elements.

#000033 · #00598E · #A0C4FF

CSS variables

:root {
  --oceanic-abyss-echo-1: #000033;
  --oceanic-abyss-echo-2: #001F4C;
  --oceanic-abyss-echo-3: #003C6D;
  --oceanic-abyss-echo-4: #00598E;
  --oceanic-abyss-echo-5: #A0C4FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-abyss-echo": {
        1: "#000033",
        2: "#001F4C",
        3: "#003C6D",
        4: "#00598E",
        5: "#A0C4FF",
      }
    }
  }
}

Hex values

Color 1#000033

Color 2#001F4C

Color 3#003C6D

Color 4#00598E

Color 5#A0C4FF

Accessibility

Contrast checker

1.2:1Fail

1.8:1Fail

2.7:1Fail

11.3:1AAA

1.2:1Fail

1.4:1Fail

2.2:1Fail

9.1:1AAA

1.8:1Fail

1.4:1Fail

1.5:1Fail

6.3:1AA