Back to palettes

Palette

Cobalt Abyss Depths

Explores the mysterious and serene depths of the ocean where light barely penetrates.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0D2F4B#1C4E80#2E86AB#73C1E2#071D2F

Palette guide

How to use Cobalt Abyss Depths

Overview

The Cobalt Abyss Depths palette plunges into the mysterious and serene depths of the ocean, offering a powerful spectrum of deep blues and teals. Ranging from the profound #071D2F to the vibrant #73C1E2, this palette is designed to evoke a sense of calm, professionalism, and depth. Designers can utilize #1C4E80 for a solid primary, while #2E86AB provides a compelling mid-tone. The darkest hue, #0D2F4B, is excellent for backgrounds or foundational elements, creating a strong, immersive atmosphere. This palette is ideal for projects requiring a sophisticated, cool, and impactful visual identity, from tech interfaces to luxury branding.

Best used for

  • High-tech and software company branding
  • Marine research and conservation websites
  • Luxury product packaging (e.g., watches, spirits)
  • Financial services interfaces
  • Documentaries and media related to the ocean
  • Corporate presentations and dashboards

Suggested color roles

primary

#1C4E80 - A deep, authoritative blue, perfect for main headings, branding elements, or call-to-action buttons, conveying trust and stability.

secondary

#2E86AB - A vibrant, yet deep blue-green, suitable for subheadings, active states, or supporting visual information, adding dynamism.

accent

#73C1E2 - A bright, clear blue that provides a striking contrast, ideal for highlighting key data, interactive elements, or urgent notifications.

background

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

text

For text on dark backgrounds like #071D2F, use #73C1E2 or white for excellent visibility. For text on #73C1E2, use black or #071D2F.

Accessibility notes

  • Ensure high contrast when placing light text, such as #73C1E2, on dark backgrounds like #071D2F or #0D2F4B.
  • Avoid using #1C4E80 or #2E86AB for small text on similarly dark backgrounds without verifying WCAG AA compliance.
  • The bright #73C1E2 offers excellent contrast against all darker blues in the palette for interactive elements.
  • Use a distinct dark color like #071D2F for body text if the background is #73C1E2 to maintain readability.

Recommended combinations

Deep Dive

Ideal for bold, high-contrast interfaces; #071D2F as background, #1C4E80 for content, #73C1E2 for highlights/CTAs.

#071D2F · #1C4E80 · #73C1E2

Ocean Current

Creates a flowing, dynamic feel; #0D2F4B for base, #1C4E80 for main elements, and #2E86AB for vibrant accents.

#0D2F4B · #2E86AB · #1C4E80

Abyss Shimmer

Use #73C1E2 for prominent visuals, #2E86AB for supporting details, and #071D2F for dramatic depth or text.

#73C1E2 · #2E86AB · #071D2F

CSS variables

:root {
  --cobalt-abyss-depths-1: #0D2F4B;
  --cobalt-abyss-depths-2: #1C4E80;
  --cobalt-abyss-depths-3: #2E86AB;
  --cobalt-abyss-depths-4: #73C1E2;
  --cobalt-abyss-depths-5: #071D2F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cobalt-abyss-depths": {
        1: "#0D2F4B",
        2: "#1C4E80",
        3: "#2E86AB",
        4: "#73C1E2",
        5: "#071D2F",
      }
    }
  }
}

Related searches

deep blue color schemesoceanic corporate colorsdark teal paletteprofessional blue brandingtech interface colors

Palette colors

Hex values

Color 1#0D2F4B
·
Color 2#1C4E80
·
Color 3#2E86AB
·
Color 4#73C1E2
·
Color 5#071D2F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.4:1AA18
6.9:1AA
1.2:1Fail
2
1.6:1Fail
2.1:1Fail
4.3:1AA18
2:1Fail
3
3.4:1AA18
2.1:1Fail
2:1Fail
4.2:1AA18
4
6.9:1AA
4.3:1AA18
2:1Fail
8.5:1AAA
5
1.2:1Fail
2:1Fail
4.2:1AA18
8.5:1AAA

Similar palettes

More like Cobalt Abyss Depths

View all cool
Bioluminescent Abyss
Midnight Ocean Trench
Abyssal Current Glide
Cobalt Arctic Depth
Deep Ocean Currents
Deep Sea Phytoplankton