Back to palettes

Palette

Cobalt Abyss Dive

A journey into the silent, deep waters of the ocean, where sunlight barely penetrates.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A2A#1C2C54#2E4F7A#5A8BAF#9CCCE0

Palette guide

How to use Cobalt Abyss Dive

Overview

The Cobalt Abyss Dive palette takes you on a journey into the silent, profound waters of the ocean, where sunlight barely penetrates. This collection of deep blues and indigos, from the intense #0A0A2A to the luminous #9CCCE0, is perfect for designs demanding depth, mystery, and sophistication. Designers can use #1C2C54 as a solid primary, while #2E4F7A offers a versatile mid-tone. The lightest hue, #5A8BAF, provides a gentle highlight, preventing the palette from becoming overly dark. This palette is ideal for projects that seek to convey a sense of gravitas, elegance, and a hint of the unknown.

Best used for

  • Luxury watch or jewelry branding
  • High-end tech product interfaces
  • Art gallery and museum website design
  • Sci-fi or fantasy game aesthetics
  • Nocturnal-themed event branding
  • Premium automotive brand visuals

Suggested color roles

primary

#1C2C54 - A deep, rich indigo that serves as a commanding primary color for main content, headers, or brand logos, conveying sophistication.

secondary

#2E4F7A - A slightly lighter, more visible blue, excellent for subheadings, navigation elements, or secondary calls to action, providing balance.

accent

#9CCCE0 - A clear, light sky blue that provides a striking contrast, ideal for highlighting interactive elements, key data points, or subtle graphic details.

background

#0A0A2A - An almost-black, ultra-deep blue, creating an immersive, dark backdrop that makes lighter elements appear to glow.

text

For text on #0A0A2A, #1C2C54, or #2E4F7A, use #9CCCE0 or white for optimal readability. For text on #9CCCE0, use black or #0A0A2A.

Accessibility notes

  • Ensure sufficient contrast when pairing #9CCCE0 with the darker blues like #0A0A2A for text or interactive elements.
  • Avoid using #5A8BAF for small text on #2E4F7A without verifying WCAG AA compliance due to proximity in luminance.
  • The darkest hue, #0A0A2A, provides a strong, accessible background for light-colored text.
  • When using #9CCCE0 as a background, ensure text is in a contrasting dark color like black or #0A0A2A.

Recommended combinations

Midnight Glow

Creates a dramatic, high-contrast look; #0A0A2A for background, #2E4F7A for content, and #9CCCE0 for luminous accents.

#0A0A2A · #2E4F7A · #9CCCE0

Deep Horizon

Use #1C2C54 for main sections, #5A8BAF for supporting elements, and #9CCCE0 for visual emphasis or interactive states.

#1C2C54 · #5A8BAF · #9CCCE0

Abyss Layers

Ideal for creating depth through gradients or layered UI components, moving from deepest to mid-tone.

#0A0A2A · #1C2C54 · #2E4F7A

CSS variables

:root {
  --cobalt-abyss-dive-1: #0A0A2A;
  --cobalt-abyss-dive-2: #1C2C54;
  --cobalt-abyss-dive-3: #2E4F7A;
  --cobalt-abyss-dive-4: #5A8BAF;
  --cobalt-abyss-dive-5: #9CCCE0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cobalt-abyss-dive": {
        1: "#0A0A2A",
        2: "#1C2C54",
        3: "#2E4F7A",
        4: "#5A8BAF",
        5: "#9CCCE0",
      }
    }
  }
}

Related searches

deep indigo color schememysterious blue palettedark elegant colorsoceanic branding darksophisticated blue UI

Palette colors

Hex values

Color 1#0A0A2A
·
Color 2#1C2C54
·
Color 3#2E4F7A
·
Color 4#5A8BAF
·
Color 5#9CCCE0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.3:1Fail
5.3:1AA
11.1:1AAA
2
1.4:1Fail
1.6:1Fail
3.7:1AA18
7.9:1AAA
3
2.3:1Fail
1.6:1Fail
2.3:1Fail
4.8:1AA
4
5.3:1AA
3.7:1AA18
2.3:1Fail
2.1:1Fail
5
11.1:1AAA
7.9:1AAA
4.8:1AA
2.1:1Fail

Similar palettes

More like Cobalt Abyss Dive

View all dark
Abyssal Coral Bloom
Abyssal Coral Bloom
Deep Ocean Twilight
Ocean Depths Current
Pelagic Zone Mystery
Abyssal Bioluminescence