Palette

Deep Ocean Cavern

A journey into the profound depths of the ocean, where sunlight rarely reaches, revealing mysterious blues.

darkdark5 colors

More dark 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

#000080#191970#00BFFF#4682B4#0000CD

Palette guide

How to use Deep Ocean Cavern

Overview

The Deep Ocean Cavern palette offers a bold journey into profound depths, blending intense blues with a vibrant accent. The foundation is laid by the powerful #000080 and #191970, evoking deep-sea mystery. This dark base is electrified by #00BFFF, a striking sky blue that captures attention, while #4682B4 introduces a muted, steel-like quality. The classic dark blue #0000CD rounds out the palette, providing versatility. Designers and developers can utilize this collection to create dynamic and impactful visuals for tech, gaming, or any project requiring a strong, modern, and slightly mysterious aesthetic with clear highlights.

Best used for

Gaming interfaces and branding
Tech company websites and apps
Futuristic digital art and illustrations
Sophisticated dark mode applications
Marine biology educational content
Event promotion for tech conferences

Suggested color roles

primary

Utilize #000080 as the dominant, deep blue for backgrounds or main structural elements, conveying authority and depth.

secondary

Employ #191970 for secondary content areas, navigation, or as a rich border color, providing strong support.

accent

Apply #00BFFF strategically for calls to action, interactive elements, or key highlights to grab immediate attention.

background

The profound #000080 or #191970 are excellent for immersive dark backgrounds. #4682B4 can be used for subtle, textured backgrounds.

text

For maximum readability on #000080, #191970, or #0000CD backgrounds, use white or a very light grey. #00BFFF works well for headings.

Accessibility notes

White text provides excellent contrast on #000080, #191970, and #0000CD backgrounds, ensuring readability.
The vibrant #00BFFF offers strong contrast against all darker blues in the palette, making it suitable for highlights and interactive elements.
Avoid using #4682B4 for small text on #000080 or #191970 due to potential contrast issues; reserve it for larger text or accents.
Always verify contrast ratios for all text and interactive components to meet WCAG AA standards, especially on dark themes.

Recommended combinations

Dynamic Contrast

Creates a striking visual hierarchy, ideal for main page layouts and attention-grabbing sections.

#000080 · #00BFFF · #4682B4

Deep Foundations

Perfect for establishing the core dark theme, backgrounds, and primary content blocks.

#000080 · #191970 · #0000CD

Modern Accents

Suitable for UI elements, icons, and subtle interactive components within a dark interface.

#191970 · #00BFFF · #4682B4

CSS variables

:root {
  --deep-ocean-cavern-2-1: #000080;
  --deep-ocean-cavern-2-2: #191970;
  --deep-ocean-cavern-2-3: #00BFFF;
  --deep-ocean-cavern-2-4: #4682B4;
  --deep-ocean-cavern-2-5: #0000CD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-cavern-2": {
        1: "#000080",
        2: "#191970",
        3: "#00BFFF",
        4: "#4682B4",
        5: "#0000CD",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#191970

Color 3#00BFFF

Color 4#4682B4

Color 5#0000CD

Accessibility

Contrast checker

1.1:1Fail

7.5:1AAA

3.9:1AA18

1.4:1Fail

1.1:1Fail

7:1AA

3.6:1AA18

1.3:1Fail

7.5:1AAA

7:1AA

1.9:1Fail

5.3:1AA

3.9:1AA18

3.6:1AA18

1.9:1Fail

2.7:1Fail

1.4:1Fail

1.3:1Fail

5.3:1AA

2.7:1Fail

Similar palettes

More like Deep Ocean Cavern

View all dark

Abyssal Trench Mystery