Palette

Ocean Current Swirl

Powerful blues and whites mimic the swirling, unstoppable forces of deep ocean currents and crashing waves.

coolenergetic5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A4A6F#2A7E9C#EAF4F4#0E5F7B#4F9BB3

Palette guide

How to use Ocean Current Swirl

Overview

The Ocean Current Swirl palette masterfully combines powerful blues with a refreshing near-white, mimicking the dynamic forces of deep ocean currents and crashing waves. Anchored by the robust #1A4A6F and the slightly lighter #2A7E9C, it evokes a sense of depth and movement. The vibrant #EAF4F4 provides a crisp, airy contrast, while #0E5F7B and #4F9BB3 offer additional mid-tones to build rich visual textures. This collection of hex codes is perfect for designers and developers seeking to create energetic yet elegant designs. It's particularly well-suited for projects that require a fresh, clean aesthetic with a strong connection to marine themes, offering both grounding and illuminating elements.

Best used for

Adventure travel websites and blogs
Coastal lifestyle branding
Water sports equipment design
Dynamic app interfaces with motion
Environmental education campaigns
Weather or climate visualization tools

Suggested color roles

primary

Designate #1A4A6F for main structural elements, headers, or large content blocks, providing a stable, deep blue foundation.

secondary

Utilize #2A7E9C for supporting elements, subheadings, or secondary navigation, offering a harmonious and slightly brighter tone.

accent

Employ #EAF4F4 for highlights, clean backgrounds, or interactive elements, providing a stark, refreshing contrast.

background

Use #EAF4F4 for a clean, expansive background, or #0E5F7B for a more immersive, deep-water feel.

text

For dark backgrounds like #1A4A6F or #0E5F7B, use white or #EAF4F4 text. For the light #EAF4F4 background, use #1A4A6F or black for optimal readability.

Accessibility notes

Ensure high contrast for any text on #EAF4F4; dark blues like #1A4A6F or black are necessary.
White text on #1A4A6F, #2A7E9C, and #0E5F7B should provide good readability.
Avoid using #4F9BB3 for small text on #EAF4F4 without rigorous contrast checking.
Consider using larger text sizes when pairing #2A7E9C with #4F9BB3 to maintain legibility.

Recommended combinations

Wave Crest

Creates a striking contrast, perfect for hero sections with dark backgrounds and bright text/elements, mimicking waves.

#1A4A6F · #EAF4F4 · #2A7E9C

Deep Swirl

Ideal for creating depth and subtle variation in backgrounds or layered UI components, evoking deep currents.

#0E5F7B · #1A4A6F · #2A7E9C

Energetic Flow

Use #1A4A6F as a base, #4F9BB3 for content, and #EAF4F4 for crisp icons, buttons, or clean section breaks.

#4F9BB3 · #EAF4F4 · #1A4A6F

CSS variables

:root {
  --ocean-current-swirl-1: #1A4A6F;
  --ocean-current-swirl-2: #2A7E9C;
  --ocean-current-swirl-3: #EAF4F4;
  --ocean-current-swirl-4: #0E5F7B;
  --ocean-current-swirl-5: #4F9BB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-current-swirl": {
        1: "#1A4A6F",
        2: "#2A7E9C",
        3: "#EAF4F4",
        4: "#0E5F7B",
        5: "#4F9BB3",
      }
    }
  }
}

Hex values

Color 1#1A4A6F

Color 2#2A7E9C

Color 3#EAF4F4

Color 4#0E5F7B

Color 5#4F9BB3

Accessibility

Contrast checker

2:1Fail

8.3:1AAA

1.3:1Fail

3:1Fail

2:1Fail

4.1:1AA18

1.6:1Fail

1.5:1Fail

8.3:1AAA

4.1:1AA18

6.4:1AA

2.8:1Fail

1.3:1Fail

1.6:1Fail

6.4:1AA

2.3:1Fail

3:1Fail

1.5:1Fail

2.8:1Fail

2.3:1Fail

Similar palettes

More like Ocean Current Swirl

View all cool

Abstract Ocean Currents