Back to palettes

Palette

Deep Ocean Cavern

Explores the hidden depths of the sea, where light barely penetrates and ancient secrets lie.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A2A#1C2E4A#2B4B6F#4A7C8E#7EB8C4

Palette guide

How to use Deep Ocean Cavern

Overview

The Deep Ocean Cavern palette presents a captivating gradient of cool, dark blues and subtle teal, reflecting the hidden depths of the sea. Starting with the profound #0A0A2A, it gradually lightens through #1C2E4A and #2B4B6F, creating a sense of evolving depth. The introduction of #4A7C8E and the serene #7EB8C4 adds a touch of ethereal calm. This collection is ideal for designers and developers aiming to create mysterious yet inviting interfaces, scientific visualizations, or branding that evokes nature's quiet power. Its harmonious progression ensures a cohesive and sophisticated visual experience.

Best used for

  • Scientific data visualization dashboards
  • Educational apps about marine ecosystems
  • Sophisticated dark mode web applications
  • Nature documentary branding and titles
  • Tranquil website backgrounds and headers
  • Luxury resort or spa marketing

Suggested color roles

primary

Use #0A0A2A as the anchoring dark blue for main backgrounds or foundational elements, conveying depth and stability.

secondary

Employ #1C2E4A for secondary content panels, navigation, or as a supportive dark tone, building visual interest.

accent

Apply #7EB8C4 for highlights, calls to action, or key information to provide a refreshing and legible contrast.

background

The deep #0A0A2A is excellent for immersive dark mode backgrounds. For a lighter touch, #7EB8C4 can serve as a soft, airy background.

text

For optimal readability on dark backgrounds like #0A0A2A or #1C2E4A, use white or a very light grey. On lighter backgrounds like #7EB8C4, use #0A0A2A or a dark charcoal.

Accessibility notes

  • White or very light grey text provides excellent contrast against #0A0A2A, #1C2E4A, and #2B4B6F backgrounds.
  • Ensure #7EB8C4 text has sufficient contrast when used on #2B4B6F or #4A7C8E, checking WCAG AA guidelines.
  • Avoid using #4A7C8E for small text on #2B4B6F backgrounds as their luminance similarity can hinder readability.
  • When using #7EB8C4 as a background, ensure text in #0A0A2A or #1C2E4A has enough contrast for legibility.

Recommended combinations

Depth & Light

Creates a clear visual journey from dark depths to lighter elements, ideal for section breaks or visual storytelling.

#0A0A2A · #2B4B6F · #7EB8C4

Subtle Transition

Perfect for smooth gradients, hover states, or layered elements that require a cohesive, soft progression.

#1C2E4A · #2B4B6F · #4A7C8E

Core Blues

Establishes the primary dark theme for backgrounds, main content blocks, and foundational UI elements.

#0A0A2A · #1C2E4A · #2B4B6F

CSS variables

:root {
  --deep-ocean-cavern-1: #0A0A2A;
  --deep-ocean-cavern-2: #1C2E4A;
  --deep-ocean-cavern-3: #2B4B6F;
  --deep-ocean-cavern-4: #4A7C8E;
  --deep-ocean-cavern-5: #7EB8C4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-cavern": {
        1: "#0A0A2A",
        2: "#1C2E4A",
        3: "#2B4B6F",
        4: "#4A7C8E",
        5: "#7EB8C4",
      }
    }
  }
}

Related searches

dark blue teal palettemysterious marine colorsdeep sea UI designtranquil blue gradientsnature inspired branding

Palette colors

Hex values

Color 1#0A0A2A
·
Color 2#1C2E4A
·
Color 3#2B4B6F
·
Color 4#4A7C8E
·
Color 5#7EB8C4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
4.2:1AA18
8.8:1AAA
2
1.4:1Fail
1.5:1Fail
3:1Fail
6.2:1AA
3
2.1:1Fail
1.5:1Fail
2:1Fail
4.1:1AA18
4
4.2:1AA18
3:1Fail
2:1Fail
2.1:1Fail
5
8.8:1AAA
6.2:1AA
4.1:1AA18
2.1:1Fail

Similar palettes

More like Deep Ocean Cavern

View all cool
Deep Ocean Trench
Ocean Depths Glimmer
Oceanic Depths Mystery
Oceanic Depths Mystery
Abyssal Bioluminescence
Celestial Orb Glow