Back to palettes

Palette

Ocean Depths Current

Deep and mysterious hues capturing the enigmatic beauty of the ocean's unexplored depths.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ocean Depths Current 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 Depths Current.

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

Data visualization

#00008B#0000CD#008B8B#4682B4#6A5ACD

Palette guide

How to use Ocean Depths Current

Overview

The Ocean Depths Current palette offers a captivating range of deep blues and teals, perfect for designs seeking a tranquil yet sophisticated feel. Featuring a rich Navy Blue (#00008B), a vibrant Medium Blue (#0000CD), and an intriguing Dark Cyan (#008B8B), this collection evokes the mysterious beauty of the ocean's depths. Developers can leverage the subtle variations between Steel Blue (#4682B4) and Slate Blue (#6A5ACD) for creating visual hierarchy or gradient effects. This palette is ideal for projects requiring a sense of calm, stability, and elegance, ensuring a cohesive and immersive user experience across digital interfaces or branding materials.

Best used for

  • Luxury brand websites and apps
  • Marine-themed product packaging
  • Serene spa or wellness center branding
  • Corporate reports and presentations
  • Digital interfaces for educational platforms
  • Underwater photography portfolios

Suggested color roles

primary

Deep Navy Blue (#00008B) for dominant sections, headers, or corporate branding, conveying stability.

secondary

Medium Blue (#0000CD) for sub-headings, interactive elements, or significant UI components, offering a brighter contrast.

accent

Dark Cyan (#008B8B) to highlight calls-to-action, key data points, or subtle decorative elements.

background

Steel Blue (#4682B4) as a soft, calming backdrop for content areas or card elements, providing depth.

text

Use white or a very light grey on darker backgrounds, or a deep charcoal for lighter sections to ensure readability.

Accessibility notes

  • Ensure sufficient contrast between #00008B and #0000CD when used adjacently for text/background.
  • Dark Cyan (#008B8B) may require light text (e.g., white) for WCAG AA compliance.
  • Steel Blue (#4682B4) provides a good base for dark text, but test contrast with lighter text if used as a background.
  • Slate Blue (#6A5ACD) is a rich mid-tone; pair with pure white text for optimal legibility.

Recommended combinations

Primary Focus

Ideal for hero sections, using #00008B as background, #0000CD for main titles, and #4682B4 for supporting text or UI elements.

#00008B · #0000CD · #4682B4

Accent Contrast

Use #008B8B for interactive elements, #6A5ACD for secondary accents, balanced by #00008B for depth.

#008B8B · #6A5ACD · #00008B

Subtle Gradient

Create a smooth, calming gradient effect, moving from #4682B4 to #0000CD, with #6A5ACD for highlights.

#4682B4 · #0000CD · #6A5ACD

CSS variables

:root {
  --ocean-depths-current-1: #00008B;
  --ocean-depths-current-2: #0000CD;
  --ocean-depths-current-3: #008B8B;
  --ocean-depths-current-4: #4682B4;
  --ocean-depths-current-5: #6A5ACD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-depths-current": {
        1: "#00008B",
        2: "#0000CD",
        3: "#008B8B",
        4: "#4682B4",
        5: "#6A5ACD",
      }
    }
  }
}

Related searches

deep blue color palettetranquil ocean colorsnavy and teal designelegant blue website palettedark blue aquatic theme

Palette colors

Hex values

Color 1#00008B
·
Color 2#0000CD
·
Color 3#008B8B
·
Color 4#4682B4
·
Color 5#6A5ACD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
3.7:1AA18
3.7:1AA18
2.9:1Fail
2
1.4:1Fail
2.7:1Fail
2.7:1Fail
2.1:1Fail
3
3.7:1AA18
2.7:1Fail
1:1Fail
1.3:1Fail
4
3.7:1AA18
2.7:1Fail
1:1Fail
1.3:1Fail
5
2.9:1Fail
2.1:1Fail
1.3:1Fail
1.3:1Fail

Similar palettes

More like Ocean Depths Current

View all dark
Cobalt Abyss Dive
Abyssal Bioluminescence
Abyssal Coral Bloom
Abyssal Coral Bloom
Aquatic Deep Dive
Deep Ocean Twilight