Back to palettes

Palette

Ocean Deep Currents

A journey into the cool, mysterious depths of the ocean, from dark abyssal blues to lighter currents.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#001F3F#004080#0066CC#6B8FB4#A3B5C7

Palette guide

How to use Ocean Deep Currents

Overview

The Ocean Deep Currents palette invites designers and developers on a journey into the cool, mysterious depths of the ocean. Starting with the abyssal #001F3F, it gracefully ascends through progressively lighter blues: #004080, #0066CC, #6B8FB4, and finally the serene #A3B5C7. This gradient of blues is perfect for conveying depth, tranquility, and professionalism. The hex codes provide a cohesive and versatile range for creating immersive user experiences, sophisticated branding, and visually harmonious digital and print media. It’s an excellent choice for projects that require a strong sense of calm and reliability, with a touch of natural elegance.

Best used for

  • Financial institutions and corporate websites
  • Luxury travel and cruise line branding
  • Government or official agency platforms
  • Educational content on science or history
  • Wellness and meditation apps
  • Data visualization dashboards

Suggested color roles

primary

Utilize #001F3F for foundational elements, main navigation, or dominant branding, establishing a deep, authoritative presence.

secondary

Employ #004080 for supporting content blocks, subheadings, or secondary interactive elements, offering a harmonious depth.

accent

Apply #0066CC to draw attention to call-to-action buttons, key information, or interactive elements, providing a clear, engaging highlight.

background

The darkest #001F3F creates an immersive background, while #A3B5C7 can serve as a light, airy content background.

text

For the dark blues like #001F3F, #004080, and #0066CC, white or a very light grey text is essential. On lighter shades like #A3B5C7, use #001F3F or black for optimal readability.

Accessibility notes

  • White text on #001F3F, #004080, and #0066CC should provide excellent contrast.
  • Ensure sufficient contrast for dark text on #6B8FB4 and #A3B5C7; black or a very dark blue is recommended.
  • Avoid using #6B8FB4 for text on #A3B5C7 background without thorough contrast testing.
  • Consider larger font sizes for text elements that use lighter blues against similar mid-tone backgrounds.

Recommended combinations

Abyssal Depth

Perfect for creating a deep, professional gradient in headers, footers, or background sections, evoking ocean depths.

#001F3F · #004080 · #0066CC

Surface Calm

Ideal for a lighter, more approachable feel in content cards, infographics, or sections requiring more visual breathing room.

#0066CC · #6B8FB4 · #A3B5C7

Balanced Contrast

Use #001F3F as a background, #A3B5C7 for main content or highlights, and #004080 for secondary text or elements.

#001F3F · #A3B5C7 · #004080

CSS variables

:root {
  --ocean-deep-currents-1: #001F3F;
  --ocean-deep-currents-2: #004080;
  --ocean-deep-currents-3: #0066CC;
  --ocean-deep-currents-4: #6B8FB4;
  --ocean-deep-currents-5: #A3B5C7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-deep-currents": {
        1: "#001F3F",
        2: "#004080",
        3: "#0066CC",
        4: "#6B8FB4",
        5: "#A3B5C7",
      }
    }
  }
}

Related searches

deep blue color schemeoceanic gradient palettecool water professional colorscorporate blue hex codescalm depth web design

Palette colors

Hex values

Color 1#001F3F
·
Color 2#004080
·
Color 3#0066CC
·
Color 4#6B8FB4
·
Color 5#A3B5C7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3:1Fail
4.9:1AA
7.9:1AAA
2
1.6:1Fail
1.8:1Fail
3:1AA18
4.9:1AA
3
3:1Fail
1.8:1Fail
1.6:1Fail
2.6:1Fail
4
4.9:1AA
3:1AA18
1.6:1Fail
1.6:1Fail
5
7.9:1AAA
4.9:1AA
2.6:1Fail
1.6:1Fail

Similar palettes

More like Ocean Deep Currents

View all cool
Abyssal Bioluminescence
Bioluminescent Abyss
Cobalt Abyss Depths
Cobalt Arctic Depth
Deep Ocean Bloom
Deep Ocean Currents