Back to palettes

Palette

Ocean Current Depths

Explores the powerful, sweeping movements and profound coolness of the vast underwater currents.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A2F3D#1C546E#3D8C9B#6ABCCD#061B24

Palette guide

How to use Ocean Current Depths

Overview

The Ocean Current Depths palette offers a profound journey into the cool, mysterious blues and teals of the deep sea. Featuring a foundational deep blue-green like #0A2F3D, it perfectly captures the essence of powerful underwater movements. Complementary shades such as the slightly lighter #1C546E and the vibrant teal #3D8C9B provide versatility for a range of design applications. This palette, with its darkest tone #061B24 and a striking accent #6ABCCD, is ideal for creating designs that evoke sophistication, tranquility, and depth. Developers and designers will find these hex codes excellent for establishing a strong, immersive visual identity across digital and print media, from web backgrounds to striking UI elements.

Best used for

  • Marine or environmental branding
  • Sophisticated website and app interfaces
  • Dark mode themes for digital products
  • Luxury product packaging
  • Educational content about oceans
  • Interior design accents for serene spaces

Suggested color roles

primary

Use #0A2F3D as the dominant color for large sections, headers, or primary branding elements, providing a solid, deep foundation.

secondary

Apply #1C546E for supporting elements, subheadings, or background panels, offering a harmonious contrast to the primary blue.

accent

Utilize #6ABCCD to draw attention to call-to-action buttons, interactive elements, or key information, providing a bright, refreshing pop.

background

Employ #061B24 for a truly immersive, dark background, ideal for creating a sense of depth and focus.

text

Pair light text colors like white or a very light grey on darker backgrounds such as #0A2F3D or #061B24 for optimal readability. For lighter elements like #6ABCCD, use a dark blue like #0A2F3D or black for contrast.

Accessibility notes

  • Ensure sufficient contrast when pairing #6ABCCD with any dark text; test with AA or AAA standards.
  • Avoid using #0A2F3D and #1C546E for small text elements against each other without careful contrast checking.
  • For backgrounds like #061B24, white or near-white text is essential for readability.
  • Consider larger font sizes for text set in #3D8C9B against other palette colors to improve legibility.

Recommended combinations

Deep Ocean Base

Ideal for establishing a dark, sophisticated base with subtle depth and layering in UI elements or branding.

#061B24 · #0A2F3D · #1C546E

Current Flow

Excellent for gradients or progressive disclosures, mimicking the natural flow of ocean currents from dark to light.

#0A2F3D · #3D8C9B · #6ABCCD

Accent Contrast

Use the dark #061B24 as a background, #1C546E for content, and #6ABCCD for high-impact calls to action or highlights.

#1C546E · #6ABCCD · #061B24

CSS variables

:root {
  --ocean-current-depths-1: #0A2F3D;
  --ocean-current-depths-2: #1C546E;
  --ocean-current-depths-3: #3D8C9B;
  --ocean-current-depths-4: #6ABCCD;
  --ocean-current-depths-5: #061B24;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-current-depths": {
        1: "#0A2F3D",
        2: "#1C546E",
        3: "#3D8C9B",
        4: "#6ABCCD",
        5: "#061B24",
      }
    }
  }
}

Related searches

deep marine color schemeoceanic blue green palettedark teal web design colorscool water hex codessophisticated ocean branding

Palette colors

Hex values

Color 1#0A2F3D
·
Color 2#1C546E
·
Color 3#3D8C9B
·
Color 4#6ABCCD
·
Color 5#061B24
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.6:1AA18
6.5:1AA
1.2:1Fail
2
1.7:1Fail
2.1:1Fail
3.8:1AA18
2.1:1Fail
3
3.6:1AA18
2.1:1Fail
1.8:1Fail
4.6:1AA
4
6.5:1AA
3.8:1AA18
1.8:1Fail
8.1:1AAA
5
1.2:1Fail
2.1:1Fail
4.6:1AA
8.1:1AAA

Similar palettes

More like Ocean Current Depths

View all cool