Palette

Deep Ocean Caverns

Explores the mysterious and awe-inspiring depths of unexplored underwater caverns.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F1F2F#1C3E57#2F5F8A#4A8BB8#78B2D5

Palette guide

How to use Deep Ocean Caverns

Overview

The Deep Ocean Caverns palette offers a cool and deep blue spectrum that lightens gradually, mirroring the awe-inspiring beauty of unexplored underwater grottoes. It begins with the profound #0F1F2F, building depth through #1C3E57 and #2F5F8A. The progression to #4A8BB8 and #78B2D5 introduces clarity and a welcoming feel, balancing gravitas with approachability. This collection is ideal for designers and developers seeking to convey professionalism, trust, and a sense of calm. It's perfectly suited for corporate identities, educational platforms, or any project requiring a sophisticated yet inviting blue scheme.

Best used for

Corporate identity (finance, technology sectors)
Educational platforms and e-learning interfaces
Scientific journals and research websites
Maritime industry branding and web design
Calm and professional data dashboards
Environmental advocacy and awareness campaigns

Suggested color roles

primary

Use #0F1F2F as the solid, professional base for backgrounds or main structural elements, conveying stability.

secondary

Employ #1C3E57 for secondary content sections, navigation, or as a supportive deep tone, adding visual weight.

accent

Apply #78B2D5 for bright highlights, calls to action, or key information to provide a clear and inviting contrast.

background

The deep #0F1F2F is excellent for a sophisticated dark mode. For a lighter, professional look, #78B2D5 can serve as a clean background.

text

For optimal readability on dark backgrounds like #0F1F2F or #1C3E57, use white or a light grey. On lighter backgrounds like #78B2D5, use #0F1F2F or a dark charcoal.

Accessibility notes

White or light grey text offers strong contrast against #0F1F2F, #1C3E57, and #2F5F8A backgrounds, ensuring readability.
When using #78B2D5 as a background, ensure text in #0F1F2F or #1C3E57 meets WCAG AA contrast standards.
Avoid using #4A8BB8 for small text on #2F5F8A backgrounds due to potential luminance similarity, hindering readability.
Always test all text-background pairings and interactive elements for sufficient contrast across different screen sizes.

Recommended combinations

Professional Gradient

Creates a clear visual flow, ideal for section headers, progressive disclosures, or multi-step processes.

#0F1F2F · #2F5F8A · #78B2D5

Deep Tones

Perfect for establishing the primary dark theme, main backgrounds, and foundational UI elements with subtle depth.

#0F1F2F · #1C3E57 · #2F5F8A

Highlight & Depth

Suitable for UI accents, feature blocks, or visual elements that need to stand out from a darker base.

#1C3E57 · #4A8BB8 · #78B2D5

CSS variables

:root {
  --deep-ocean-caverns-1: #0F1F2F;
  --deep-ocean-caverns-2: #1C3E57;
  --deep-ocean-caverns-3: #2F5F8A;
  --deep-ocean-caverns-4: #4A8BB8;
  --deep-ocean-caverns-5: #78B2D5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-caverns": {
        1: "#0F1F2F",
        2: "#1C3E57",
        3: "#2F5F8A",
        4: "#4A8BB8",
        5: "#78B2D5",
      }
    }
  }
}

Hex values

Color 1#0F1F2F

Color 2#1C3E57

Color 3#2F5F8A

Color 4#4A8BB8

Color 5#78B2D5

Accessibility

Contrast checker

1.5:1Fail

2.5:1Fail

4.5:1AA

7.3:1AAA

1.5:1Fail

1.7:1Fail

3:1AA18

4.9:1AA

2.5:1Fail

1.7:1Fail

1.8:1Fail

2.9:1Fail

4.5:1AA

3:1AA18

1.8:1Fail

1.6:1Fail

7.3:1AAA

4.9:1AA

2.9:1Fail

1.6:1Fail

Similar palettes

More like Deep Ocean Caverns

View all dark

Abyss Gaze

Abyssal Bioluminescent Glow