Palette

Abstract Ocean Flow

Dynamic and powerful shades capturing the untamed movement and energy of ocean currents.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00BFFF#00CED1#008080#F0F8FF#1C1C1C

Palette guide

How to use Abstract Ocean Flow

Overview

The Abstract Ocean Flow palette captures the untamed movement and energy of ocean currents with its dynamic and powerful shades. Featuring a brilliant Deep Sky Blue (#00BFFF), a vibrant Dark Cyan (#00CED1), a deep Teal (#008080), a crisp Ghost White (#F0F8FF), and a grounding Dark Gray (#1C1C1C), this collection offers striking contrasts and a refreshing feel. Designers and developers can leverage these energetic hues to create compelling branding, engaging user interfaces, or modern digital art. Its ability to balance vibrant blues with strong neutrals makes it versatile for conveying both energetic motion and sophisticated depth, ensuring designs are memorable and visually appealing across various applications.

Best used for

Vibrant ocean-themed branding and identities
Energetic UI/UX designs for interactive platforms
Abstract digital art and motion graphics
Sports and outdoor adventure marketing
Modern web design with a fresh aesthetic
Event promotions and festival graphics

Suggested color roles

primary

#00BFFF (Deep Sky Blue) - Use this brilliant blue for key calls to action, prominent headings, or to establish an energetic and refreshing focal point.

secondary

#00CED1 (Dark Cyan) - A strong complementary color, excellent for secondary navigation, background elements, or to add depth with a vibrant twist.

accent

#F0F8FF (Ghost White) - Deploy this crisp white sparingly for highlights, interactive states, or small details that need to truly pop and provide visual breathing room.

background

Utilize #F0F8FF (Ghost White) for a clean, expansive canvas, or #1C1C1C (Dark Gray) for a sophisticated, deep backdrop that makes the blues appear more vivid.

text

For optimal readability, use #1C1C1C (Dark Gray) or black on lighter backgrounds, and crisp white (#FFFFFF) or #F0F8FF (Ghost White) on darker elements.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using #F0F8FF (Ghost White) for text on light backgrounds; dark text is recommended.
Always verify contrast ratios for all text and interactive elements to meet WCAG AA or AAA standards, particularly with vibrant blues like #00BFFF.
Be cautious when placing #00BFFF (Deep Sky Blue) and #00CED1 (Dark Cyan) in close proximity for small text, as their similar hues might blend for some users.
Consider providing alternative indicators for information conveyed by color alone, especially with similar value blues and cyans.

Recommended combinations

Dynamic Core

Ideal for hero sections, strong calls to action, or designs requiring a powerful, modern, and energetic feel.

#00BFFF · #00CED1 · #1C1C1C

Refreshing Contrast

Effective for clean UI elements, subtle backgrounds, or to provide clear distinction with a bright, refreshing highlight.

#F0F8FF · #008080 · #00BFFF

Deep Flow

Perfect for sophisticated backgrounds, data visualizations, or textual content, offering depth with a vibrant accent.

#1C1C1C · #008080 · #00CED1

CSS variables

:root {
  --abstract-ocean-flow-1: #00BFFF;
  --abstract-ocean-flow-2: #00CED1;
  --abstract-ocean-flow-3: #008080;
  --abstract-ocean-flow-4: #F0F8FF;
  --abstract-ocean-flow-5: #1C1C1C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abstract-ocean-flow": {
        1: "#00BFFF",
        2: "#00CED1",
        3: "#008080",
        4: "#F0F8FF",
        5: "#1C1C1C",
      }
    }
  }
}

Hex values

Color 1#00BFFF

Color 2#00CED1

Color 3#008080

Color 4#F0F8FF

Color 5#1C1C1C

Accessibility

Contrast checker

1.1:1Fail

2.2:1Fail

2:1Fail

8:1AAA

1.1:1Fail

2.4:1Fail

1.8:1Fail

8.7:1AAA

2.2:1Fail

2.4:1Fail

4.4:1AA18

3.6:1AA18

2:1Fail

1.8:1Fail

4.4:1AA18

15.9:1AAA

8:1AAA

8.7:1AAA

3.6:1AA18

15.9:1AAA

Similar palettes

More like Abstract Ocean Flow