Palette

Cobalt Ocean Depths

Immerses you in the intense, deep blues of the vast and mysterious ocean.

coolcalm5 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

#004D73#007BA7#00A2E8#003657#006791

Palette guide

How to use Cobalt Ocean Depths

Overview

The Cobalt Ocean Depths palette immerses you in the intense, deep blues of the vast and mysterious ocean. With colors ranging from the profound #003657 to the vibrant #00A2E8, this palette is perfect for designs that evoke serenity, power, and the endless expanse of the sea. Designers can leverage #004D73 as a strong primary, while #007BA7 offers a versatile mid-tone for various applications. The brightest hue, #006791, provides a compelling highlight. This palette is ideal for projects that aim for a sophisticated, calm, 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

#004D73 - 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

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

accent

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

background

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

text

For text on #003657 or #004D73, use #00A2E8 or white for optimal readability. For text on #00A2E8, use black or #003657.

Accessibility notes

Ensure high contrast when placing light text, such as #00A2E8, on darker blues like #003657 or #004D73.
Avoid using #006791 for small text on #007BA7 without verifying WCAG AA compliance due to similar luminance values.
The brightest hue, #00A2E8, offers excellent contrast against all darker blues in the palette for interactive elements.
When using #00A2E8 as a background, ensure text is in a contrasting dark color like black or #003657 to maintain legibility.

Recommended combinations

Deep Current

Creates a dramatic, high-contrast interface; #003657 for background, #004D73 for content, #00A2E8 for bright highlights/CTAs.

#003657 · #004D73 · #00A2E8

Ocean Vista

Use #004D73 for main sections, #007BA7 for supporting elements, and #00A2E8 for vibrant accents or delicate details.

#004D73 · #007BA7 · #00A2E8

Abyssal Layers

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

#003657 · #004D73 · #006791

CSS variables

:root {
  --cobalt-ocean-depths-2-1: #004D73;
  --cobalt-ocean-depths-2-2: #007BA7;
  --cobalt-ocean-depths-2-3: #00A2E8;
  --cobalt-ocean-depths-2-4: #003657;
  --cobalt-ocean-depths-2-5: #006791;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cobalt-ocean-depths-2": {
        1: "#004D73",
        2: "#007BA7",
        3: "#00A2E8",
        4: "#003657",
        5: "#006791",
      }
    }
  }
}

Hex values

Color 1#004D73

Color 2#007BA7

Color 3#00A2E8

Color 4#003657

Color 5#006791

Accessibility

Contrast checker

1.9:1Fail

3.2:1AA18

1.4:1Fail

1.5:1Fail

1.9:1Fail

1.7:1Fail

2.6:1Fail

1.3:1Fail

3.2:1AA18

1.7:1Fail

4.4:1AA18

2.2:1Fail

1.4:1Fail

2.6:1Fail

4.4:1AA18

2:1Fail

1.5:1Fail

1.3:1Fail

2.2:1Fail

2:1Fail

Similar palettes

More like Cobalt Ocean Depths

Abyssal Current Glide