Palette

Ocean Current Drift

A serene blend of deep ocean blues and vibrant turquoises, mimicking the gentle flow of sea currents.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F4C5C#187178#25979C#3ACCD0#67E8EB

Palette guide

How to use Ocean Current Drift

Overview

The Ocean Current Drift palette offers a serene yet vibrant blend of deep ocean blues and refreshing turquoises, perfectly mimicking the gentle, flowing nature of sea currents. Anchored by the profound #0F4C5C, this palette transitions smoothly through the rich #187178 and the lively #25979C. The brighter tones, #3ACCD0 and the luminous #67E8EB, provide excellent opportunities for accents and highlights, injecting energy into calm designs. Designers and developers will find these hex codes incredibly versatile for creating interfaces and visuals that convey tranquility, professionalism, and a touch of natural dynamism. It's a superb choice for projects seeking a fresh, aquatic feel.

Best used for

Spa and wellness branding
Environmental non-profit websites
Travel and resort marketing materials
Mobile app interfaces for relaxation or meditation
Aquatic-themed product design
Nature photography portfolios

Suggested color roles

primary

Designate #0F4C5C for main structural elements, navigation, or large background areas to establish a deep, calming foundation.

secondary

Utilize #187178 for subheadings, secondary buttons, or content panels, providing a slightly lighter, supportive depth.

accent

Employ #67E8EB for interactive elements, hover states, or key information, offering a vibrant and highly visible highlight.

background

A lighter background like #3ACCD0 can be used for content sections, or even #0F4C5C for a darker, immersive feel.

text

For dark backgrounds, use white or a very light grey text. On lighter colors like #67E8EB, a dark blue such as #0F4C5C or #187178, or even black, ensures optimal readability.

Accessibility notes

Ensure high contrast for text on #67E8EB; dark text like #0F4C5C or black is usually required.
Verify contrast ratios for #3ACCD0 against #25979C if used for text or small elements.
White text on #0F4C5C and #187178 generally provides excellent readability.
Avoid using similar middle-tone colors for adjacent text and background elements without rigorous testing.

Recommended combinations

Tranquil Flow

Perfect for creating a subtle gradient or layered effect, evoking a sense of calm progression in headers or banners.

#0F4C5C · #187178 · #25979C

Vibrant Accent

Use #0F4C5C as a base, #187178 for main content, and #67E8EB for impactful call-to-actions or focal points.

#187178 · #67E8EB · #0F4C5C

Light & Airy

Excellent for creating a fresh, light aesthetic in infographics, clean UI cards, or subtle background patterns.

#25979C · #3ACCD0 · #67E8EB

CSS variables

:root {
  --ocean-current-drift-2-1: #0F4C5C;
  --ocean-current-drift-2-2: #187178;
  --ocean-current-drift-2-3: #25979C;
  --ocean-current-drift-2-4: #3ACCD0;
  --ocean-current-drift-2-5: #67E8EB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-current-drift-2": {
        1: "#0F4C5C",
        2: "#187178",
        3: "#25979C",
        4: "#3ACCD0",
        5: "#67E8EB",
      }
    }
  }
}

Hex values

Color 1#0F4C5C

Color 2#187178

Color 3#25979C

Color 4#3ACCD0

Color 5#67E8EB

Accessibility

Contrast checker

1.7:1Fail

2.7:1Fail

4.9:1AA

6.5:1AA

1.7:1Fail

1.6:1Fail

2.9:1Fail

3.9:1AA18

2.7:1Fail

1.6:1Fail

1.8:1Fail

2.4:1Fail

4.9:1AA

2.9:1Fail

1.8:1Fail

1.3:1Fail

6.5:1AA

3.9:1AA18

2.4:1Fail

1.3:1Fail

Similar palettes

More like Ocean Current Drift

Abyssal Current Glide