Back to palettes

Palette

Ocean Void Echo

Deep, mysterious blues and silver-greys reflect the profound silence and chilling beauty of the ocean's uncharted abyssal plains.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ocean Void 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 Ocean Void Echo.

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

Data visualization

#0A1C2A#1E3A4A#3D5E6E#6B8A9E#AABCC4

Palette guide

How to use Ocean Void Echo

Overview

The "Ocean Void Echo" palette captures the profound silence and chilling beauty of the ocean's uncharted abyssal plains with deep, mysterious blues and silver-greys. This dark and sophisticated collection, featuring #0A1C2A, #1E3A4A, and #3D5E6E, is perfect for projects that aim to evoke a sense of mystery, depth, and understated elegance. Designers can use these hues to create immersive and modern interfaces, while developers will appreciate the gradual shift to #6B8A9E and #AABCC4 for establishing clear visual hierarchy. It's an ideal palette for conveying professionalism and sophistication, offering a cool, calming, yet intriguing atmosphere suitable for high-end digital experiences or branding that values depth.

Best used for

  • Luxury tech brand websites
  • Scientific research data visualization
  • Abstract art and photography portfolios
  • High-end automotive interfaces
  • Night mode themes for productivity apps
  • Documentary film titles and branding

Suggested color roles

primary

Utilize #0A1C2A as the foundational, deepest blue-grey, perfect for backgrounds, large headers, or elements requiring significant visual weight, conveying ultimate depth.

secondary

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

accent

Introduce #AABCC4 as a luminous accent, ideal for calls-to-action, progress indicators, or interactive elements, providing a crucial point of contrast and visual interest.

background

Use #0A1C2A for primary backgrounds to establish a deep, immersive environment, or #1E3A4A for slightly lighter dark sections.

text

For primary body text on dark backgrounds, use #AABCC4 or a light grey like #E0E0E0 to ensure excellent readability and a subtle, cool glow.

Accessibility notes

  • Always ensure sufficient contrast for text, especially when using lighter colors like #AABCC4 on darker backgrounds like #0A1C2A.
  • Avoid using #1E3A4A for small text on #0A1C2A backgrounds as contrast may be insufficient for WCAG AA.
  • Leverage #AABCC4 for interactive elements to provide clear visual cues against the deep backdrop.
  • For larger headings, #3D5E6E can be used on #0A1C2A, but verify contrast for readability.

Recommended combinations

Abyssal Contrast

A strong dark base with a slightly lighter dark for content and a bright silver-grey accent for key information or interactivity.

#0A1C2A · #1E3A4A · #AABCC4

Deep Sea Gradient

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

#1E3A4A · #3D5E6E · #6B8A9E

Void Luminescence

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

#0A1C2A · #6B8A9E · #AABCC4

CSS variables

:root {
  --ocean-void-echo-1: #0A1C2A;
  --ocean-void-echo-2: #1E3A4A;
  --ocean-void-echo-3: #3D5E6E;
  --ocean-void-echo-4: #6B8A9E;
  --ocean-void-echo-5: #AABCC4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-void-echo": {
        1: "#0A1C2A",
        2: "#1E3A4A",
        3: "#3D5E6E",
        4: "#6B8A9E",
        5: "#AABCC4",
      }
    }
  }
}

Related searches

deep mysterious blue palettedark cool color schemeabyssal web design colorssilver grey blue brandingsophisticated dark theme

Palette colors

Hex values

Color 1#0A1C2A
·
Color 2#1E3A4A
·
Color 3#3D5E6E
·
Color 4#6B8A9E
·
Color 5#AABCC4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.5:1Fail
4.7:1AA
8.8:1AAA
2
1.5:1Fail
1.7:1Fail
3.3:1AA18
6.1:1AA
3
2.5:1Fail
1.7:1Fail
1.9:1Fail
3.5:1AA18
4
4.7:1AA
3.3:1AA18
1.9:1Fail
1.9:1Fail
5
8.8:1AAA
6.1:1AA
3.5:1AA18
1.9:1Fail

Similar palettes

More like Ocean Void Echo

View all dark
Deep Ocean Trench
Abyssal Luminous Depths
Deep Sea Cavern
Deep Sea Luminescence
Nocturnal Ocean Tide
Twilight Ocean Vortex