Palette

Abstract Ocean Currents

Mimics the dynamic movement of deep ocean currents, from the mysterious depths to sunlit surface ripples.

coolenergetic5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Abstract Ocean Currents 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 Abstract Ocean Currents.

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

Data visualization

#0A3C63#0F6A97#53A0BE#8BD0E3#C0E8F2

Palette guide

How to use Abstract Ocean Currents

Overview

The Abstract Ocean Currents palette elegantly mimics the dynamic movement of deep ocean currents, from mysterious depths to sunlit surface ripples. Featuring a profound Dark Blue (#0A3C63), a rich Ocean Blue (#0F6A97), a serene Aqua Blue (#53A0BE), a bright Sky Blue (#8BD0E3), and a light Pale Blue (#C0E8F2), this cool-toned collection offers a tranquil yet energetic flow. Designers and developers can leverage these harmonious blues to create calming user interfaces, sophisticated branding, or evocative digital art. Its gradients and tonal variations are ideal for projects that aim to convey depth, fluidity, and a connection to nature, ensuring a cohesive and visually immersive experience across various applications.

Best used for

Nautical-themed branding and identities
Environmental and conservation website design
Spa and wellness digital interfaces
Abstract ocean art and digital illustrations
UI/UX for travel or maritime applications
Calming interior design color schemes

Suggested color roles

primary

#0A3C63 (Dark Blue) - Use this deep blue for dominant backgrounds, strong headers, or foundational elements to establish a sense of depth and stability.

secondary

#0F6A97 (Ocean Blue) - Excellent for secondary content areas, prominent navigation, or to provide a rich, complementary tone to the primary.

accent

#8BD0E3 (Sky Blue) - Deploy this bright sky blue sparingly for highlights, interactive states, or small details that need to pop and add a refreshing touch.

background

Utilize #C0E8F2 (Pale Blue) for a light, airy canvas, or #0A3C63 (Dark Blue) for a deep, immersive backdrop that evokes the ocean's depths.

text

For optimal readability, use a dark charcoal (#333333) or #0A3C63 (Dark Blue) on lighter backgrounds, and crisp white (#FFFFFF) or #C0E8F2 (Pale Blue) on darker elements.

Accessibility notes

Ensure sufficient contrast when using lighter blues like #8BD0E3 or #C0E8F2 for text on similar light backgrounds; opt for darker text.
Always verify contrast ratios for all text and interactive elements to meet WCAG AA or AAA standards, especially between adjacent blues.
Be mindful that #53A0BE (Aqua Blue) and #8BD0E3 (Sky Blue) might have insufficient contrast for small text when used together, provide other cues.
Avoid relying solely on subtle blue shifts to convey information; use icons, underlines, or text labels for clarity.

Recommended combinations

Deep Ocean

Ideal for creating layered backgrounds, immersive hero sections, or a strong, harmonious base for ocean-themed designs.

#0A3C63 · #0F6A97 · #53A0BE

Surface Shimmer

Effective for lighter UI elements, gradients, or to represent reflections and highlights on a watery surface.

#8BD0E3 · #C0E8F2 · #53A0BE

Current Flow

Perfect for data visualizations, progress bars, or any element requiring a smooth, flowing transition of blues.

#0F6A97 · #53A0BE · #8BD0E3

CSS variables

:root {
  --abstract-ocean-currents-1: #0A3C63;
  --abstract-ocean-currents-2: #0F6A97;
  --abstract-ocean-currents-3: #53A0BE;
  --abstract-ocean-currents-4: #8BD0E3;
  --abstract-ocean-currents-5: #C0E8F2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abstract-ocean-currents": {
        1: "#0A3C63",
        2: "#0F6A97",
        3: "#53A0BE",
        4: "#8BD0E3",
        5: "#C0E8F2",
      }
    }
  }
}

Hex values

Color 1#0A3C63

Color 2#0F6A97

Color 3#53A0BE

Color 4#8BD0E3

Color 5#C0E8F2

Accessibility

Contrast checker

1.9:1Fail

3.9:1AA18

6.6:1AA

8.7:1AAA

1.9:1Fail

2:1Fail

3.5:1AA18

4.6:1AA

3.9:1AA18

2:1Fail

1.7:1Fail

2.3:1Fail

6.6:1AA

3.5:1AA18

1.7:1Fail

1.3:1Fail

8.7:1AAA

4.6:1AA

2.3:1Fail

1.3:1Fail

Similar palettes

More like Abstract Ocean Currents

View all cool

Celestial Ocean Reef

Oceanic Hydro Current