Palette

Deep Ocean Current

A powerful progression of deep blues, from abyssal depths to lighter currents, reflecting the ocean's expanse.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#001F3F#004080#0066CC#4169E1#87CEEB

Palette guide

How to use Deep Ocean Current

Overview

The Deep Ocean Current palette offers a classic and powerful progression of blues, spanning from the deepest abyssal tones to a vibrant sky blue. It starts with the profound #001F3F, gaining intensity with #004080 and #0066CC, which provide a strong, corporate feel. The lighter #4169E1 and the bright #87CEEB introduce clarity and a sense of vast expanse. This palette is highly versatile, making it ideal for designers and developers requiring professionalism, trust, and a clear visual hierarchy. It excels in corporate branding, educational platforms, and digital interfaces where reliability is key.

Best used for

Corporate branding (finance, tech, legal)
Government websites and public services
Educational institutions and university sites
Professional UI/UX design for software applications
Business intelligence dashboards and analytics platforms
Maritime and logistics industry branding

Suggested color roles

primary

Use #001F3F as the deep, foundational blue for backgrounds or main structural elements, conveying trust and authority.

secondary

Employ #004080 for secondary content areas, navigation, or large UI components, offering reliable support.

accent

Apply #87CEEB for bright, clear highlights, calls to action, or key information to ensure high visibility and clarity.

background

The deep #001F3F is excellent for a strong dark mode. For a clean, light mode background, #87CEEB can be used with darker text.

text

For maximum readability on dark backgrounds like #001F3F, #004080, or #0066CC, use white or a light grey. On lighter backgrounds like #87CEEB, use #001F3F or dark charcoal.

Accessibility notes

White text offers excellent contrast on #001F3F, #004080, and #0066CC, ensuring high readability for all users.
When using #87CEEB as a background, ensure text in #001F3F or #004080 meets WCAG AA contrast standards.
The lighter #4169E1 can be used for text on #001F3F, but always check contrast for smaller font sizes.
Ensure all interactive elements (buttons, links) maintain sufficient contrast in their default, hover, and active states.

Recommended combinations

Professional Depth

Creates a strong brand presence and clear visual hierarchy, ideal for hero sections and key information.

#001F3F · #0066CC · #87CEEB

UI Flow

Perfect for interactive elements, progress indicators, or content sections that require a cohesive blue progression.

#004080 · #0066CC · #4169E1

Core Brand

Forms a strong core identity, suitable for main branding elements, primary UI components, and clear, bright accents.

#001F3F · #004080 · #87CEEB

CSS variables

:root {
  --deep-ocean-current-1: #001F3F;
  --deep-ocean-current-2: #004080;
  --deep-ocean-current-3: #0066CC;
  --deep-ocean-current-4: #4169E1;
  --deep-ocean-current-5: #87CEEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-current": {
        1: "#001F3F",
        2: "#004080",
        3: "#0066CC",
        4: "#4169E1",
        5: "#87CEEB",
      }
    }
  }
}

Hex values

Color 1#001F3F

Color 2#004080

Color 3#0066CC

Color 4#4169E1

Color 5#87CEEB

Accessibility

Contrast checker

1.6:1Fail

3:1Fail

3.4:1AA18

9.5:1AAA

1.6:1Fail

1.8:1Fail

2.1:1Fail

5.9:1AA

3:1Fail

1.8:1Fail

1.1:1Fail

3.2:1AA18

3.4:1AA18

2.1:1Fail

1.1:1Fail

2.8:1Fail

9.5:1AAA

5.9:1AA

3.2:1AA18

2.8:1Fail

Similar palettes

More like Deep Ocean Current