Back to palettes

Palette

Deep Ocean Voyage

Descend into the mysterious depths of the ocean, exploring rich blues and subtle shifts of light.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#001F3F#003366#004C99#0066CC#0080FF

Palette guide

How to use Deep Ocean Voyage

Overview

The Deep Ocean Voyage palette invites you to descend into mysterious depths, exploring rich blues and subtle shifts of light. Ranging from the profound #001F3F to the vibrant #0080FF, this palette offers a sense of adventure and discovery. Designers can leverage these shades to create dynamic and engaging digital experiences, while developers will find them ideal for captivating branding, interactive data visualizations, and modern UI themes. The gradual progression from #003366 to #0066CC allows for excellent depth perception and visual hierarchy, making it perfect for projects that convey exploration, technology, or aquatic themes.

Best used for

  • Travel agencies specializing in cruises or diving
  • Interactive educational platforms about oceans
  • High-tech software interfaces
  • Adventure game UI design
  • Environmental awareness campaigns
  • Modern corporate branding

Suggested color roles

primary

Utilize #003366 as the primary background color, providing a solid, deep, and inviting foundation for your content.

secondary

Apply #004C99 for secondary content areas, panels, or navigation, offering a clear visual distinction and layered effect.

accent

Introduce #0080FF as a powerful accent for calls-to-action, key features, or interactive elements, ensuring maximum impact and visibility.

background

The deepest hue, #001F3F, is excellent for expansive backgrounds or header sections, setting an immediate tone of depth and mystery.

text

For optimal readability, use a crisp white or very light gray. #0080FF can be used for larger headings or highlights on the darkest backgrounds.

Accessibility notes

  • Ensure high contrast for text on #001F3F, #003366, and #004C99 by using light text (e.g., white or #0080FF).
  • The lightest color, #0080FF, provides excellent contrast for primary text against all darker blues in the palette.
  • Avoid using #001F3F and #003366 for small text or critical UI elements in close proximity without careful contrast checks.
  • Always test color combinations with accessibility tools to ensure WCAG compliance for readability.

Recommended combinations

Deep Current

Ideal for creating a layered, deep blue background or card system, conveying gradual depth.

#001F3F · #003366 · #004C99

Ocean Glow

Use #003366 as a base, with #0066CC for secondary elements and #0080FF for vibrant, eye-catching highlights.

#003366 · #0066CC · #0080FF

Voyage Contrast

Excellent for a dark, immersive background with a clear, vibrant accent and a strong mid-tone for supporting details.

#001F3F · #0080FF · #004C99

CSS variables

:root {
  --deep-ocean-voyage-1: #001F3F;
  --deep-ocean-voyage-2: #003366;
  --deep-ocean-voyage-3: #004C99;
  --deep-ocean-voyage-4: #0066CC;
  --deep-ocean-voyage-5: #0080FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-voyage": {
        1: "#001F3F",
        2: "#003366",
        3: "#004C99",
        4: "#0066CC",
        5: "#0080FF",
      }
    }
  }
}

Related searches

blue ocean color palettedeep sea hex codesaquatic blue designvibrant blue UI thememarine color scheme

Palette colors

Hex values

Color 1#001F3F
·
Color 2#003366
·
Color 3#004C99
·
Color 4#0066CC
·
Color 5#0080FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2:1Fail
3:1Fail
4.4:1AA18
2
1.3:1Fail
1.5:1Fail
2.3:1Fail
3.3:1AA18
3
2:1Fail
1.5:1Fail
1.5:1Fail
2.2:1Fail
4
3:1Fail
2.3:1Fail
1.5:1Fail
1.5:1Fail
5
4.4:1AA18
3.3:1AA18
2.2:1Fail
1.5:1Fail

Similar palettes

More like Deep Ocean Voyage

View all dark
Abyssal Midnight Reef
Deep Abyss Current
Deep Cobalt Plunge
Deep Ocean Abyss
Deep Ocean Trench
Deep Ocean Twilight