Back to palettes

Palette

Deep Cobalt Plunge

Rich and profound blues that plunge into the abyssal depths of the ocean, where mystery resides.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Cobalt Plunge 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 Cobalt Plunge.

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

Data visualization

#0047AB#002060#2C6DCC#003399#1A5CB0

Palette guide

How to use Deep Cobalt Plunge

Overview

The Deep Cobalt Plunge palette offers a profound and intense exploration of deep blues, mirroring the abyssal depths of the ocean. With the commanding #002060, balanced #0047AB, and vibrant #2C6DCC, this collection exudes professionalism, trustworthiness, and mystery. Designers can craft sophisticated corporate identities or high-tech interfaces, while developers will appreciate its consistent blue progression for intuitive navigation and compelling data visualization. This palette is ideal for projects that seek to convey stability, depth, and a cutting-edge sensibility.

Best used for

  • Technology and software companies
  • Financial services branding
  • Maritime and naval industries
  • Professional corporate websites
  • Data visualization dashboards
  • Security and defense applications

Suggested color roles

primary

Utilize #002060 as a deep, foundational blue for robust branding, main backgrounds, or commanding headers.

secondary

Apply #003399 for supporting content, subheadings, or secondary navigation, adding depth and authority.

accent

Highlight calls to action or key information with the vibrant #2C6DCC, ensuring clear visibility and engagement.

background

The darkest #002060 creates a sophisticated, immersive dark theme, while #1A5CB0 can be used for a slightly more vibrant backdrop.

text

For dark backgrounds, white or a very light gray ensures excellent readability. On lighter blues, a deep charcoal or #002060 provides crisp contrast.

Accessibility notes

  • Ensure high contrast for text when using any of these deep blues as backgrounds, especially #0047AB.
  • Verify that interactive elements using #2C6DCC stand out clearly against surrounding darker blues.
  • Prioritize white or very light gray text on #002060 and #003399 for optimal WCAG AA compliance.
  • Avoid using light blue text on mid-tone blue backgrounds without thorough contrast checking.

Recommended combinations

Abyssal Depths

Ideal for creating layered backgrounds or sections that convey profoundness and stability.

#002060 · #003399 · #0047AB

Cobalt Glow

Perfect for gradients or highlights, suggesting a luminous quality within deep waters.

#0047AB · #1A5CB0 · #2C6DCC

Ocean Mystery

Provides a strong contrast for main content, balancing the deepest tone with a vibrant accent for impact.

#002060 · #2C6DCC · #003399

CSS variables

:root {
  --deep-cobalt-plunge-1: #0047AB;
  --deep-cobalt-plunge-2: #002060;
  --deep-cobalt-plunge-3: #2C6DCC;
  --deep-cobalt-plunge-4: #003399;
  --deep-cobalt-plunge-5: #1A5CB0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-cobalt-plunge": {
        1: "#0047AB",
        2: "#002060",
        3: "#2C6DCC",
        4: "#003399",
        5: "#1A5CB0",
      }
    }
  }
}

Related searches

deep cobalt blue paletteocean depth hex codesmysterious blue colorsprofessional navy schemetech blue branding

Palette colors

Hex values

Color 1#0047AB
·
Color 2#002060
·
Color 3#2C6DCC
·
Color 4#003399
·
Color 5#1A5CB0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
1.7:1Fail
1.3:1Fail
1.3:1Fail
2
1.8:1Fail
3:1AA18
1.4:1Fail
2.3:1Fail
3
1.7:1Fail
3:1AA18
2.2:1Fail
1.3:1Fail
4
1.3:1Fail
1.4:1Fail
2.2:1Fail
1.7:1Fail
5
1.3:1Fail
2.3:1Fail
1.3:1Fail
1.7:1Fail

Similar palettes

More like Deep Cobalt Plunge

View all dark