Back to palettes

Palette

Ocean Current Flow

The ever-moving deep and light blues of ocean currents, showcasing their gentle yet powerful flow.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00BFFF#1E90FF#4682B4#6A8AA4#8B9AAF

Palette guide

How to use Ocean Current Flow

Overview

The Ocean Current Flow palette captures the dynamic yet serene essence of the sea's movements, showcasing a beautiful gradient of blues. From the vibrant sky blue #00BFFF to the classic #1E90FF, it transitions smoothly into the more muted, grounding tones of #4682B4, #6A8AA4, and #8B9AAF. This collection of hex codes is ideal for designers and developers aiming to convey fluidity, calm, and professionalism. It offers a versatile range for creating inviting user interfaces, dynamic brand identities, or tranquil digital experiences. The palette's cohesive blue spectrum ensures visual harmony while allowing for distinct differentiation between elements.

Best used for

  • Tech startups focusing on data visualization
  • Marine research and conservation websites
  • Cloud service platforms
  • Sports or fitness apps (water-themed)
  • Educational content about weather or climate
  • Modern corporate branding

Suggested color roles

primary

Utilize #1E90FF for key branding elements, main navigation, or prominent call-to-actions, offering a strong yet approachable blue.

secondary

Employ #4682B4 for supporting content blocks, subheadings, or secondary interactive elements, providing a stable, harmonious tone.

accent

Apply #00BFFF as a vibrant accent for highlights, hover states, or subtle animated elements, drawing attention without being overwhelming.

background

The lighter #8B9AAF can serve as a soft, neutral background, or #4682B4 for a more grounded, immersive feel.

text

For dark backgrounds, white or light grey text is recommended. On lighter shades like #8B9AAF, use a dark blue such as #1E90FF or black for optimal readability.

Accessibility notes

  • White text on #1E90FF and #4682B4 should meet AA contrast standards for most uses.
  • Ensure sufficient contrast for dark text on #00BFFF, which can be challenging; consider larger font sizes.
  • The lighter #6A8AA4 and #8B9AAF may require darker text (e.g., #1E90FF or black) to pass contrast checks.
  • Avoid using adjacent colors like #6A8AA4 and #8B9AAF for text and background without careful testing due to low contrast.

Recommended combinations

Dynamic Gradient

Excellent for creating smooth, flowing gradients in headers, banners, or background elements, mimicking water movement.

#1E90FF · #4682B4 · #6A8AA4

Bright & Clear

Use #8B9AAF as a light background, #1E90FF for content, and #00BFFF for vibrant highlights or interactive elements.

#00BFFF · #8B9AAF · #1E90FF

Muted Depth

Creates a sophisticated, understated look for background textures, secondary information panels, or subtle branding.

#4682B4 · #6A8AA4 · #8B9AAF

CSS variables

:root {
  --ocean-current-flow-1: #00BFFF;
  --ocean-current-flow-2: #1E90FF;
  --ocean-current-flow-3: #4682B4;
  --ocean-current-flow-4: #6A8AA4;
  --ocean-current-flow-5: #8B9AAF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-current-flow": {
        1: "#00BFFF",
        2: "#1E90FF",
        3: "#4682B4",
        4: "#6A8AA4",
        5: "#8B9AAF",
      }
    }
  }
}

Related searches

dynamic blue color paletteocean inspired web colorscalm blue hex codesfluid design color schemeprofessional blue gradient

Palette colors

Hex values

Color 1#00BFFF
·
Color 2#1E90FF
·
Color 3#4682B4
·
Color 4#6A8AA4
·
Color 5#8B9AAF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.9:1Fail
1.7:1Fail
1.3:1Fail
2
1.5:1Fail
1.3:1Fail
1.1:1Fail
1.1:1Fail
3
1.9:1Fail
1.3:1Fail
1.1:1Fail
1.4:1Fail
4
1.7:1Fail
1.1:1Fail
1.1:1Fail
1.3:1Fail
5
1.3:1Fail
1.1:1Fail
1.4:1Fail
1.3:1Fail

Similar palettes

More like Ocean Current Flow

View all cool
Aegean Coast Whisper
Azure Lagoon Dream
Calm Ocean Swell
Cerulean Coast Dream
Cerulean Coastline Calm
Cerulean Shoreline Whisper