Back to palettes

Palette

Cobalt Ocean Depths

Intense, captivating blues plunge into the mysterious and awe-inspiring darkness of the deep ocean.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#002060#003A8F#0055BF#0070EB#4298F5

Palette guide

How to use Cobalt Ocean Depths

Overview

The Cobalt Ocean Depths palette offers intense, captivating blues that plunge into the mysterious and awe-inspiring darkness of the deep ocean. With colors ranging from the profound #002060 to the vibrant #4298F5, this palette is perfect for designs that evoke mystery, power, and the endless expanse of the sea. Designers can leverage #003A8F as a strong primary, while #0055BF offers a versatile mid-tone for various applications. The brightest hue, #0070EB, provides a compelling highlight. This palette is ideal for projects that aim for a sophisticated, dark, and immersive visual experience, from marine conservation branding to digital interfaces.

Best used for

  • Marine research and conservation websites
  • Luxury yacht and cruise line branding
  • Aquatic sports and dive gear companies
  • Environmental education platforms
  • Documentaries and media about the ocean
  • Corporate presentations with a calm, authoritative tone

Suggested color roles

primary

#003A8F - A deep, authoritative blue that serves as a commanding primary, ideal for main headings, brand logos, or core UI elements, conveying trust and stability.

secondary

#0055BF - A vibrant, yet deep blue, suitable for subheadings, active states, or supporting graphic elements, adding dynamism.

accent

#4298F5 - A bright, clear blue that provides a striking highlight, perfect for interactive elements, key data points, or urgent notifications.

background

#002060 - An intensely dark, almost black-blue, creating an immersive, sophisticated backdrop that enhances the luminosity of lighter blues.

text

For text on #002060 or #003A8F, use #4298F5 or white for optimal readability. For text on #4298F5, use black or #002060.

Accessibility notes

  • Ensure high contrast when placing light text, such as #4298F5, on darker blues like #002060 or #003A8F.
  • Avoid using #0070EB for small text on #0055BF without verifying WCAG AA compliance due to similar luminance values.
  • The brightest hue, #4298F5, offers excellent contrast against all darker blues in the palette for interactive elements.
  • When using #4298F5 as a background, ensure text is in a contrasting dark color like black or #002060 to maintain legibility.

Recommended combinations

Deep Current

Creates a dramatic, high-contrast interface; #002060 for background, #003A8F for content, #4298F5 for bright highlights/CTAs.

#002060 · #003A8F · #4298F5

Ocean Vista

Use #003A8F for main sections, #0055BF for supporting elements, and #4298F5 for vibrant accents or delicate details.

#003A8F · #0055BF · #4298F5

Abyssal Layers

Ideal for creating depth through gradients or layered UI, moving from the deepest blue to a rich, true blue.

#002060 · #003A8F · #0055BF

CSS variables

:root {
  --cobalt-ocean-depths-1: #002060;
  --cobalt-ocean-depths-2: #003A8F;
  --cobalt-ocean-depths-3: #0055BF;
  --cobalt-ocean-depths-4: #0070EB;
  --cobalt-ocean-depths-5: #4298F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cobalt-ocean-depths": {
        1: "#002060",
        2: "#003A8F",
        3: "#0055BF",
        4: "#0070EB",
        5: "#4298F5",
      }
    }
  }
}

Related searches

deep ocean blue palettemarine color schemedark blue brandingwater themed UI designcool dark blues

Palette colors

Hex values

Color 1#002060
·
Color 2#003A8F
·
Color 3#0055BF
·
Color 4#0070EB
·
Color 5#4298F5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.2:1Fail
3.3:1AA18
5.1:1AA
2
1.5:1Fail
1.5:1Fail
2.3:1Fail
3.5:1AA18
3
2.2:1Fail
1.5:1Fail
1.5:1Fail
2.3:1Fail
4
3.3:1AA18
2.3:1Fail
1.5:1Fail
1.6:1Fail
5
5.1:1AA
3.5:1AA18
2.3:1Fail
1.6:1Fail

Similar palettes

More like Cobalt Ocean Depths

View all cool
Deep Sea Siren
Ocean Current Depths
Ocean Depths Glimmer
Abyssal Bioluminescence
Abyssal Current Glide
Arctic Ocean Depths