Palette

Azure Ocean Current

Explores the magnificent range of deep to vibrant blues found in the vast open ocean.

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

#000080#0000CD#4169E1#6495ED#B0E0E6

Palette guide

How to use Azure Ocean Current

Overview

The Azure Ocean Current palette (ID: azure-ocean-current) explores the magnificent range of deep to vibrant blues found in the vast open ocean. It features the profound navy of #000080 and #0000CD, the strong royal blue of #4169E1, the balanced cornflower blue of #6495ED, and the softest aqua of #B0E0E6. Designers and developers will find these hues exceptionally versatile for creating serene, sophisticated, and immersive digital experiences. This cool palette's deep and expansive blue tones evoke feelings of depth, reliability, and clarity, making it ideal for applications that aim for a professional yet engaging aesthetic, reflecting the ocean's calm power.

Best used for

Luxury yachting brands
Corporate identity (established)
Oceanography research platforms
Science and education websites
High-end technology interfaces
Financial services with a global reach

Suggested color roles

primary

#000080 serves as a deep, commanding primary, ideal for strong branding, main navigation, or important headers.

secondary

#0000CD provides a slightly lighter, yet still deep, secondary, suitable for subheadings, content sections, or supportive graphics.

accent

#4169E1 delivers a vibrant, engaging accent, perfect for interactive elements, hover states, or eye-catching details.

background

#B0E0E6 creates a very light, expansive backdrop, ensuring content clarity and an airy, tranquil feel.

text

Use #000080 or a deep charcoal for body text on #B0E0E6 or #6495ED backgrounds for optimal legibility.

Accessibility notes

Ensure #000080 text on #B0E0E6 backgrounds meets WCAG AA contrast standards.
Avoid using #B0E0E6 for small text on any other palette color due to insufficient contrast.
Use #000080 or #4169E1 for critical interactive elements to ensure clear visibility.
For large text, #6495ED on #B0E0E6 can work, but always verify contrast ratios.

Recommended combinations

Deep Ocean Flow

Creates a profound, immersive gradient, ideal for dark mode themes or impactful hero sections.

#000080 · #0000CD · #4169E1

Clear Horizon

Excellent for light, airy layouts, using lighter tones for backgrounds and mid-blue for structure.

#B0E0E6 · #6495ED · #4169E1

Oceanic Contrast

A strong contrasting trio for clear visual hierarchy, combining deep primary with light background and supportive secondary.

#000080 · #B0E0E6 · #0000CD

CSS variables

:root {
  --azure-ocean-current-1: #000080;
  --azure-ocean-current-2: #0000CD;
  --azure-ocean-current-3: #4169E1;
  --azure-ocean-current-4: #6495ED;
  --azure-ocean-current-5: #B0E0E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-ocean-current": {
        1: "#000080",
        2: "#0000CD",
        3: "#4169E1",
        4: "#6495ED",
        5: "#B0E0E6",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#0000CD

Color 3#4169E1

Color 4#6495ED

Color 5#B0E0E6

Accessibility

Contrast checker

1.4:1Fail

3.3:1AA18

5.4:1AA

11.2:1AAA

1.4:1Fail

2.3:1Fail

3.8:1AA18

7.8:1AAA

3.3:1AA18

2.3:1Fail

1.6:1Fail

3.4:1AA18

5.4:1AA

3.8:1AA18

1.6:1Fail

2.1:1Fail

11.2:1AAA

7.8:1AAA

3.4:1AA18

2.1:1Fail

Similar palettes

More like Azure Ocean Current