Palette

Deep Ocean Current

Explores the varying depths of the ocean, from the mysterious abyss to the light-kissed surface.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0B2447#19376D#576CBC#A5D7E8#D8F0F8

Palette guide

How to use Deep Ocean Current

Overview

The Deep Ocean Current palette offers a serene and expansive journey through ocean depths, from the mysterious abyss to the light-kissed surface. It begins with the profound #0B2447 and #19376D, establishing a deep, anchoring base. The palette then transitions through the rich #576CBC, leading to the airy #A5D7E8 and the luminous #D8F0F8, which evoke clear, shallow waters. This collection is perfect for designers and developers aiming to convey tranquility, vastness, and clarity. It's excellently suited for educational content, travel branding, or wellness applications that require a sophisticated and calming visual narrative.

Best used for

Travel brochures (coastal and marine destinations)
Educational content about marine science
Wellness and mindfulness app interfaces
Serene website designs for spas or retreats
Environmental reports and conservation initiatives
Art and photography portfolios with a water theme

Suggested color roles

primary

Use #0B2447 as the deep, anchoring base for backgrounds or main structural elements, conveying stability and mystery.

secondary

Employ #19376D for secondary content areas, navigation, or as a rich, supportive dark tone, adding visual weight.

accent

Apply #D8F0F8 for airy, luminous highlights, interactive elements, or key information to ensure refreshing clarity.

background

The profound #0B2447 is excellent for an immersive dark mode. For a light, refreshing background, #D8F0F8 can be used with darker text.

text

For optimal readability on dark backgrounds like #0B2447 or #19376D, use white or a very light grey. On lighter backgrounds like #A5D7E8 or #D8F0F8, use #0B2447 or a dark charcoal.

Accessibility notes

White or very light grey text provides excellent contrast against #0B2447 and #19376D backgrounds, ensuring readability.
When using #A5D7E8 or #D8F0F8 as backgrounds, pair with a dark text color such as #0B2447 to meet WCAG AA standards.
Avoid using #576CBC for small text on #A5D7E8 due to potential insufficient contrast for legibility.
Always verify contrast ratios for all text and interactive components across various display settings and font sizes.

Recommended combinations

Full Depth Flow

Creates a comprehensive visual narrative from deep to light, ideal for multi-section layouts or visual storytelling.

#0B2447 · #576CBC · #D8F0F8

Deep Tones

Perfect for establishing the foundational dark theme, main backgrounds, and primary content blocks with rich depth.

#0B2447 · #19376D · #576CBC

Light & Airy

Suitable for headings, clean sections, or UI elements that need to convey freshness and openness.

#576CBC · #A5D7E8 · #D8F0F8

CSS variables

:root {
  --deep-ocean-current-3-1: #0B2447;
  --deep-ocean-current-3-2: #19376D;
  --deep-ocean-current-3-3: #576CBC;
  --deep-ocean-current-3-4: #A5D7E8;
  --deep-ocean-current-3-5: #D8F0F8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-current-3": {
        1: "#0B2447",
        2: "#19376D",
        3: "#576CBC",
        4: "#A5D7E8",
        5: "#D8F0F8",
      }
    }
  }
}

Hex values

Color 1#0B2447

Color 2#19376D

Color 3#576CBC

Color 4#A5D7E8

Color 5#D8F0F8

Accessibility

Contrast checker

1.3:1Fail

3.2:1AA18

9.9:1AAA

13.1:1AAA

1.3:1Fail

2.4:1Fail

7.5:1AAA

9.8:1AAA

3.2:1AA18

2.4:1Fail

3.2:1AA18

4.1:1AA18

9.9:1AAA

7.5:1AAA

3.2:1AA18

1.3:1Fail

13.1:1AAA

9.8:1AAA

4.1:1AA18

1.3:1Fail

Similar palettes

More like Deep Ocean Current

Deep Ocean Current

See it in context.

Ready when you are.

Built with Deep Ocean Current.

How to use Deep Ocean Current

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Full Depth Flow

Deep Tones

Light & Airy

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Deep Ocean Current