Back to palettes

Palette

Azure Ocean Current

Deep and vibrant blues capturing the powerful and serene motion of an azure ocean current.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#004E89#007CC7#4DA6FF#003D6D#006AB5

Palette guide

How to use Azure Ocean Current

Overview

The Azure Ocean Current palette (ID: azure-ocean-current-2) captures the powerful and serene motion of an azure ocean current with deep and vibrant blues. It features a range from the profound navy of #003D6D and #004E89, through the strong mid-blues of #006AB5 and #007CC7, to the bright, energetic #4DA6FF. Designers and developers will find these hues exceptionally versatile for creating dynamic, trustworthy, and immersive digital experiences. The palette's strong blue presence evokes feelings of depth, reliability, and clarity, making it ideal for applications that aim for a professional yet engaging aesthetic.

Best used for

  • Maritime industry branding
  • Corporate financial services
  • Technology company websites
  • Oceanography research platforms
  • Sports and outdoor activity brands (water-focused)
  • Government and public sector interfaces

Suggested color roles

primary

#004E89 serves as a strong, authoritative primary, ideal for main calls to action, brand logos, or important headers.

secondary

#006AB5 provides a stable, professional secondary, suitable for subheadings, navigation, or supportive informational blocks.

accent

#4DA6FF delivers a bright, energetic accent, perfect for interactive elements, hover states, or eye-catching details.

background

#007CC7 (as a slightly lighter, expansive dark background) or a near-white for general content sections.

text

Use #4DA6FF or a very light grey for body text on #004E89 or #003D6D backgrounds for optimal legibility.

Accessibility notes

  • Ensure #4DA6FF text on #004E89 backgrounds meets WCAG AA contrast standards.
  • Avoid using similar dark blues for text on dark backgrounds; always check contrast carefully.
  • Use #004E89 or #006AB5 for critical interactive elements to ensure clear visibility.
  • For large text, #007CC7 on #003D6D can work, but verify contrast ratios.

Recommended combinations

Deep Current

Creates a powerful, deep gradient, ideal for impressive hero sections or sophisticated data displays.

#003D6D · #004E89 · #006AB5

Vibrant Flow

Excellent for energetic sections, providing a bright, flowing effect for headers or interactive elements.

#007CC7 · #4DA6FF · #006AB5

Ocean Contrast

A strong contrasting trio for clear visual hierarchy, combining deep primary with vibrant accent and mid-tone support.

#004E89 · #4DA6FF · #007CC7

CSS variables

:root {
  --azure-ocean-current-2-1: #004E89;
  --azure-ocean-current-2-2: #007CC7;
  --azure-ocean-current-2-3: #4DA6FF;
  --azure-ocean-current-2-4: #003D6D;
  --azure-ocean-current-2-5: #006AB5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-ocean-current-2": {
        1: "#004E89",
        2: "#007CC7",
        3: "#4DA6FF",
        4: "#003D6D",
        5: "#006AB5",
      }
    }
  }
}

Related searches

deep blue ocean palettevibrant navy colorspowerful blue web designazure water current schemeprofessional blue branding

Palette colors

Hex values

Color 1#004E89
·
Color 2#007CC7
·
Color 3#4DA6FF
·
Color 4#003D6D
·
Color 5#006AB5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.4:1AA18
1.3:1Fail
1.5:1Fail
2
1.9:1Fail
1.7:1Fail
2.5:1Fail
1.3:1Fail
3
3.4:1AA18
1.7:1Fail
4.3:1AA18
2.2:1Fail
4
1.3:1Fail
2.5:1Fail
4.3:1AA18
2:1Fail
5
1.5:1Fail
1.3:1Fail
2.2:1Fail
2:1Fail

Similar palettes

More like Azure Ocean Current

View all cool