Palette

Ocean Current Drift

A calming flow of deep blues and teals, like the gentle, swirling currents of the open ocean.

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

#005F73#0A9396#94D2BD#E9D8A6#001219

Palette guide

How to use Ocean Current Drift

Overview

The Ocean Current Drift palette embodies a calming flow of deep blues and teals, reminiscent of the gentle, swirling currents of the open ocean. It features a robust primary blue, #005F73, complemented by the brighter, inviting teal #0A9396. The palette then gracefully transitions to lighter, more serene tones with #94D2BD and the warm, sandy #E9D8A6, grounded by the very dark #001219. This selection of hex codes provides designers and developers with a versatile toolkit for creating designs that are both grounding and uplifting. It's particularly effective for projects that aim to evoke tranquility, natural beauty, and a sophisticated, organic feel.

Best used for

Eco-friendly product branding
Nature-inspired web design
Educational materials on marine life
Wellness and mindfulness apps
Art and photography showcases
Sustainable fashion lines

Suggested color roles

primary

Apply #005F73 for core branding, main navigation, or dominant sections to establish a deep, stable presence.

secondary

Utilize #0A9396 for supporting elements, subheadings, or secondary content blocks, offering a vibrant yet harmonious contrast.

accent

Employ #E9D8A6 to highlight key features, calls to action, or interactive elements, providing a soft, natural focal point.

background

The very dark #001219 is excellent for an immersive, deep background, while #94D2BD can serve as a lighter, airy content background.

text

For darker colors like #005F73 and #001219, use white or a light cream text for maximum legibility. For #94D2BD or #E9D8A6, use #001219 or #005F73 for clear, accessible text.

Accessibility notes

Ensure sufficient contrast when using #E9D8A6 for text on #94D2BD; dark text is generally safer.
White or very light text on #001219 and #005F73 will meet most accessibility standards for readability.
Test combinations like #0A9396 text on #94D2BD background for sufficient contrast, especially for smaller fonts.
Consider larger font sizes for any text on the lighter #E9D8A6 if using a medium dark color for text.

Recommended combinations

Deep & Serene

Creates a sophisticated, deep-sea effect, perfect for dark mode themes or elegant header designs.

#001219 · #005F73 · #0A9396

Coastal Harmony

Excellent for a fresh, airy feel, suitable for web backgrounds, content cards, or infographics with a natural touch.

#0A9396 · #94D2BD · #E9D8A6

Natural Contrast

Use #005F73 as a main color, #E9D8A6 for highlights or primary text, and #001219 for very dark text or subtle backgrounds.

#005F73 · #E9D8A6 · #001219

CSS variables

:root {
  --ocean-current-drift-1: #005F73;
  --ocean-current-drift-2: #0A9396;
  --ocean-current-drift-3: #94D2BD;
  --ocean-current-drift-4: #E9D8A6;
  --ocean-current-drift-5: #001219;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-current-drift": {
        1: "#005F73",
        2: "#0A9396",
        3: "#94D2BD",
        4: "#E9D8A6",
        5: "#001219",
      }
    }
  }
}

Hex values

Color 1#005F73

Color 2#0A9396

Color 3#94D2BD

Color 4#E9D8A6

Color 5#001219

Accessibility

Contrast checker

2:1Fail

4.2:1AA18

5.1:1AA

2.6:1Fail

2:1Fail

2.2:1Fail

2.6:1Fail

5.1:1AA

4.2:1AA18

2.2:1Fail

1.2:1Fail

11.1:1AAA

5.1:1AA

2.6:1Fail

1.2:1Fail

13.5:1AAA

2.6:1Fail

5.1:1AA

11.1:1AAA

13.5:1AAA

Similar palettes

More like Ocean Current Drift

Ocean Current Drift

See it in context.

Ready when you are.

Built with Ocean Current Drift.

How to use Ocean Current Drift

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep & Serene

Coastal Harmony

Natural Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Ocean Current Drift